Projektowanie graficzne w UI designie

Pytania o to od czego zacząć, żeby zostać projektantem UI (interfejsów) to jedne z częstszych, które mi zadajecie. Na blogu i kanale pojawił się kiedyś materiał, który miał dać pojęcie o tym, czym jest projektowanie UI, podałam tam kilka zagadnień, które trzeba znać żeby projektować, ale było to dość ogólne.

Dziś chciałabym się skupić na jednej z podstaw, której będziemy potrzebować, jeśli poważnie myślimy o projektowaniu graficznych interfejsów użytkownika. Ważne – w tym materiale poruszam kwestie wyłącznie wizualne. O innych opowiem pewnie kiedy indziej!

Tekst jest trochę długi, ale znajdziecie tu:

Zagadnienia związane z kompozycją
Pojęcia, które warto poznać przy pracy z barwą
Co warto poznać z obszaru typografii?
Projektowanie graficzne w UI designie
Książki, które pomogą w nauce
Kilka pytań i odpowiedzi na koniec

W każdej części jest również skrócona lista pojęć do nauki

Projektowanie graficzne proszę Państwa!

To najważniejszy punkt dla projektanta graficznych interfejsów, serio. Można powiedzieć, że w dobie gotowych design systemów, frameworków i gotowych UI kitów (gotowych zestawów przygotowanych w programach graficznych, tutaj przykład), to przecież niepotrzebne. Ale uwierzcie mi, widać różnicę w jakości pracy, kiedy ktoś na codzień składa gotowe klocki lub odtwarza widziany wcześniej interfejs, a kiedy musi sam coś zaprojektować od zera. Kwestie takie jak kompozycja, praca z barwą, kontrastem i typografią to drobne detale, które rzutują na jakość końcowego projektu. To wszystko będzie składać się na hierarchię wizualną – szalenie ważną i mającą wpływ na doświadczenia użytkowników w kontakcie z interfejsem.

Podstawowe zasady są wspólne – jeśli jesteście po uczelniach artystycznych (np. ASP), pracowaliście w drukowanych materiałach, czy branży reklamowej, w teorii powinniście znać wszystkie podstawy, które wykorzystacie również w UI. Bo projekt interfejsu to nic innego, jak pewien obrazek – różnica jest tylko taka, że z nim wchodzi się w interakcję i trzeba o tej interakcji również pomyśleć. Więc podsumowując – osoby, które pracowały już z projektami graficznymi, tylko w innej branży, mają trochę łatwiej (no chyba, że nie kumają w projektowanie graficzne, bo takie też pewnie są). No dobra, do teraz przejdźmy do podstawowych pojęć.

1. Kompozycja

Dużą różnicą między projektowaniem UI, a tym na potrzeby materiałów np. reklamowych, jest dynamiczny charakter interfejsów. No bo wiecie, kiedy projektujemy książkę, jej forma w zasadzie się nie zmienia (można wygiąć okładkę, inaczej złapać, ale nic ponad to). Projektując interfejs musimy wziąć pod uwagę przede wszystkim różne rozdzielczości ekranów, na których będzie się wyświetlał, ale również fakt, że użytkownik wchodzi z tym interfejsem w interakcję.

Co to oznacza? Że może klikać, zaznaczać, dodawać treści, kasować je, edytować, rozciągać, zmniejszać. Może się też czasami coś nie wyświetlić albo będzie ładować się bardzo długo (bo jest np. słaby zasięg sieci).

I projektując interfejs musimy po prostu to wszystko brać pod uwagę. Nie wystarczy zaprojektować jednego obrazka, tylko wersji tego obrazka powinno być co najmniej kilka. Stąd projektuje się czasami w różnych rozdzielczościach albo pokazuje się różne stany elementów (np. przycisków i formularzy). Cały czas powinniśmy zastanawiać jak będzie zachowywać się dany element w jakiejś sytuacji. Ale zanim przejdziemy do projektowania tych różnych sytuacji, musimy umieć zaprojektować przynajmniej jedną.

To w jaki sposób ułożymy elementy na ekranie ma duże znaczenie w tym jak będziemy odbierać interfejs. Czy będzie wydawał nam się uporządkowany i prosty w odbiorze, czy wręcz przeciwnie chaotyczny i przeładowany informacjami? Czy użytkownik, który odpali naszą aplikację, będzie wiedział w jakiej kolejności powinien czytać treści na ekranie i których zagadnień dotyczą przyciski, obrazki czy inne elementy interfejsu.

Tu kluczowe będzie:

