UI Design – czyli czym zajmuje się UI Designer?

Termin UI Design zwykle jest wymieniany jednym tchem razem z UX. Internet coraz mocniej zaznacza swoją obecność w różnych obszarach naszego życia (jak zakupy, rozrywka czy edukacja), stąd też powstaje coraz więcej cyfrowych interfejsów. Dbają o nie osoby pracujące jako UI Designer.

O co chodzi w UI Design, dlaczego jest on ważny, co obejmuje i jakie narzędzia oraz kompetencje są potrzebne do projektowania interfejsów?

UI Design – co to jest?

UI, a w zasadzie User Interface Design, to projektowanie interfejsów. Nie tylko wirtualnych, ale także takich dla pralki, piekarnika czy blendera. Nie wierzysz? To sprawdź, czym zajmował się na przykład Dieter Rams (nie jestem spokrewniony), który przez dekady odpowiadał za projektowanie urządzeń RTV / AGD w niemieckiej firmie Braun.

Ale gdy dzisiaj ktoś mówi o UI, to w faktycznie w 99% przypadków ma jednak na myśli interfejsy cyfrowe (strony internetowe, aplikacje mobilne, etc.).

UI Design to część szerszego zagadnienia, jakim jest User Experience (UX). Projektowanie interfejsu to końcowa faza działań skupionych na stworzeniu doświadczenia użytkownika.

W UI chodzi głównie o projektowanie interfejsów, które są nie tylko przyjemne dla oka, ale przede wszystkim zrozumiałe i wygodne dla końcowego użytkownika. To zajęcie wymaga nietuzinkowych umiejętności graficznych, wyczucia estetyki i kreatywności.

Co obejmuje UI Design?

UI to suma wszystkich elementów składających się na wizualną oraz funkcjonalną sferę produktu – zarówno cyfrowego, jak i fizycznego, choć dla uproszczenia będę się odwoływał tylko do tej pierwszej grupy.

UI obejmuje więc:

• Kolorystykę
• Hierarchię wizualną elementów
• Formularze
• Krój i rozmiar czcionki
• Grafiki i zdjęcia
• Animacje
• Menu
• Przyciski
• Układ treści

Najtrudniejsze w procesie projektowania interfejsu jest połączenie tych wszystkich elementów w spójną całość, która będzie wygodna i atrakcyjna dla końcowego użytkownika.

Finalny produkt ma być przede wszystkim funkcjonalny, a nie tylko ładnie wyglądać. Nawigacja musi być zrozumiała, formularze nie mogą irytować, przyciski powinny być dobrze opisane, a interfejs intuicyjny.

W UI nie chodzi o zaprojektowanie kilku przepięknych ekranów, które nijak się mają do reszty aplikacji. UI Designer musi rozpracować wszelkie możliwe scenariusze, na jakie może natknąć się odbiorca produktu.

Nawet najpiękniejszy projekt graficzny, oparty o najnowsze trendy w designie, nie zda egzaminu, jeśli pod nim ukryty będzie potworek funkcjonalnościowy. Z dwojga złego lepiej mieć stronę brzydką lecz funkcjonalną, niż przepiękną, ale trudną w obsłudze. Natomiast nie jest to w żadnym wypadku nawoływanie do spoczywania na laurach. Celem projektowania interfejsów jest tworzenie rozwiązań zarówno pięknych, jak i nadzwyczaj wygodnych – choćby to było kolosalnym wyzwaniem.

UI Design to funkcjonalność + warstwa wizualna. Zawsze w parze, nigdy oddzielnie.

Czym zajmuje się UI Designer?

UI Designer skupia się przede wszystkim na estetyce. Ale to nie wszystko. Same kompetencje związane z obsługą Photoshopa nie wystarczą, aby poradzić sobie w tej roli.

Projektowanie

Większość czasu pracy UI Designer poświęca na projektowanie graficzne, zwykle bazując na makietach LoFi, dostarczonych przez UX Designera. Istotną częścią projektowania jest szukanie inspiracji i szkicowanie różnych wariantów ekranu.

