🎨 Tradycja vs. digital – krótko o tym, kim jest Digital designer
Co musisz wiedzieć na samym początku – tradycyjna koncepcja designu i ta cyfrowa mają ze sobą, serio, wiele wspólnego.
Oba koncepty bazują na teorii projektowania i korzystają z takich narzędzi, jak kolor, kompozycja, kontrast, typografia, rytm.
Sam proces kreacji przebiega w oparciu o prawa psychologii widzenia. Wcześniej, nieco mniej funkcjonalnie, teraz – estetycznie, praktycznie, narzędziowo.
🔫 Początek UI designu - rewolucja modernistów
Około sto lat temu rozpoczął się graficzny przełom, zapoczątkowany przez ówczesnych projektantów. Największe zmiany zaszły przede wszystkim w komunikacji wizualnej i w określaniu kryteriów nowej estetyki.
To właśnie w ten sposób zrodziły się nowe standardy, które, przez następne kilkadziesiąt dobrych lat, kierowały procesem projektowania.
Moderniści – niemieccy, szwajcarscy, polscy, węgierscy – stworzyli zupełnie nowy kanon piękna w drukowanej sztuce: modernizm. Czyli co?
Ano, czyli świeże spojrzenie na komunikację wizualną, nowoczesne podejście do projektowania jako do narzędzia, a nie do sztuki.
Narzędzie, czyli coś, co ma stworzyć produkt, spełniający ściśle określoną funkcję (np. komunikacyjną) i przekazywać konkretne informacje. Sztuka dla sztuki? Totalnie passé. Od teraz liczyła się funkcjonalność.
Tak właśnie żyliśmy sobie w tych założeniach, które zostały stworzone na początku zeszłego wieku, przez około 80 lat. Wtedy pojawił się on. Cały na biało.
Wywrócił do góry nogami nie tylko sposób, w jaki były tworzone graficzne projekty, ale i codzienne, ludzkie życie.
🕸️ Internet – już nic nie było takie samo
Przez kilkadziesiąt lat w projektowaniu graficznym nie zmieniło się praktycznie nic. Broszury, wizytówki, akcydensy, listowniki. Statyczne logo. Sposób umieszczenia – lewy, górny róg.
Może i w różnych kolorach, niekiedy bardziej drapieżnych formach – podstawy pozostawały te same. Projekty, chociaż estetyczne, ewoluowały bardzo powoli.
Skoro coś działa, to nie ma sensu tego zmieniać, prawda?
Branding, graphic design, budowanie identyfikacji wizualnej - to wszystko opierało się o te same założenia. Dokładnie z tego letargu wyrwał nas Internet. Co dokładnie się zmieniło i jakie problemy musiał rozwiązywać ówczesny designer?
🖌️ Dzisiejsza rzeczywistość web designu – Graphic designer, a cyfrowa biegłość
Krok po kroku: dzisiejszy projektant graficzny (czy projektantka) posiada nie tylko niezmierzone pokłady kreatywności, nienaganny zmysł estetyczny, czy ponadprzeciętną dokładność.
W tradycyjnym projektowaniu, pracowano na takich pojęciach, jak pre-press, pantone, czy RAL. Znano techniki druku, zabiegi introligatorskie, opanował myślenie masterchannelami. To zagadnienia głównie pod druk.
Digital designer to nowoczesny człowiek renesansu. Cechuje się bardzo dużą wszechstronnością posiadanej wiedzy. Posiada też szeroki wachlarz umiejętności.
Rozumie języki HTML i CSS, koncepcję interaktywności (a to główna różnica pomiędzy książką, a stroną internetową) i responsywności. W projektach stosuje animacje, a UX Design nie jest mu obcy. Jego produktem końcowym jest np. responsywna strona internetowa.
Digital designer projektuje instrukcje, jak dany produkt funkcjonuje i wygląda, a nie finalny projekt. Digital designer myśli komponentami. Digital designer pracuje też na animacji.
💼 Praca jako Digital designer – zatrudnienie i zarobki
Głównym narzędziem do pracy osoby projektującej w digitalu jest komputer. Dzięki temu, w tej konkretnej dziedzinie, praca zdalna i praca hybrydowa przeważają nad klasyczną formą zatrudnienia.
Digital Designer może pracować zarówno jako freelancer(ka), jak i na etacie w firmie. Często nie ogranicza się do jednego miejsca zatrudnienia. Wielu profesjonalistów i profesjonalistek z Polski, prowadzi owocne współprace ze studiami zza granicy.
Zarobki w tej branży prezentują się optymistycznie. Mówimy tu o kwotach w euro i w złotówkach. Digital designer za granicą zarabia od 5 do 8 tysięcy euro na miesiąc, a w Polsce – około 18 tysięcy złotych. Tak, to mediana. Źródło: Jooble.
✋ Digital designer – poznaj 5 kluczowych umiejętności
Generalnie, Digital designer to taka osoba, która zna teorię projektowania, psychofizjologię widzenia i umie ją stosować w projektach.
Istotny jest też mindset Digital designera, czyli trzymanie ręki na pulsie i ciągła nauka nowych rzeczy.
Dzięki swojej wszechstronnej wiedzy, DD potrafi dostrzec potrzeby odbiorców i szybko na nie zareagować. Z produktów cyfrowych tworzy świeżą, funkcjonalną sztukę. Rozumie, że animacja stanowi sposób komunikacji z użytkownikiem.
Teraz przyszedł czas na szczegóły. Bierz notatnik i zapisz te 5 najważniejszych umiejętności, które musi posiadać cyfrowy designer(ka).
🖥️ Digital designer zna odpowiednie oprogramowanie
Najważniejszy program do projektowania? Jedno słowo: Figma.
Cieszy się dużą popularnością zarówno w Polsce, jak i poza jej granicami. Umożliwia sprawną pracę w grupach nad projektami, dzielenie się feedbackiem, a co najważniejsze – dzięki niej możesz tworzyć w prosty sposób naprawdę rozbudowane interfejsy graficzne.
Sprawdzisz też poziom interaktywności projektu przez prototypowanie, dowiesz się, jak użytkownik będzie poruszać się po interfejsie aplikacji (lub strony). Pozwala na szybki eksport kodu. Ułatwia kontakt z ekipą developerską.
To zwinny, lekki program. Uruchamia się w kilka sekund. Umożliwia pracę przez przeglądarkę. Stworzone projekty przechowywane są w chmurze – dzięki temu możesz zyskać dodatkową przestrzeń na dysku.
Pozwala też na tworzenie naprawdę różnorodnych rzeczy, w tym np. grafik na social media.
🧑💻 Digital designer zna podstawowe zasady kodowania
Co prawda nie musi posiadać top umiejętności programowania, ale za to musi znać podstawowe zasady, które rządzą kodem.
Zrozumienie, jak działa kod i jak pracują osoby odpowiedzialne za zaprogramowanie projektu jest istotnym elementem czystej komunikacji.
Cały Internet oparty jest na pewnym modelu myślenia. To, co na pierwszy rzut oka wydaje się lekkie i kreatywne, pozbawione ograniczeń, tak naprawdę jest „nudną do bólu", opisaną kodem strukturą.
Kluczowe koncepty kodowania, które musisz znać:
- Viewport – To obszar okna przeglądarki internetowej. Viewport ma swoją wysokość i szerokość, która zmienia się wraz z rozszerzaniem bądź zmniejszaniem okna przeglądarki.
- Box model – model układania layoutu. Każdy content webowy jest zamknięty w pudełku, a to pudełko, tak dodatkowo, jest w innym pudełku. I tak dalej. Ta świadomość pozwala na odpowiednio zorganizowane projektowanie.
- Relatywne określanie wielkości i pozycji – em, rem, procenty. Dodatkowo koncepty, które pozwalają ustalić, gdzie element ma się znaleźć w layoucie: procenty, praca na kolumnach, siatki, czy grid.
- Klasy CSS – inaczej: myślenie reużywalnymi stylami. Świadomość, że CSS opiera się na klasach. Jedna klasa to styl, który można przerzucić na inne elementy. Tak na przykład: stylem może być krój pisma, może to być wielkość marginesu.
- Flexbox – sposób na układanie layoutu. Musisz wiedzieć, w jaki sposób Auto Layout w Figmie jest odwzorowany przez Flexbox w HTML. Musisz znać zasady, które nim rządzą – co w nim możesz, a czego nie możesz zrobić.
- Responsywność i skalowanie – jak wielkości elementów mają wyglądać przy zmianach wielkości ekranu?
- Systemowe skalowanie typografii – wyrażanie wielkości fontu za pomocą em i rem, a nie pikseli. Pozwala na płynne skalowanie krojów typograficznych.
🧠 Digital designer zna podstawy UX
Każdy UI powinien znać trochę UX, a każdy UX powinien znać trochę UI.
Dlaczego? Design nie może być kompletny, bez zastosowania się do tych zasad:
- Musisz wiedzieć, po co istnieje strona internetowa. Nie da się zaprojektować strony, bez wiedzy o tym, po co ona jest.
- Musisz mieć świadomość konwersji i sposobów jej osiągania. Konwersją może być zakończenie transakcji w sklepie e-commerce, bądź zapis do newslettera.
- Wczuj się w rolę usera. Jak zachowa się na stronie?
- Umiejętność poprowadzenia prostego user testingu. Jak? Najprościej stworzyć prototyp w Figmie i umówić się z kimś znajomym, żeby z niego skorzystał, mówiąc na głos co widzi i myśli.
- Świadomość podstawowych wzorców (patternów) UX/UI. Dzięki temu nie musisz wymyślać na nowo rozwiązań, np. przy projektowaniu konkretnych interakcji. Prezentacja produktu w nowy, oryginalny sposób jest jak najbardziej okej, ale nowy koncept koszyka już nie.
- Znajomość koncepcji User Persona. To sposób na określenie osoby, dla której powstaje produkt.
- Znajomość koncepcji User Journey. Świadomość, jaka ma być interakcja użytkownika z produktem i jakie ma być jego doświadczenie na konkretnym etapie podróży.
- Świadomość potrzeby architektury informacji. Jak wygląda hierarchia informacji i jak dane są pokategoryzowane.
🕹️ Digital designer myśli interakcjami i animacjami
Projekt to dynamiczny ciąg ekranów. Łatwo to zrozumieć na przykładzie buttona.
Kiedy początkujący myśli o przycisku „kup teraz”, najprawdopodobniej widzi go jako tylko jeden obraz. Zwykle jest to aktywny stan przycisku.
Musisz pamiętać, że przycisk powinien inaczej wyglądać, gdy najedziesz na niego kursorem, a inaczej, gdy jest np. nieaktywny. Stanów, które musisz zaprojektować, jest 5.
- Default - stan „wyjściowy” buttona,
- Hover - stan podczas najeżdżania kursorem,
- Active - gdy przycisk jest aktywny, możliwy do podjęcia interakcji,
- Focused - gdy zostanie zaznaczony np. poprzez Tab,
- Visited - gdy zostanie już „kliknięty”.
Każdy z tych stanów jest determinowany przez konkretną interakcję z użytkownikiem.
Chcesz wiedzieć więcej o animacji? Sprawdź artykuł: 🎨 UI design – 5 kluczowych protipów.
📏 Digital designer myśli systemowo i tworzy zasady
Stosowanie powtarzalności zasad w planowaniu layoutu pomaga odbiorcom w zrozumieniu tego, co się dzieje na stronie lub w aplikacji. To cenna instrukcja obsługi.
Stworzenie ograniczeń pozwala na kreatywność. Nadaje produktowi strukturę, która nie tylko wygląda estetycznie, ale i dobrze funkcjonuje.
Dlaczego? Produktami cyfrowymi rządzą ściśle określone reguły. Pierwsza z nich: każda strona internetowa składa się z modułów.
Chcesz zanurkować w ten temat? Zobacz artykuł: 🌐 Web design – 5 zasad projektowania.
🤲 Chcesz zostać Digital Designerem? Dołącz do nas!
Design Practice, czyli my, mamy dla Ciebie doskonałą propozycję. To kompleksowe szkolenie z zakresu projektowania pod digital – Digital Designer.
Prowadzący, Tom Biskup, to projektant i Art Director z kilkunastoletnim doświadczeniem. Ceniony wykładowca na różnych uczelniach, np. SWPSie, czy School of Form. Pracował zarówno w studiach rodzimych, jak i zagranicznych.
Nie wiesz, czy Digital Designer jest dla Ciebie? Możesz skorzystać z bezpłatnych lekcji projektowania cyfrowego. Jest ich aż sześć, z czego trzy pochodzą prosto z wnętrza kursu!
🎙️ Chcesz dowiedzieć się więcej o pracy Digital Designera i kursie Digital Designer? 👉🏻 Sprawdź tutaj odcinek podcastu Design Practice z Tomem Biskupem!