stosowanie odpowiednich marginesów dla całego widoku i jego drobnych elementów (np. od ikony do tekstu, między nagłówkiem a paragrafem, między zdjęciami);
układanie elementów względem siebie i dopasowanie ich wielkości;
stosowanie siatek (gridów) – wyrównywanie elementów, również tekstów!

Jak uczyć się o kompozycji? Przede wszystkim oglądać – obserwować i zapisywać sobie projekty, które nam się podobają (można to robić na dysku, na Pintereście albo korzystając z narzędzi do tego dedykowanych). Warto sięgnąć do historii – popatrzcie jak budowane były obrazy znanych malarzy, zapoznajcie się z terminami jak kompozycja centralna, horyzontalna, wertykalna czy statyczna i dynamiczna. O tym trochę już opowiadałam w materiale na blogu i kanale (link będzie w opisie).

Kolejna rzecz to gridy – korzystajcie na początku z gotowych siatek. Takie grid systemy możecie znaleźć w sieci, również programy do UI mają wbudowane narzędzia, które pozwalają szybko tworzyć takie siatki – i nauczcie się z nich korzystać. Jeśli poznacie narzędzie i zrozumiecie o co w nim chodzi, będziecie mogli świadomie łamać pewne zasady, bawić się konwencją, osiągać bardziej oryginalne rezultaty – ale warto zacząć od podstaw. Jeżeli chodzi o siatki, ostatnio na polskim rynku wydawniczym pojawiło się trochę propozycji od wydawnictwa d2d.pl. To między innymi Siatki, czyli zasady kompozycji typograficznej (Kimberly Elam) i Porządek w projektowaniu (Jean Ulysses Voelker).

Kompozycja to też miejsce, w którym można zrobić sporo błędów, więc powinno się jak najszybciej uczyć dobrze układać elementy na ekranie. Nawet najbardziej dopieszczone przyciski czy ikonki, nie będą tak dobrze działać, jeżeli nie ułożymy ich w odpowiedni sposób względem innych elementów interfejsu. Na projekt interfejsu trzeba patrzeć całościowo, bo właśnie tak będą patrzeć na niego użytkownicy. Poza wyjątkami – jak projektanci graficzny, nikt raczej nie będzie wzdychał do naszego projektu dropdowna albo checkboxa.

Pojęcia, które warto pogłębić:

hierarchia wizualna, skala, proporcja, kontrast, rytm, balans
kompozycja otwarta i zamknięta
kompozycja horyzontalna, wertykalna, diagonalna, centralna
kompozycja statyczna i dynamiczna
siatka (grid)
8pt grid (Material Design)
symetria i asymetria
white space, przestrzeń negatywowa
gestalt (zasada bliskości, podobieństwa, figura/tło, doświadczenia i inne)
złoty podział i ciąg Fibonacciego
kadrowanie
RWD (adaptive i fluid design)

2. Praca z barwą

Drugą trudnością, którą trzeba wziąć pod uwagę projektując interfejsy, czy zwykłe strony, to różne sposoby wyświetlania barw na ekranach. Z pewnością sami nie raz widzieliście, jak potrafią się wyświetlać kolory na różnych monitorach, telewizorach czy telefonach.

Niestety – z tym nie wygracie. Nigdy nie będziecie mieć pewności czy wyświetlane kolory będą odbierane w podobny sposób, gdy projektowaliście UI. Ale oprócz monitorów, dochodzi zagadnienie postrzegania barw. Są osoby, które nie widzą barw wcale, są takie, które widzą tylko część z nich i musimy sobie z tym jakoś poradzić. Na całe szczęście powstały pewne wytyczne i zasady, których możemy się trzymać, jeśli chcemy mieć pewność, że większość użytkowników będzie mogła w podobny sposób korzystać z naszych interfejsów.

To między innymi WCAG, czyli Web Content Accessibility Guidelines – najpowszechniejszy zestaw wytycznych, który dotyczy nie tylko warstwy wizualnej, ale przede wszystkim technicznej – jak zakodować, zaprogramować treści, żeby były dostępne np. dla osób niewidomych. WCAG opisuje również kwestie związane z barwą, a szczególnie zagadnienie kontrastu, więc warto się temu przyjrzeć. O ironio, mam wrażenie, że nie jest to opisane w najbardziej przystępny sposób i może przerażać (zwłaszcza ilość treści), więc warto sięgnąć po opracowania i artykuły, które w prostszy sposób tłumaczą jak się do tematu barw w internecie zabrać.

