Często dostaje pytania odnośnie ścieżki UX/UI Designera. Postanowiłam sukcesywnie dodawać tutaj moje nieco dłuższe odpowiedzi, bo wiele z tych pytań się powtarza, więc czuję, że może się Wam to przydać 🙂 Najpopularniejsze jest oczywiście pytanie Jak zacząć?, a zaraz niedaleko za nim Czy muszę znać się na grafice? Niewątpliwie wiąże się to z utrwalonym stereotypem na temat pracy projektanta stron/grafika, z którym chciałabym się dzisiaj rozprawić. Pamiętam, że sama miałam takie wątpliwości, a z perspektywy moich kilku lat doświadczenia, chyba w końcu mogę odpowiedzieć na te pytanie we właściwy sposób. Pogadajmy o tym, czym się w ogóle zajmuje Ui designer i jakich umiejętności potrzebuje.
Na czym nie polega zawód UI designera?
UI designer projektuje finalną wersję interfejsu użytkownika. Mogą to być aplikacje mobilne, aplikacje desktopowe, aplikacje webowe, strony internetowe, landing page i wiele innych. Projektowanie UI powinno być poprzedzone (lub przeplatane) z fazą UX. Na etapie projektowanie user experience określone powinny być kluczowe funkcje, ich rozmieszczenie, architektura informacji całego systemu, ścieżki użytkownika. Wszystko to przekłada się na wireframy, na podstawie których, UI designer projektuje interfejs. To co najważniejsze, a co jeszcze nie do wszystkich dotarło – praca UI designera to nie kolorowanie wireframów!
Praca UI designera to nie kolorowanie wireframów
I właśnie z tego powodu, nie jest to stricte powiązane z pracą grafika komputerowego. Wprawione oko dostrzeże, który interfejs projektował „grafik”, a który doświadczony UI designer. Za UI designem stoi wiele ważnych zasad, które stanowią o tym, czy zaprojektowany UI będzie użyteczny, czy okaże się kolejnym cudem na miarę zus.pl.
Co przydaje się UI designerowi?
UI patterns
UI design to przede wszystkim zbiór patternów, czyli powtarzających się wzorców i dobrych praktyk w projektowaniu interfejsów. To nie przypadek, że buttony wszędzie wyglądają podobnie – to właśnie utrwalony wzorzec, który pomaga użytkownikowi odnaleźć się na stronie, której zupełnie nie zna. Dzięki temu, że już widział podobny przycisk na facebooku czy innym popularnym serwisie, będzie mógł z łatwością odnaleźć się na Waszej nowej stronie, na której jest pierwszy raz.
To oczywiście nie oznacza, że każda strona powinna wyglądać tak samo. Mamy mnóstwo swobody w projektowaniu i każdej stronie nadajemy wyjątkowy charakter, zależnie od grupy docelowej i potrzeby użytkownika. Jednak ten przykładowy element klikalny powinien być zawsze rozpoznawalny (no chyba, że nie chcesz, żeby ktoś go kliknął :D). Decydującym aspektem jest tu grupa docelowa i do niej powinien być zaprojektowany UI.
Kiedy projektujemy dla osób starszych, czy z różnych powodów mniej biegłych w obsłudze komputera/internetu, powinniśmy się trzymać bardziej znanych patternów – niebieskie hiperłącza, wyraźne przyciski, sygnalizowanie, że stronę trzeba scrollować (tak, nie dla wszystkich jest to oczywiste). Z kolei, jeśli nasz grupa docelowa na to pozwala, możemy śmiało trochę odpłynąć, ale zawsze z zachowaniem konsekwencji, która pozwoli użytkownikowi szybko wyłapać wzorce zastosowane na stronie.
Typografia
Typografia to kolejny początkowo trudny temat, ale w tym przypadku o wiele łatwiej znaleźć wartościowe publikacje na ten temat. Znajdziecie mnóstwo książek na ten temat, filmy na youtube i dobre artykuły na medium. Wystarczy trochę poszukać. Niektóre materiały są bardziej obszerne i może Was przerazić ilość informacji, niemniej warto się osłuchać i trochę zagłębić w temat. Mówi się, że właśnie po typografii poznaje się dobrego projektanta i coś w tym jest. Nawet bardzo estetyczny UI można szybko zepsuć za pomocą źle dobranego kroju pisma.
Fonty szeryfowe, fonty bezszeryfowe, interlinia, wielkości fontów pod projektowanie interfesjów – te zagadnienia warto opanować. Później polecam poczytać o parowaniu fontów. Tu może się przydać skarbnica jaką jest Google Fonts lub podobne serwisy, które pomagają w dobraniu do siebie dwóch fontów. Przyglądaj się krojom pisma, wyczuwaj ich charakter i testuj na interfejsie. Z biegiem czasu będziesz mieć listę swoich ulubionych 🙂
Kolorystyka
Temat kolorów niby jest dziecinnie prosty, a finalnie bywa trudny do opanowania. Jednak tak, jak już pisałam, w UI nie chodzi o kolorowanie i upiększanie ekranów. Chodzi o użyteczność i czytelność. W większości przypadków użytkownik nie wchodzi na stronę, aby podziwiać piękny kolorowy header, lecz wchodzi z konkretnym problemem, który chce szybko rozwiązać.
Dlatego w kolorach również stosujemy patterny. Jednym z nich są elementy klikalne, które powinny być w tym samym kolorze. To szybko uczy użytkownika „aha, niebieskie, mogę kliknąć”, a element w kolorze czerwonym będzie mnie przed czymś ostrzegał lub sygnalizował błąd.
Co do kolorystyki całej strony, czy aplikacji, to w większości przypadków bazujemy na kolorach brandu klienta i staramy się zaprojektować spójne doświadczenie.
Dostępność (accessibility)
Mówiąc o kolorach, nie można pominąć tematu dostępności, a w tym przypadku mam konkretnie na myśli kontrasty. Często w internecie spotykamy elementy, które ze względu na niski kontrast między elementem a tłem, są po prostu nieczytelne. Często tyczy się to buttonów, które mają jasne tło i biały napis, lub zdjęć z nałożonym napisem.
Należy pamiętać, że dostępność nie dotyczy tylko osób z problemami widzenia. Bo mało kontrastowy element będzie nieczytelny również dla osoby ze zdrowym wzrokiem, kiedy będzie chciała przeczytać coś na ekranie telefonu w pełnym słońcu. Także sami widzicie, że ten problem jest powszechny i warto mieć go na uwadze podczas projektowania.
Dostępność to nie tylko kolory, ale także wielkości fontów i ich grubości. Niektóre instytucje mają osobne wersje strony o wysokim kontraście i z większą typografią.
Jeśli chcecie być świadomymi projektantami i interesuje Was ten temat, poczytajcie w internecie na temat WCAG 2.1 (uwaga, ta strona powala :D). To zbiór norm i dobrych praktyk, które spełniać muszą między innymi strony rządowe.
Zasady kompozycji
Layouty, gridy, hierarchia elementów, white spaces – brzmi enigmatycznie? Rozszyfruj te zagadnienia jak najszybciej, bo bez nich ani rusz. Aby tworzyć przejrzyste, harmonijne i przyjemne dla oka strony, trzeba trzymać się zasad. Na ten temat także znajdziecie mnóstwo materiałów w internecie, a także książek. Zagadnienia te zostały mocno zaciągnięte z druku i składu książek czy magazynów, dlatego nie trudno o dobrą książkę na ten temat. Zajrzyjcie do księgarni d2d.pl
Oczywiście, istnieje wiele stron z bardzo niestandardowym układem, które robią niesamowite wrażenie. Jednak jestem zadania, że należy najpierw nauczyć się zasad, trzymać się gridu, aby później świadomie te zasady łamać.
Mikrointerakcje
Nie tylko kolor może nawigować użytkownika poprzez interfejs. Kolejną pomocą są mikrointerakcje, które kiedy są dobrze zaprojektowane, są swego rodzaju przewodnikiem. Kiedy najeżdżać na przycisk, on delikatnie zmienia kolor, czym sygnalizuje, że można go kliknąć. Pole tekstowe podświetla się, żeby pokazać Ci, że możesz tam coś wpisać.
Jestem grafikiem, czy będzie mi łatwiej?
Nie chcę tu nikogo obrażać, ale jak wiadomo są „graficy” i graficy. Wszystko zależy od Twojego poziomu, bo umiejętności, które posiadasz mogą być zarówno atutem, jak i przeszkodą w drodze do kariery jako UI designer.
W jakimś stopniu na pewno przyda się znajomość programów graficznych. Czasem trzeba przygotować jakąś małą ilustrację, przerobić zdjęcie w headerze czy stworzyć set spójnych ikon do projektu aplikacji. Dodatkowo na pewno łatwiej będzie Ci wskoczyć do nowego programu, którym się będziesz posługiwać jako UI designer – sketch, figma czy adobe xd, w zależności od firmy. Wszystkie te programy mają podobny interfejs i osobie, która płynnie posługuje się na przykład photoshopem, może być nieco łatwiej wskoczyć i zrozumieć, jak działa ten program, jak pracować na warstwach itd.
Jako dobry projektant pewnie znasz się też na typografii. Umiesz dobrze dobrać font do projektu, sparować ze sobą dwa fonty po mistrzowsku. To duża przewaga nad osobami bez żadnego doświadczenia w tym temacie.
Kolejne co Ci się może przydać z graficznego doświadczenia to biegłe posługiwanie się kolorami i znajomość zasad kompozycji. Osoba bez doświadczenia będzie musiała spędzić długie godziny nad projektem, przesuwając elementy o kilka pikseli w różne strony, aż znajdzie idealny balans w layoucie.
Kolejnym plusem może być umiejętność animowania prostych animacji. Jeśli miałeś jakąkolwiek styczność z animacjami, to wiesz jak to działa i łatwiej będzie Ci zaprojektować mikrointerakcję w interfejsie lub prostą animację, która ożywi nieco aplikację.
Jak uczyć się UI designu?
Niezależnie, czy jesteś grafikiem, czy nie, UI designu można się nauczyć. Do tej pory nie trafiłam na żadną dobrą książkę na ten temat. Tym, co polecam, jest po prostu świadoma obserwacja odwiedzanych stron, pobieranie wielu aplikacji, analizowanie ich.
Ćwiczenie: Analizowanie
Zrób sobie screenshoty kilku stron, a następnie zastanów się nad każdym elementem – jakie decyzje projektowe zostały tam podjęte? Czy widzisz pole do usprawnień? Jeśli tak, to zastanów się co można zmienić i jak byś to uzasadnił.
Ćwiczenie: Odtwarzanie
Kolejnym dobrym ćwiczeniem jest odtwarzanie stron w programie do projektowania – sketch, figma, adobe xd, bez znaczenia. Dzięki temu nauczysz się pracować na layoucie, zobaczysz jakie odstępy mają elementy, jak są względem siebie ułożone, jakie mają wymiary.
Ćwiczenie: Przeglądanie i wykorzystywanie design systemów
Przejrzyj najpopularniejsze Design Systemy np. material.io od Google. Poznasz dzięki temu nazwy elementów interfejsów, ich możliwe zachowania i wariacje. Następnie spróbuj wykorzystać te elementy w swoim projekcie.
Bądź na bieżąco
Aby być na bieżąco z trendami w projektowaniu, przeglądaj sobie regularnie różne strony. Może Ci pomóc lista, którą stworzyłam we wpisie Gdzie UI designer szuka inspiracji?
Podsumowanie
No dobra, to jak, muszę być tym grafikiem czy nie? Według mnie nie. Umiejętności te można nadrobić, nie są one kluczowe dla zawodu UI designera. Jestem dobrym tego przykładem. Oczywiście będzie to kosztowało mnóstwo czasu po godzinach, ale da się.
UI designer musi znać się na projektowaniu interfejsów, które z pozoru jest podobne do projektowania graficznego, ale tak naprawdę jest zupełnie różne. To nie jest wizja artystyczna i fotomontaż, a odpowiedź na potrzebę użytkownika i tworzenie użytecznych rozwiązań. Niestety doświadczenie w projektowaniu ulotek czy przydrożnych banerów reklamowych nijak w tym nie pomoże.
Także głowa do góry, nie potrzeba być grafikiem, aby zostać UI designerem. Potrzeba dużo praktyki, poszukiwania wzorców i ćwiczenia.
