Chcesz projektować interfejsy cyfrowe? Ciekawi Cię, jakie są złote zasady UI Designera z kilkunastoletnim stażem? Znużyło Cię projektowanie graficzne i szukasz wskazówek, dzięki którym będziesz wiedzieć, co musisz mieć na uwadze planując swój dalszy rozwój? Jeśli tak – koniecznie przeczytaj ten artykuł!
UX i UI Design to dziedziny, które łączą w sobie dbałość o pozytywne doświadczenie użytkownika (user experience) i estetykę w projektowaniu produktów cyfrowych. Taki produkt to może być nie tylko aplikacja mobilna, strona internetowa, ale i to, co widzisz na desce rozdzielczej samochodu.
Liczy się nie sam wygląd strony czy aplikacji, ale też ich funkcjonalność. UX Designer dba o potrzeby użytkowników, a UI Designer dopieszcza produkt od wizualnej strony w oparciu o aktualne standardy (opisane w źródłach jak np. Material Design).
UX Design to projektowanie doświadczeń użytkownika. UX (user experience) sprawia, że użytkownicy potrafią poruszać się po produkcie. Powinno to być proste i intuicyjne. Z myślą o potencjalnych użytkownikach przeprowadza się badania grupy docelowej i jej potrzeby. Ten etap projektowania stanowi ważny element komunikacji pomiędzy potencjalnym użytkownikiem, a UX Designerem.
UI Designer zajmuje się projektowaniem aplikacji mobilnych i innych elementów interfejsu (User Interface Designer). Odpowiada za interfejs graficzny – widoczną strukturę strony, wygląd menu, hierarchię treści, szatę graficzną, a nawet animacje.
Projektowanie UI wymaga połączenia posiadanej wiedzy z wielu obszarów. UI ma świadomość typografii, wysokie poczucie estetyki, tworzy design w oparciu o najnowsze normy (wspomniany wcześniej Material Design). Flow takiej pracy określany jest jako design system.
Dobry projektant to wszechstronny projektant! Powinien mieć świadomość podstawowych zasad użyteczności interfejsu, niebanalne poczucie estetyki, dbać o szczegóły, być na bieżąco z trendami w świecie UI, a także znać niektóre języki programowania. UX i UI często jest łączone w jedno stanowisko w firmach.
Przygotowaliśmy 5 najważniejszych zasad User Interface Designera(ki), które wzniosą Twój design system na wyższy poziom.
Pierwszą rzeczą dla UI Designera jest opanowanie odpowiedniego narzędzia do pracy. Rynek oferuje wiele programów, dzięki którym zaprojektujesz interfejsy – możesz skorzystać z Photoshopa, Adobe Xd, czy Figmy.
UI Design powinien przebiegać szybko i sprawnie, a końcowy produkt musi być responsywny. Do projektowania stron potrzebne jest sprawne narzędzie, które będzie z lekkością obsługiwać formaty wektorowe (ikony, kształty) i rastrowe (zdjęcia, ilustracje).
Photoshop to uniwersalny produkt, odpowiedni do tworzenia różnych animacji, czy obróbki zdjęć. Cechuje go niezwykła wszechstronność, ale i niska specjalizacja pod UI Design. Pomimo tego, że jest wyposażony w artboardy (graficzne interfejsy użytkownika), nie jest to jego dużą zaletą. Gdy plik zawiera ich więcej niż 10, jego waga staje się bardzo duża. Obecnie służy głównie do pracy na grafice rastrowej, czyli np. obróbki i edycji fotografii.
Co istotne w UI – nie jest przystosowany do wyświetlania wielu ekranów na raz, a projektowanie webowe opiera się właśnie na ciągu obrazów występujących po sobie. To ważne dla zachowania przejrzystości, a także płynności w przejściach pomiędzy różnymi ekranami.
W 2010 roku pojawił się Sketch, który był odpowiedzią na potrzeby UX i UI Designerów. Jako jeden z pierwszych, został zoptymalizowany pod kątem projektowania interfejsów użytkownika. Jest intuicyjny w użyciu.
Sketch był wspierany przez Invision. Wspólnie umożliwiali sprawne prototypowanie. Sketch się rozwijał, wzbogacał interfejs o nowe funkcje, natomiast Invision – niestety – pozostało w tyle. Ostatecznie przestało być użyteczne.
Obecnie projektanci UI na całym świecie dzielą się na dwie grupy – zwolenników Figmy lub Adobe XD. Adobe XD jest produktem wielkiej firmy, a zwykle odpowiedzi takich spółek na potrzeby rynku są nie do końca trafne. Jego sporą wadą, zwłaszcza dla początkującego projektanta, jest konieczność zapłaty za korzystanie.
Figma zdaje się być rozwiązaniem idealnym w pracy Designera(ki) – prosta w użyciu, umożliwia projektowanie na bardzo dużej ilości ekranów, obsługuje grafikę wektorową, a ładowanie dokumentu jest łatwe. Posiada możliwość prototypowania poprzez ustawienie ciągów ekranu i animacji. Umożliwia pracę przez przeglądarkę i w appce desktopowej. Wersja darmowa pozwala na udział w maksymalnie trzech projektach w jednym teamie.
Korzysta się z niej nie tylko do tworzenia interfejsów webowych, ale i projektowania grafik 2D, czy nawet tworzenia prezentacji. Jedyna aplikacja, która daje know-how i możliwość prowadzenia współpracy z zagranicznymi projektami i firmami.
Do bardziej zaawansowanego prototypowania poleca się inne programy – Principle (tylko na Maca), Framer (wymaga podstaw kodowania, crossplatformowy), a także Protopie (dość złożony w obsłudze). Doskonały setup dla UI Designera(ki) tworzą dwa programy - Figma + Principle.
Każda strona zbudowana jest z kodu. UI Designer(ka) tworzy szkice interfejsów dla programistów(ek). Cały proces wymaga nienagannej komunikacji na linii developerzy(ki)-designerzy(ki).
To właśnie dlatego znajomość języków kodowania jest bardzo ważna – dzięki nim będziesz w stanie zrozumieć jak to, co projektujesz, jest przekładane na finalny produkt. Komunikacja z developerem stanie się znacznie łatwiejsza.
Programowane dzieli się na dwie, główne kategorie – frontendowe i backendowe. Backend to całe zaplecze techniczne strony, czyli to, co pozostaje niewidoczne dla odbiorcy. Jeśli chcesz zostać UI Designerem(-ką), skup się na frontendzie – to jest to, co użytkownik widzi. Składają się na niego głównie języki – HTML, CSS i JavaScript.
HTML i CSS definiują na podstawowej warstwie danych jak Internet wygląda i w jaki sposób działa. Charakteryzują się niskim progiem wejścia i to właśnie dzięki znajomości ich podstaw projektanci czerpią najwięcej korzyści. Jeżeli chcesz szybko przyswoić wiedzę z programowania frontendowego, możesz skorzystać z kursów Agi lub tutoriala stworzonego przez The Awwwesomes.
Dobry(-a) projektant(-ka) potrafi pracować w grupie. Aby się tego nauczyć, musisz zwalczyć w sobie dwie rzeczy:
Zespoły w firmach składają się z różnych teamów – designu, UX, marketingu i developmentu – dlatego dobrze jest, aby umieć ze sobą współpracować. Każda osoba w procesie projektowym ma inne oczekiwania i motywacje. Efekt finalny jest jest uzależniony od jakości kooperacji w zespole.
Podczas projektowania produktu mają miejsce częste spotkania oraz prezentacje postępów w pracy. To momenty, w których należy mieć swój perfekcjonizm oraz ego utrzymane na wodzy. Pamiętaj, że praca nad produktem cyfrowym to połączenie potrzeb i motywacji wielu działów firmy.
Miej na uwadze, że estetyka nie jest priorytetem dla każdej osoby w zespole. Bądź gotowy na krytykę i kompromisy. Nie bój się zgłaszać propozycji ulepszenia projektu i procesów – dzięki wychodzeniu z inicjatywą możesz mieć szansę na awans!
Zastanawiasz się, jakie aplikacje doskonale nadają się do współpracy online? Obecnie jest ich naprawdę sporo, natomiast nasi faworyci to Slack, Discord, Figma, FigJam i Notion.
Strona internetowa to szereg interakcji, które może wykonać użytkownik. Wszystko, co digitalowe, wiąże się z interakcją, a interakcja – z animacją. Ich dobre zastosowanie sprawi, że czas spędzony na stronie będzie przyjemny i interesujący. Zaprojektowanie strony bez myślenia o motion design, czyli ruchu na naszej stronie, jest niezwykle trudne.
Animacje mogą służyć za źródło podpowiedzi dla użytkownika, w jaki sposób może skorzystać z konkretnego modułu, a także wspierają jego seamless experience. Sprawiają, że obcowanie z produktem jest płynne i przyjemne.
Animacje mogą zarówno wzbogacić stronę estetyczną produktu, jak i przedstawić hierarchię panującą na stronie. Powinny być nie tylko być estetyczne, ale i wpływać na semantykę (zrozumienie) projektu. Co więcej – to część systemu identyfikacji, a zatem na animacjach może skupiać się cały język wizualny produktu.
Tak naprawdę rozwój jest uzależniony od tego, jak fajne rzeczy robisz. Niestety – nie zawsze jest to to, co zlecają Ci do zaprojektowania klienci. Jeśli zastanawiasz się, w jaki sposób przejść z designu dla małych biznesów na design dla światowych marek – zadbaj o portfolio. Musisz dołożyć starań, aby znalazły się w nim wizualizacje, które będą na najwyższym poziomie.
Jeśli nikt nie zleca Ci ciekawych projektów – trudno. Zleć je sobie sam(-a). Pracuj dla największych, globalnych marek. Korzystaj z prawa cytatu i eksploruj – w twoim portfolio może znaleźć się realizacja wizualna (koncept) dla firm o charakterze międzynarodowym. Tylko w ten sposób jesteś w stanie wejść na poziom wyżej w podejmowanych zleceniach.