Oczywiście praca z barwą to nie tylko kwestie dostępności, ale też temat dopasowania kolorystycznego, zestawienia barw, budowania nastroju, klimatu za pomocą barwy, bo wciąż nie możemy zapominać, że ta barwa odgrywa dość dużą rolę w sposobie odbioru treści. Czy coś wydaje nam się bardziej poważne i eleganckie, czy wręcz przeciwnie, młodzieżowe, dynamiczne i wyluzowane.

Jak nauczyć się dobierać kolory? To wbrew pozorom nie jest wcale takie proste. I najlepszym sposobem jest obserwacja i odtwarzanie. Warto poznać też podstawowe sposoby łączenia kolorów na bazie palet i nie ma absolutnie nic złego w tym, żeby korzystać najpierw z tych gotowych propozycji połączeń. Im pewniej będziecie czuli się w tym temacie, tym częściej będziecie rezygnować z gotowców na rzecz własnych pomysłów.

Jeżeli chodzi o źródła nie mam tu ulubionych książek i myślę, że spokojnie można sięgać po opracowania w sieci (jak choćby to z kanały The Futur).

Pojęcia, które warto pogłębić:

barwa, jasność, nasycenie
kontrast kolorystyczny w WCAG (dostępność / accessibility)
barwy podstawowe, pochodne, proste i złożone
barwy achromatyczne
barwy ciepłe i zimne
koło barw, schematy kolorów (analogiczne, dopełniające, monochromatyczne, triada, tetrada)
gradienty, cienie i przezroczystości w UI

3. Typografia

No i na deser – literki. Projekty interfejsów składają się głównie z nich – treści, nagłówków, linków do kolejnych podstron, komunikatów w formularzach, powiadomień, tekstów w przyciskach. Od tej typografii więc nie uciekniecie, a to niestety temat rzeka. Począwszy od wyboru odpowiedniego kroju, po formatowanie i dekorowanie, tak, by najlepiej spełniał swoją rolę.

Skład tekstu odgrywa ważną rolę w projekcie interfejsu – źle zrobiony, sprawi, że interfejs będzie nieczytelny i nie będzie zachęcał do używania go. Dobry, będzie wręcz niewidzialny dla użytkowników – po prostu będą czytać komunikaty i skupiać uwagę na funkcjach (a nie trudnościach z odczytaniem treści).

Pierwszą decyzja to wybór kroju (fontu). Ten oprócz odpowiedniego dostosowania technicznego (i licencji), musi być przede wszystkim czytelny w małym rozmiarze. To znacznie ogranicza wybór, ale też nie oznacza, że ta typografia w interfejsach musi być nudna. Zanim jednak za bardzo zaszalejemy literkami, upewnijmy się, że opanowaliśmy podstawy. Początkującym z pewnością pomoże morze przeglądów „najlepszych fontów do UI” i piszę to bez cienia (ostrego mgły) ironii – pamiętajcie jednak by zwracać uwagę na to, czy wspierają polskie znaki gdy projektujecie coś w rodzimym języku (zdecydowana większość tak, ale jednak warto sprawdzić wcześniej).

Kolejne decyzje to dobór wielkości fontów (uwaga by nie były zbyt małe!) oraz skali typograficznej (jakie wielkości stosujemy do nagłówków, nawigacji, drobnych dopisków i głównego tekstu). Z pomocą mogą przyjść na początek gotowce, takie jak ten: https://type-scale.com

W typografii, jak w innych elementach interfejsu kluczowa będzie spójność – jeśli wybieramy jedną wielkość do nagłówków to się jej trzymajmy, jeśli w określony sposób stosujemy wyróżnienia (np. pogrubienia bądź podkreślenia) to stosujmy je wszędzie w ten sposób. To dotyczy również wyrównania paragrafów tekstu – w zupełności wystarczy to do lewej, zamiast do lewej, do prawej i środka na jednym ekranie.

Jeżeli szukacie materiałów do nauki typografii to akurat świetnie trafiliście – tych jest chyba najwięcej, ale warto zwrócić uwagę, czego te materiały dokładnie dotyczą. Początkujących zachęcam do lektury czegoś możliwie ogólnego na dobry start – tak żeby poznać z grubsza podstawowe zasady i zagadnienia. Niezmiennie polecam, niedawno wznowioną w druku, Pierwszą pomoc w typografii (Friedrich Forssman, Hans Peter Willberg) czy Design dla hakerów (David Kadavy), który w ogóle porusza podstawowe zagadnienia projektowania, również kompozycji. Ekrany i interfejsy są na tyle specyficznym medium, że warto również sięgnąć po treści im dedykowane. I tu gorąco polecam rewelacyjną Web typography (Richard Rutter) i Better Web Type (Matej Latin).

