UX Design a UI Design – słowem wstępu 🤌
UX i UI Design łączą w sobie dbałość o pozytywne doświadczenie użytkownika (user experience) i estetykę w projektowaniu produktów cyfrowych.
Produktem cyfrowym może być nie tylko aplikacja mobilna, strona internetowa, ale i to, co widzisz na desce rozdzielczej samochodu.
Liczy się nie sam wygląd, ale też funkcjonalność. UX Designer dba o potrzeby użytkowników.
UI Designer zajmuje się projektowaniem aplikacji mobilnych i innych elementów interfejsu. Odpowiada za element 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. Flow takiej pracy określa się 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.
Teraz, gdy już to wiesz, możesz wskakiwać do protipów!
Czujesz niedosyt? Sprawdź artykuł: ️ ☯ Synergia w designie - UX i UI
1. Wybierz odpowiednie oprogramowanie 🤖
Pierwszą rzeczą dla UI Designera jest opanowanie odpowiedniego narzędzia do pracy.
UI Design powinien przebiegać szybko i sprawnie, a końcowy produkt musi być responsywny.
Do projektowania stron potrzebne jest równie sprawne narzędzie, które będzie z lekkością obsługiwać formaty wektorowe (ikony, kształty) i rastrowe (zdjęcia, ilustracje).
Photoshop, Sketch i 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 więcej niż 10 artboardów, 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. Te dwa progrmy pozwalały na 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 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 – 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 tworzą dwa programy - Figma + Principle.
2. Poznaj języki kodowania 👅
Każda strona zbudowana jest z kodu. UI Designer tworzy jedynie jej szkic. Cały proces wymaga nienagannej komunikacji na linii developer-designer.
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, przekłada się na finalny produkt.
Komunikacja z developerem stanie się znacznie łatwiejsza.
Jakie języki musi opanować UI Designer? 👌
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, skup się na frontendzie – to jest to, co użytkownik widzi. Miej w głowie dwa główne języki – HTML i CSS.
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 designer potrafi pracować w grupie.
Aby się tego nauczyć, musisz zwalczyć w sobie dwie rzeczy:
- strach przed krytyką,
- niechęć do prezentowania rzeczy niedokończonych.
Firmy 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ą. Zaprojektowanie strony bez myślenia o motion designie, czyli ruchu na naszej stronie, jest niezwykle trudne.
Jaka jest rola animacji? 🗝️
Animacje to ź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.
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. 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ę Twój 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.
Portfolio na światowym poziomie 🏆
Przeczytaj artykuł: ✋ 5 skutecznych porad do portfolio
Jeśli nikt nie zleca Ci ciekawych projektów – trudno. Zleć je sobie.
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.
Chcesz poznać jeszcze więcej protipów? Sprawdź: 🔝 Top umiejętności na rynku pracy w UI
