Zamień ten tekst na URL Webhooka

Blog

UI Design – 5 krótkich porad od Design Practice

Maria
Gabrowska
schedule
5 Minut
schedule
24 stycznia

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 takkoniecznie przeczytaj ten artykuł!

UX Design a UI Design – jakie są różnice?

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).

Interaction Design – co tworzy UX Designer?

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.

User Interface – czym zajmuje się UI Designer?

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.

Co potrafi dobry Designer(ka)?

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.

Top 5 zasad, o których musi pamiętać każdy, aspirujący UI Designer(ka)

Przygotowaliśmy 5 najważniejszych zasad User Interface Designera(ki), które wzniosą Twój design system na wyższy poziom.

  1. Wybierz odpowiednie oprogramowanie
  2. Poznaj języki kodowania
  3. Naucz się pracy w grupie
  4. Myśl za pomocą animacji i interakcji
  5. Projektuj pomimo tego, że nikt Ci za to nie płaci

1. Wybierz odpowiednie oprogramowanie

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, a UI Design

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.

Światowa czołówka – Figma i AdobeXD

Obecnie projektanci UI na całym świecie dzielą się na dwie grupyzwolennikó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.

2. Poznaj języki kodowania

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.

Jakie języki musi opanować UI Designer(ka)?

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.

3. Naucz się pracy w grupie

Dobry(-a) projektant(-ka) potrafi pracować w grupie. Aby się tego nauczyć, musisz zwalczyć w sobie dwie rzeczy:

  • strach przed krytyką,
  • niechęć do prezentowania rzeczy niedokończonych.

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.

Kompromis w projektowaniu

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.

4. Myśl za pomocą animacji i interakcji

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.

Jaka jest rola animacji?

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.

5. Projektuj pomimo, że nikt Ci za to nie płaci

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.

Zbuduj portfolio na światowym poziomie

Jeśli nikt nie zleca Ci ciekawych projektówtrudno. 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.