❌ #1 Brak podstaw dobrego UX
Błąd numer 1️⃣ to nieodrobione zadanie domowe z user experience. My, jako projektanci, lubimy bardzo szybko wskakiwać w design. Myślimy wizualnie, chcemy robić ładne obrazki i rzeczy, które są piękne.
I co wtedy robimy? Odpalamy szybko Figmę, tworzymy sobie frame i zaczynamy projektować wizualnie. 🪄
Biała kartka, biały frame, czy biały cardboard, potrafi przyprawić o dreszcz na plecach. 💀 Puste, białe, nieograniczone – i możesz zrobić wszystko, co tylko chcesz. I taka wszechmoc potrafi naprawdę sparaliżować.
Jak w ogóle zacząć, gdy masz przed sobą przerażający, biały frame? Odpowiedź jest prosta: odrób zadanie domowe z UXa. Boooo, tak naprawdę trudno projektować UI bez podstawowej znajomości UX.
Zatem – jak ugryźć ten kawałek chleba? 🥖
1️⃣ Po pierwsze, stwórz persony użytkowników. Dowiedz się, dla kogo projektujesz. Kiedy już wiesz dla kogo, staraj się zrozumieć, w jakich sytuacjach życiowych znajdują się te osoby. Jak możesz wykazać się empatią, aby rozwiązać ich problemy? Jakie są ich problemy tak właściwie? Czego oni potrzebują?
2️⃣ Dochodzisz w tym momencie do celów konwersji, czyli do tego, jakie zadanie ma spełniać strona internetowa. Jeśli wiesz, jaki jest cel konwersji, możesz wylistować wszystkie podstrony i elementy, które są Ci potrzebne do jej osiągnięcia. Zatem przechodzisz do kroku numer trzy.
3️⃣ Tworzysz sitemap, czyli wykres, który pokazuje listę podstron i ich linkowanie między sobą.
4️⃣ W kolejnym kroku tworzysz user flow – czyli wyobrażasz sobie, po jakich podstronach będą krążyć te persony, aby dojść do celu. Robisz to dla person z różnymi celami konwersji.
5️⃣ Potem bierzesz się za content. Przeprowadzasz jego UX-ową analizę, dzielisz, segregujesz, robisz architekturę informacji, porządkujesz, a na końcu – konsultujesz z odpowiednimi osobami, np. zajmującymi się UX writingiem.
6️⃣ Następnie tworzysz makiety low-fidelity (czyli takie szkice – makiety na ogólnym poziomie dokładności) poszczególnych podstron, aby uporządkować całą, dotychczasową pracę.
7️⃣ Końcowa faza procesu to dokładniejsze opracowanie interfejsu, czyli tzw. makiety high-fidelity. Tak naprawdę dopiero wtedy wchodzi UI design. To też dobry moment na skupienie się na zawartości wizualnej dla poszczególnych sekcji.
Dzięki przejściu przez ten proces masz większe szanse na stworzenie designu, który będzie prawidłowo dopasowany do założeń projektu.
Stworzysz projekt, który jak najlepiej pasuje do narracji i kontekstu, co jest bardziej efektywne i utrzymuje uwagę użytkownika dłużej.
❌ Jeśli nie odrobisz tego zadania, pozostaje Ci kierować się intuicją. Gdyby klient zapytał, dlaczego tworzysz projekt akurat w taki sposób, pozostaje Ci odpowiedzieć, że „bo tak mi się podoba”. A to nie jest dobrą odpowiedzią.
🔨 #2 Zmarnowany potencjał Auto Layoutu
Błąd #2 to niewykorzystanie możliwości, które daje Auto Layout. Ten aspekt dotyczy braku świadomości, jak strony są składane i jak współgrają ze sobą ich elementy.
Dzięki Auto Layoutowi możesz tworzyć szablony i zasady, a nie tylko przesuwać elementy po ekranie, szukając najlepszego wyglądu.
👉 Zamiast ręcznie dostosowywać pozycję elementów, ustalasz reguły, które automatycznie rozłożą je zgodnie z wytycznymi.
To pozwala na budowanie bardziej elastycznych projektów, które łatwo możesz dostosowywać do różnych rozdzielczości ekranów i rozmiarów contentu.
W praktyce to oznacza, że nie musisz tworzyć osobnych wersji projektu na desktop, tablet, czy mobile. Tworzysz jeden, responsywny design. Ustalasz reguły raz, a dobrze, i masz gotowy, skalowalny komponent.
Przestajesz myśleć o przesuwaniu elementów „na oko” i zaczynasz pracować z zasadami, które później możesz powielać. To fundamentalna zmiana w sposobie pracy.
💡 Te reguły gwarantują spójność wizualną w całym projekcie i ułatwiają zarządzanie na jego późniejszych etapach.
💻 Auto Layout pozwala też lepiej porozumieć się z developerami.
Możliwość przekazania komponentów opartych na zasadach, które można łatwo przetłumaczyć na kod (np. „ta karta ma 20 pikseli paddingu, elementy są wyrównane do lewej, a przyciski mają równy odstęp między sobą") to ogromne ułatwienie w procesie kodowania.
Efektem tego jest szybsze wdrożenie, mniejsza liczba poprawek i wyższa jakość końcowego produktu.
Auto Layout wymusza świadome podejście do projektowania. Zamiast skupiać się na tym, jak elementy wyglądają w jednym, konkretnym momencie, zaczynamy myśleć o ich zachowaniu w różnych sytuacjach.
Takie podejście jest bardziej strategiczne i stawia na funkcjonalność, elastyczność i spójność projektu.
📚 #3 I na koniec – zastój edukacyjny
Myśląc o swojej karierze, warto widzieć ją jako maraton, a nie sprint. Nie jest tak, że po roku na rynku wszystkie drzwi będą otwarte. Trzeba powoli wypracowywać swoją pozycję i myśleć o swojej karierze, zastanawiając się, gdzie widzisz siebie za 10 lat.
Digital jest dziedziną, w której cały czas pojawiają się nowe rzeczy. Figma raz w roku wypuszcza większe aktualizacje do swojego produktu.
Nawet jeśli są to drobne poprawki, to narzędzie cały czas ewoluuje i musisz się go ciągle uczyć. Nowe technologie, nowe sposoby myślenia, a teraz AI, które całkowicie zmienia system – musimy być świadomi, że nie możemy poprzestać na tym, co już wiemy.
Edukacja powinna być procesem ciągłym przez całe życie, a nie tylko fazą, którą przechodzimy raz na jakiś czas.
Ucz się nie tylko z książek czy kursów, ale też poznawaj kulturę wizualną, podstawy typografii, kompozycji, teorii koloru. Te fundamenty są niezbędne, aby stworzyć dobry projekt. Bez nich trudno jest projektować.
Oprócz nauki przeszłości warto też badać przyszłość: poznawanie narzędzi i technologii związanych z web designem, HTML, CSS, UX i UI. Nawet jeśli nie chcesz wiązać się z UXem, warto znać jego podstawy.
Ucz się motion designu, ponieważ animacja jest istotnym językiem w nowoczesnym designie. Interakcja to kolejny, kluczowy aspekt – projektowanie ich jest równie ważne, jak układ strony, czy typografia.