Pojęcia, które warto pogłębić:

kroje bezszeryfowe, szeryfowe, pisanki (script), monospace, display
kerning, tracking, interlinia (leading)
wyrównania tekstu (lewo, prawo, środek, korytarze/rzeki w typografii)
skale typograficzne
punkty, pixele, em, rem,
kursywa, kapitaliki, wersaliki
webfonty i variable fonts
kontrast w typografii
wiszące spójniki, wdowy i bękarty

Projektowanie graficzne jest nieodłącznym elementem projektowania interfejsów, więc jeśli planujecie zmianę specjalizacji czy przebranżowienie, nie warto pomijać tego tematu. Projektowanie graficzne daje wam bowiem szereg narzędzi, które możecie stosować by sprawiać, że interfejs będzie bardziej czytelny czy zapamiętywalny. Zapoznanie się z teorią pozwoli wam także swobodniej odpowiadać na pytania w stylu „Dlaczego to jest takie / ma taki kolor / ma taki układ / wielkość?” oraz bardziej krytycznie podchodzić do pojawiających się trendów.

Projektując swoje pierwsze interfejsy warto korzystać od razu z narzędzi do tego dedykowanych. Zostawcie Photoshopa, Canvę czy Corela i sięgnijcie po Figmę (darmową!), Adobe XD czy cokolwiek innego, co tylko ułatwi wam pracę i nauczy dobrych praktyk. Nie trzeba znać wszystkich możliwych programów, ale warto znać różnice między nimi i efekty, które można osiągnąć. Jedne będą nadawały się bardziej do projektowania warstwy wizualnej, inne dają możliwość tworzenia mniej lub bardziej zaawansowanych interakcji.

Moim zdaniem w projektowaniu najtrudniejsze to nauczyć się widzieć. Jak już widzicie co jest dobre, a co złe, to połowa sukcesu. Bo jeśli widzicie co nie gra, bardzo łatwo to poprawić. A jeśli robicie coś i nie za bardzo czujecie, że gdzieś kolory się nie spinają, albo jest ciasno, albo coś jest za duże czy krój pisma zupełnie nie pasuje, to już trochę ciężej, bo musicie znaleźć kogoś kto wam w tym pomoże i zacząć słuchać.

Poniżej dorzucam jeszcze krótką listę dodatkowych haseł, które mogą się przydać przy projekcie warstwy wizualnej. A także kolejne książki, które ogólnie poruszają tematy projektowania.

Pojęcia, które warto pogłębić:

rozdzielczość ekranu i gęstość pikseli
formaty plików (svg, png, gif, jpg)
grafika wektorowa i rastrowa
motion design – animacje w interfejsach
Czym jest Zeplin i jak go używać?
wersjonowanie projektów (np. przez Plant lub Abstract)
Figma, Adobe XD, Sketch, UXPin, Framer, ProtoPie, Principle (nie trzeba ich wszystkich znać, ale zobaczcie jakie są między nimi różnice, co można w nich robić, do czego służą)

Książki, które mogą wam pomóc w nauce:

Graphic design, the new basics (Ellen Lupton)
Universal principles of design. 125 ways to enhance usability (William Lidwell, Kritina Holden, Jill Butler)
Oko i mózg. Psychologia widzenia (Richard Langton Gregory)

I trochę cięższe w odbiorze:
Sztuka i percepcja wzrokowa (Rudolf Arnheim)
Teoria widzenia (Władysław Strzemiński)

Zawsze zachęcam też żeby zerknąć na serię na YouTube książkowych polecajek (lub tekstowe wersje na blogu) oraz serię podstaw projektowania (i na kanale i na blogu), gdzie opowiadam krótko o podstawowych pojęciach. Oczywiście obejrzenie 6 filmów nie sprawi, że skumacie cały temat, tam znów macie dość dużo pojęć, które musicie sobie rozszerzyć i zrobić własny research, ale to dobry punkt wyjścia.

Ile to wszystko potrwa?