W poprzedniej części wspomniałem o konieczności zwrócenia uwagi na funkcjonalne aspekty strony czy aplikacji. Nie jest to kluczowy element pracy UI Designera, ponieważ w prawidłowo zbudowanym zespole to UX Designer powinien wziąć na siebie ciężar opracowania ścieżek użytkownika i możliwych scenariuszy. Takie wsparcie pozwala się UI Designerowi skupić na tym, co potrafi najlepiej, czyli na projektowaniu.

Natomiast aby makiety od działu UX zgrabnie przełożyć na finalny produkt, UI Designer musi mieć świadomość tego, że funkcjonalność też jest ważna i nie można całkowicie zmienić interfejsu tylko dlatego, że ma się pomysł, który będzie “ładniejszy”.

Oczywiście często zdarza się, że UX i UI Designer to ta sama osoba. Wtedy łatwiej zadbać o spójność makiet z finalnymi projektami. Z drugiej strony taki specjalista musi opanować szerszy wachlarz kompetencji i siłą rzeczy w jednym z aspektów będzie po prostu słabszy.

Feedback i obrona swoich pomysłów

Praca projektanta UI jest nieco niewdzięczna ze względu na to, że w pewnym stopniu jego projekty podlegają subiektywnej ocenie innych. To, co jest na czasie i podoba się UI Designerowi, może budzić odmienne emocje u klienta czy szefa (i odwrotnie).

Nieodłącznym etapem projektowania jest zebranie informacji zwrotnej od akcjonariuszy (klient, ważne osoby w firmie) i zdecydowanie o tym, co trzeba poprawić. Tutaj często dochodzi do spięć, ponieważ opinie o warstwie wizualnej projektu mogą się mocno różnić, a przecież każdy “wie najlepiej” i chciałby postawić na swoim.

Tendencja, jaką obserwuję, to chęć dorzucenia swoich pięciu groszy nawet przez osoby, które wewnętrznie czują, że projek i tak jest już wystarczająco dopracowany. Powód? No przecież skoro do niczego się nie przyczepię, to może firma uzna, że jestem niepotrzebny i nie wnoszę wartości?

Takie przeciąganie liny może wykończyć nie jednego UI Designera. Dlatego istotne jest nieprzywiązywanie się do swoich projektów i akceptacja faktu, że trzeba będzie iść na ustępstwa, żeby popchnąć proces do przodu.

Współpraca z developerami

Po akceptacji projektu graficznego trafia on do programistów (a czasem do szuflady, ale to już inna opowieść). W praniu zwykle okazuje się, że niektóre pomysły UI Designera będą niemożliwe do wdrożenia albo zbyt kosztowne.

Konieczna jest wtedy odpowiednia reakcja i wdrożenie zmian do projektów graficznych. Nadzór nad tym, aby końcowy produkt, czyli działająca strona lub aplikacja, był jak najbardziej spójny z grafikami, też należy do obowiązków projektanta UI.

Co musi umieć UI Designer?

Umiejętności twarde w UI

Podstawą dla UI Designera jest umiejętność tworzenia grafik z wykorzystaniem odpowiedniego oprogramowania.

Popularnymi narzędziami są:

• Adobe Photoshop
• Adobe Illustrator
• Sketch
• Figma

Oczywiście sama znajomość interfejsu jeszcze nie wystarczy. UI Designer musi się świetnie odnajdywać w pracy polegającej na doborze kolorów, typografii, rozmieszczeniu elementów, decydowaniu o hierarchii wizualnej, etc.

Fundamentalne jest zrozumienie roli standardowych elementów, jakie są wykorzystywane w interfejsach. Mowa tutaj o checkboxach, radio-buttonach, listach, hoverach, różnych typach pól w formularzach, linkach tekstowych, ramkach czy podkreśleniach. To elementy swego rodzaju skrzynki z narzędziami. UI Designer musi wiedzieć, co w tej skrzynce ma i kiedy powinien wykorzystać konkretne rozwiązania.

Do tego dochodzi umiejętność zastosowania w praktyce zasad rządzących designem. Mowa tutaj o prawidłowym zastosowaniu reguł dotyczących grupowania, bliskości elementów, symetrii czy powtarzalności.