Projektowania graficznego nie nauczycie się po kilku kursach, nie nauczycie się w kilka miesięcy. I może brzmi to trochę demotywująco, ale weźcie pod uwagę fakt, że do ogarnięcia jest sporo materiału. I to tylko teorii. Druga część nauki to praktyka. Możecie przeczytać wszystkie najmądrzejsze rozprawy świata o projektowaniu i wciąż nie umieć projektować. Musicie po prostu zacząć to robić. I nie czekać miesiącami tylko od razu próbować. Łączcie zdobywanie wiedzy teoretycznej, z praktyką. Jeśli przeczytaliście artykuł, spróbujcie coś zaprojektować używając wiedzy, którą zdobyliście. Róbcie notatki, zbierajcie sobie źródła, oglądajcie projekty i próbujcie je odtwarzać. Praktyka, praktyka, praktyka.

No i pamiętajcie, że projektowanie graficzne to tylko mała część zagadnienia projektowania interfejsów graficznych. Tu dochodzą jeszcze kwestie interakcji z użytkownikiem, użyteczności, doświadczeń użytkowników i technologii. To długa droga, ale jeśli was pasjonuje, przyniesie wam z pewnością wiele radości!

Kilka pytań i odpowiedzi na koniec

Bo często się powtarzają, więc uznałam, że warto je tu dorzucić

1. Czy trzeba umieć rysować żeby zostać UI designerem?

Nie. W projektowaniu UI umiejętność rysunku właściwie się nie przydaje. Z jednym wyjątkiem – ilustracja i ikony. Nie jest to jednak coś, co jest niezbędne w pracy, a zarówno ilustracje czy ikony można kupić na stockach lub zamówić od osób, które się w tym specjalizują.

Będziecie natomiast pewnie często szkicować swoje pomysły i wstępne kompozycje – szkicuje się jednak koncepty i to proste rysunki, które składają się z prostokątów i kwadratów. Nie przesadzałabym więc z tym umiejętnym rysowaniem w tym przypadku.

2. Czy trzeba ogarniać branding?

Nie, choć ostatnio coraz częściej trafiam na firmy, które sprzedają projektowanie brandingu razem ze stronami lub projektami aplikacji. Co do zasady jednak, z reguły te dwie dziedziny się rozdziela i znajdziecie na rynku projektantów, którzy specjalizują się w strategii komunikacji, marki, brandingu właśnie i tych, którzy siedzą w interfejsach.

3. Czy trzeba umieć programować?

Nie, programowanie zostawmy programistom (oni serio doskonale się na tym znają i nie trzeba im pomagać). Ale z całą pewnością warto poznać choćby podstawy kodowania (HTML i CSS) na tyle, żeby rozumieć podstawowe pojęcia. Są firmy, które oczekują umiejętności zakodowania własnych projektów (z tego co pamiętam to Google i Booking), ale te firmy są raczej w mniejszości. Kursy HTML i CSS znajdziecie w sieci za darmo i na tym poziomie projektantowi UI to w zupełności wystarczy.

4. Czy trzeba kończyć konkretne studia żeby zostać UI designerem?

Nie, ale mogą być pomocne kierunki związane z projektowaniem (Grafika, Wzornictwo czy nawet Architektura), są kierunki bardziej techniczne (jak specjalizacje na Informatyce) czy te już z bardziej UXowego poletka (Psychologia ze specjalizacją HCI, Kognitywistyka, UX Design). Nie oznacza to wcale, że osoby po zupełnie innych kierunkach, czy bez studiów, nie znajdą pracy w zawodzie.

5. Czy polecam jakieś kursy z projektowania UI?

Szczerze powiedziawszy, nieszczególnie – tzn. jest ich na pewno cała masa, ale nie miałam okazji przejrzeć ich wszystkich. Zwłaszcza, że niektóre z nich bywają dość drogie. Zachęcam za to żeby zerknąć na platformy kursowe jak Eduweb.pl, Skillshare.com (zwłaszcza darmowy Graphic Design Basics: Core Principles for Visual Design ) czy Udemy.com, gdzie można wykupić dostęp abonamentowy i sprawdzić w jednej cenie kilka kursów (no i po miesiącu można zrezygnować jeśli nie będziecie zadowoleni).

Ci, którzy mnie obserwują trochę dłużej wiedzą, że współpracuję z Eduweb przy tworzeniu ścieżki UXowej – powoli pojawiają się materiały również z zakresu UI, ale nie jest to materiał, który pokrywa wszystkie tematy z tego obszaru.

Jest też sporo darmowej wiedzy w sieci i myślę, że warto zacząć właśnie od tego. Począwszy od stron takich jak smashingmagazine.com, po kanały na YouTube, które w dobie wirusa wyrastają jak grzyby po deszczu.

Projektowanie graficzne w UI designie