Istotna jest też znajomość HTML, CSS i JavaScript, a miłym dodatkiem jest umiejętność pracy z frameworkami, takimi jak AngularJS, NodeJS czy ReactJS. Chociaż UI Designer niekoniecznie musi sam kodować aplikację, to wiedza na temat technologii pomoże mu ocenić, jakie rozwiązania będą optymalne.

Nie bez znaczenia będzie też rozumienie analityki i chocż podstawowa umiejętność analizowania danych. Warto zainwestować w szkolenie z GA4.

Umiejętności miękkie w UI

Umiejętności miękkie, jakie powinien opanować UI Designer, to:

• Odporność na krytykę
• Cierpliwość
• Negocjowanie i argumentowanie
• Poczucie estetyki
• Kreatywność

Bez pierwszych dwóch cech trudno przetrwać spotkania pełne krytycznych uwag co do grafik.

Aby UI Designer był postrzegany jako ekspert w swoim fachu, musi umieć przekonać klienta lub współpracowników do zaproponowanych rozwiązań. Inaczej trudno będzie mu realizować projekty w terminie, bo zawsze znajdzie się coś do poprawienia.

Na koniec najważniejsze, czyli umiejętność tworzenia rzeczy “ładnych”. W szczegółowych kwestiach ta definicja jest wyjątkowo płynna, ale co do zasady ludzie potrafią w większości przypadków dość zgodnie określić, czy coś jest ogólnie brzydkie, czy ładne. Dla UI Designera poczucie estetyki to kluczowa cecha. Bez niej cała reszta ma niewielkie znaczenie.

UI Design Systems

UI Design Systems to zbiory komponentów, ikon i wzorców projektowych. Dobry UI Designer je zna i potrafi się nimi sprawnie posługiwać.

Oparcie projektu graficznego na takim systemie pozwala łatwiej zapanować nad jego spójnością. A to z kolei sprawia, że życie końcowego użytkownika jest nieco łatwiejsze. Zwłaszcza, jeśli dany Design System jest popularny – bo wtedy istnieje szansa, że użytkownik gdzieś już widział podobny interfejs. A wtedy łatwiej się nauczy Twojego, zacznie korzystać z aplikacji i będzie opłacać abonament (czyli pośrednio Twoją pensję) przez wiele miesięcy.

Popularnym systemem, o którym pewnie słyszałeś, jest Material Design, stworzony w 2014 roku przez Google. Systemów jest o wiele więcej – kilka przykładów to:

• Atlassian Design
• Carbon Design System
• Solid
• Fluent
• Eva Design System

Rozpoczęcie przygody z UI od projektowania w oparciu o Design System jest dobrym pomysłem. Zdecydowanie ułatwia to wejście w temat i nauczenie się podstaw. Na pewnym etapie oczywiście warto pójść swoją drogą, wykształcić własny styl, a może nawet stworzyć od zera cały Design System.

Książki o UI Design

Trendy w branży User Interface Design zmieniają się szybko, dlatego czytanie książek może się wydawać bezsensowne. Po co marnować na to czas, skoro wiedza szybko się straci na aktualności?

Cóż, niektóre zasady w designie są trwałe. Warto więc sięgnąć po kilka ponadczasowych pozycji, dzięki którym poznasz fundamenty dobrego projektowania interfejsów.

• About Face: The Essentials of Interaction Design
• Steal Like an Artist
• The Non-Designer’s Design Book

Zerknij też na książki o UX. Znajomość zagadnień związanych User Experience jest istotna dla projektanta UI.

Blogi i serwisy o UI

Aby być na czasie z nowymi rozwiązaniami, dobrze jest śledzić branżowe blogi i kanały na YouTube.

Kilka popularnych źródeł:

• Smashing Magazine
• Boxes and Arrows
• UserOnboard (genialne!)
• Awwwards
• Web Designer Depot
• OneExtraPixel

Podsumowanie

UI Design to tylko część UX, ale za to niezwykle ważna. W końcu to projektant interfejsów decyduje o tym, jak wyglądać będzie strona czy aplikacja mobilna.

Praca UI Designera to nie tylko dobieranie kolorków i tworzenie pięknych grafik, ale też dbanie o spójność wizualną interfejsu, zachowanie funkcjonalności, a często także konieczność obrony projektu przed krytyką interesariuszy.