Kilkanaście lat temu nauczyłam się pierwszych kroków salsy. Wraz z upływem lat na parkiecie i obserwacji rozwoju innych tancerzy, nie opuszczał mnie jeden, kluczowy wniosek: bez opanowania podstaw nie da się tańczyć dobrze. Dla niektórych tancerzy drugorzędne było zrozumienie, jaki jest rytm, jak przenosić ciężar ciała i jak współpracować z partnerem. Efekt? Wykręcanie rąk, deptanie po stopach, gubienie tempa i ogólnie jakiś taki taniec, który „nie wygląda”.
Kilka miesięcy temu rozpoczęłam naukę nowego zawodu i nie opuszcza mnie ta sama refleksja. Im lepiej opanuje się podstawy, tym „stabilniejsze” będzie dokładanie do tego kolejnych kompetencji. Co więcej, raczej nie jest tak, że jednorazowe przerobienie materiału starczy na całe życie. Podstawy warto sobie odświeżać. Zatem niezależnie od tego, czy jesteś doświadczonym projektantem, czy dopiero zaczynasz odkrywać ten obszar, zapraszam do przeglądu podstaw z projektowania UI.
Skąd potrzeba na przygotowanie takiego wpisu? Wiedziałam, że po zrobieniu Google UX Design Professional Certificate mam spore braki w obszarze wizualnym. Upewniłam się w tym przekonaniu po zrobieniu swojego pierwszego kursu z projektowania UI – Boring UI Course od Michała Malewicza. A właściwie stało się to w momencie, w którym zaczęłam doczytywać dodatkowe informacje na tematy poruszane przez Malewicza. W mojej głowie pojawiły się wtedy klocki, których brakowało mi podczas pracy nad dotychczasowymi projektami. Myślę, że jestem teraz w stanie być bardziej „poradnym tancerzem” w tym całym „jułaju”.
Poniżej zebrałam kilkanaście wskazówek z kursu, które uzupełniam dodatkową wiedzą. Na tej podstawie możesz samodzielnie ocenić, w jaki sposób chcesz się nauczyć podstaw projektowania UI.
? Spis treści:
- Czy polecam kurs Boring UI?
- Kluczowe zasady UI design
- Wybrane wskazówki z kursu Boring UI
- Jeszcze więcej wiedzy
Czy polecam kurs Boring UI?
Na pewno doceniam go za poukładany materiał i pokazanie w praktyce, jak tworzyć poszczególne komponenty. Ale raczej nie będę jego ambasadorem. Co mnie skłoniło do tej opinii?
- Strona z kursem nie sprzyja uczeniu się. Brakuje mi oznaczenia postępu. Takiej zwykłej parafki i komunikatu, że dana lekcja jest „done”.
- Kurs był nagrywany przed pojawieniem się auto layoutu, więc są prezentowane poprzednie sposoby na uzyskiwanie odpowiednich odstępów. Chodzi na przykład o kwadraty w określonym rozmiarze, które przykłada się pomiędzy elementami, żeby wyrównać je do tego odstępu. W dobie auto layoutu nie wyobrażam sobie pracy w ten sposób ?
- Same lekcje kojarzyły mi się bardziej z tutorialami wyjaśniającymi, jak zrobić dany komponent. Zabrakło mi pogłębienia tematu i miałam poczucie, że takie tutoriale mogę sobie wyszukać na YouTube.
- Dużo jest „sztywnych” porad. Nie przeczę, że wydają się być praktyczne, ale mam ograniczone zaufanie do robienia czegoś w JEDEN sposób, bo JEDEN człowiek tak powiedział.
Niemniej, kurs nie jest drogi. I udało mi się dzięki niemu lepiej zrozumieć hierarchię wizualną i sposób na jej zbudowanie. To była bardzo cenna lekcja, więc myślę, że było warto przerobić cały materiał.
Kluczowe zasady UI design
Ten temat akurat nie był przerabiany w kursie, ale pomyślałam, że warto dorzucić krótkie wyjaśnienie najważniejszych zasad. Będzie to parafraza wybranych zdań przedstawionych w artykule „5 essential UI design principles” od Figmy. Po co ci to wszystko? A no po to, żeby pomóc użytkownikowi w samodzielnym poruszaniu się po produkcie i w bezproblemowym dotarciu do zamierzonego przez niego celu.
- Hierarchia: Wykorzystywana przez projektantów do podkreślenia najważniejszych informacji i wyróżnienia ich spośród reszty. Hierarchia treści UI powinna być ułożona w oparciu o to, na czym najbardziej zależy użytkownikowi.
- Stopniowe ujawnianie: Używane do przeprowadzania użytkownika przez bardziej złożony proces. Ten dzielony jest na mniejsze kroki, a użytkownikowi prezentowane są odpowiednie ilości informacji. Dzięki temu proces może być lepiej zrozumiany i mniej męczący. Nie każ użytkownikowi podejmować w jednym czasie zbyt wielu decyzji.
- Konsekwencja: Tutaj kłania się design system. Dzięki stworzeniu spójnego systemu projektowego użytkownikowi będzie łatwiej poruszać się po interfejsie. Produkt będzie dla niego bardziej przewidywalny.
- Kontrast: Wykorzystywany do tego, żeby wyróżnić najważniejsze informacje. Ale jest ważny również z uwagi na poprawę dostępności produktu.
- Bliskość: Warto umieszczać elementy o podobnej funkcji blisko siebie, a oddalać te, które są przeciwstawne czy niepowiązane kontekstowo.
Wybrane wskazówki z kursu Boring UI
⬇️⬇️⬇️
Siatka, kolory, typografia
1️⃣ Wskazówka: Najlepsza siatka, jaką można użyć, jest ośmio-punktowa (8 point grid).
? Uzupełnienie wiedzy:
Artykuł od UX Planet wyjaśniający, czym jest 8-punktowa siatka. Wśród jej zalet wyróżnione jest to, że większość rozdzielczości ekranów da się podzielić przez 8 oraz że taka siatka ułatwia współpracę pomiędzy projektantem a programistą.
•••
2️⃣ Wskazówka: Jeżeli pracujesz nad stroną internetową, w większości przypadków przyda ci się siatka złożona z 12 kolumn. Przerwy pomiędzy kolumnami – 24 lub 32. Szerokość kolumn to podwojenie tej liczby, np. 64.
? Uzupełnienie wiedzy:
UX Design Institute opisuje różne przykłady siatek dla projektu strony internetowej na komputerze. Nawiązuje do siatki złożonej z 12 kolumn, która może się świetnie sprawdzić przy mniej złożonych projektach. Podkreśla jednocześnie, że bardziej złożone strony, jak np. e-commerce, mogą potrzebować innego rodzaju siatki.
•••
3️⃣ Wskazówka: Na smartfonie nie sprawdza się siatka złożona z kolumn. Lepiej skorzystać z soft grid, z marginesami 32dp.
? Uzupełnienie wiedzy:
Na blogu UX Collective można przeczytać, czym różni się hard grid od soft grid. Podoba mi się założenie nakreślone w tytule artykułu, że te siatki są po prostu narzędziami, a nie zasadami. Poniżej film, który dodatkowo wyjaśni różnice pomiędzy tymi rodzajami siatek ⤵️
•••
4️⃣ Wskazówka: W przypadku kolorów, warto zacząć od najbardziej popularnego, niebieskiego. Ten może być potem zmieniony. Najlepsze miejsce do wyboru odcienia znajduje się w prawym górnym rogu skali kolorystycznej, oddalone nieco od krawędzi.
? Uzupełnienie wiedzy:
Na Interaction Design Foundation znajdziesz obszerny poradnik UI Color Palettes 2023, dzięki któremu zrozumiesz, jak dobrać właściwe kolory i jak stworzyć paletę kolorystyczną dla swojego projektu. Porada od Malewicza jest prosta, ale może być w łatwy sposób źle zinterpretowana lub błędnie wykorzystana w praktyce. Temat zdecydowanie wymaga uzupełnienia informacji.
•••
5️⃣ Wskazówka: Drugi kolor jest jasnym odpowiednikiem głównego koloru. Najlepsze miejsce do wyboru odcienia znajduje się w lewym górnym rogu skali kolorystycznej, oddalone nieco od krawędzi.
? Uzupełnienie wiedzy:
Material Design to z mojego obecnego punktu widzenia must have, jeśli chodzi o bardzo przekrojowe i praktyczne źródło wiedzy. Na tej stronie od Material Design znajdziesz wyjaśnienie tego, czym jest system kolorów i do czego służy drugi kolor w projekcie.
•••
6️⃣ Wskazówka: Do dwóch głównych kolorów warto dodać trzy odcienie szarości. Jasny (np. #E1E1E1), średni (np. #999999), ciemny (np. 2C2C2C).
? Uzupełnienie wiedzy:
Skoro mowa o szarościach, może się przy tej okazji przydać artykuł od Bootcamp wyjaśniający, czym jest grayscale design i w jakich sytuacjach może okazać się przydatny. Ważna lektura pod kątem dostępności produktu.
•••
7️⃣ Wskazówka: Font w rozmiarze regular i semibold jest zwykle wystarczający. Rozmiar light może być trudny w odczytywaniu.
? Uzupełnienie wiedzy:
Powyższe zdecydowanie wymaga rozwinięcia, choć doceniam prostotę tej wskazówki – zwłaszcza, gdy sama mam tendencję do przekombinowania niektórych spraw. Ogromne źródło wskazówek na temat typografii w projekcie znajdziesz w artykule „The Power of Typography in 2023” od Bootcamp.
•••
Przyciski
1️⃣ Wskazówka: Standardowy przycisk ma 48 wysokości, marginesy 32 oraz padding i font 16. Typowe zaokrąglenie krawędzi to 8. Mały przycisk ma 40 wysokości, marginesy 24 oraz padding i font 14.
? Uzupełnienie wiedzy:
Kompletny poradnik na temat tworzenia przycisków znajdziesz w materiałach od Material Design. Na samym końcu znajdziesz też specyfikacje.
•••
2️⃣ Wskazówka: W jednym projekcie można mieć przyciski z zaokrągleniem wierzchołków 8, 16 i z całkowitym zaokrągleniem. Najlepiej zdecydować się na dwa rodzaje.
? Uzupełnienie wiedzy:
Poniżej film od Nicka Babicha, który omawia różnice pomiędzy ostrymi i zaokrąglonymi wierzchołkami w przyciskach ⤵️
•••
3️⃣ Wskazówka: Przydatny sposób nazywania komponentów: można korzystać z wzoru RODZAJ / WARIANT / DODATKOWA CECHA. Dbaj o to, żeby nazewnictwo było zawsze takie samo.
? Uzupełnienie wiedzy:
Na stronie Figmy znajdziesz wyjaśnienie i trochę wskazówek na temat nazywania komponentów. Jedna, prosta zasada sugerowana przez Figmę ➡️ korzystać z konwencji zapisu z wykorzystaniem ukośnika. Flow_Wolf dla Bootcamp wyjaśnia 3 najważniejsze zasady dotyczące nazywania komponentów w Figmie.
•••
4️⃣ Wskazówka: Dla każdego przycisku potrzebne jest pięć wersji: główny, jaśniejszy, nieaktywny, biały z obramowaniem wewnętrznym, biały z obramowaniem i cieniem (opcjonalny, cień w rozmiarze 2 i widocznością 5%), ciemny (w kolorze ciemnej szarości).
? Uzupełnienie wiedzy:
Potwierdzenie i rozwinięcie dla powyższej wskazówki opisane zostało na stronie Setproduct.com oraz na blogu Webflow. Na stronie Material Design dostępne jest wyjaśnienie różnych stanów komponentów, które warto wziąć pod uwagę w projekcie.
•••
5️⃣ Wskazówka: Tworzymy warianty komponentów z tego samego rodzaju przycisku w różnych wariantach (funkcja w Figmie -> Combine as variants).
? Uzupełnienie wiedzy:
Kompletny przewodnik od Figmy na temat tworzenia wariantów.
•••
6️⃣ Wskazówka: Obramowanie ikony powinno być zbliżone do szerokości linii fontu. Wysokość ikony powinna być dopasowana do wysokości napisu. Jeśli mamy samą ikonę na tle, to tło powinno być dwa do trzech razy większe niż rozmiar ikony.
? Uzupełnienie wiedzy:
Na stronie Material 3 Design wyjaśnione jest od A do Z jak poprawnie projektować ikony.
•••
Pola tekstowe
1️⃣ Wskazówka: Jeżeli największy przycisk ma wielkość 48, to pole tekstowe nie może być większe. Dobrą praktyką jest zaokrąglenie rogów o 8 punktów. Szerokość powinna wynieść szerokość ekranu minus dwa marginesy (rozmiar 24 lub 32). Tekst wyrównany do lewej krawędzi. Margines wewnątrz w rozmiarze 16.
? Uzupełnienie wiedzy:
Nick Babich wyjaśnia na łamach UX Planet, jak tworzyć pola tekstowe i jakich błędów należy się wystrzegać. Bardzo praktyczne!
•••
2️⃣ Wskazówka: Etykieta nad polem tekstowym powinna mieć mniejszy rozmiar (14), niż tekst w polu tekstowym (16). Odległość od pola tekstowego 8-14.
? Uzupełnienie wiedzy:
W tekście od Jane Dhell Cagas dla Bootcamp wyjaśnione są wszystkie elementy, z którego składa się UI Style Guide Starter Kit, w tym krótki opis etykiet (których rozmiary, według tego źródła, najczęściej wahają się pomiędzy 11 a 14px).
•••
3️⃣ Wskazówka: Jeśli ktoś wpisuje tekst, przycisk powinien być w trybie „aktywny”. Obramowanie powinno mieć wtedy kolor główny (zamiast szarego) i być dwa razy większe.
? Uzupełnienie wiedzy:
Rozbudowany przewodnik od Material Design na temat projektowania pól tekstowych.
•••
4️⃣ Wskazówka: Pole tekstowe, które jest uzupełnione, powinno mieć kolorowe tło (jasna wersja koloru głównego), tekst powinien być w głównym kolorze i można też dodać parafkę jako wizualne potwierdzenie właściwego wypełnienia pola. Może być też w wersji zielonej. Można również dodać dodatkowe obramowanie zewnętrzne, które będzie miało jaśniejszy odcień i dzięki temu będzie tworzyło efekt poświaty.
? Uzupełnienie wiedzy:
Na stronie Material 3 Design znajdziesz równie rozbudowany przewodnik z aktualnymi informacjami na temat projektowania pól testowych.
•••
5️⃣ Wskazówka: Dobrym rozmiarem dla checkboxu jest 24 i zaokrąglenie rogów o 2. Odległość od tekstu wynosi 12.
? Uzupełnienie wiedzy:
Kompleksowy poradnik znajdziesz ponownie na stronie Material 3 Design.
•••
6️⃣ Wskazówka: Gdy tworzymy kalendarz na urządzeniu mobilnym, dobrze żeby każdy dzień mieścił się w kwadracie 32×32.
? Uzupełnienie wiedzy:
Na blogu Setproduct możesz przeczytać o tym, jak projektować komponenty pozwalające na wybór daty.
•••
7️⃣ Wskazówka: Link pod polem tekstowym (np. pole z hasłem) powinien być bardziej oddalony od pola tekstowego, niż etykieta tekstowa nad tym polem.
? Uzupełnienie wiedzy:
Na łamach Design Bridges możesz rozszerzyć swoją wiedzę na temat poprawnego projektowania hiperłączy.
•••
8️⃣ Wskazówka: Pole do wpisania dłuższego tekstu ma zwykle na urządzeniach mobilnych podwojony rozmiar pola tekstowego.
? Uzupełnienie wiedzy:
W tekście od Nicka Babicha znajdziesz informację, że rozmiar tego pola powinien się zmieniać wraz z tekstem, jaki jest do niego wprowadzany. Nick wyjaśnia też, kiedy i jak używać innych rodzajów pól tekstowych.
•••
Małe obiekty
1️⃣ Wskazówka: Tagi znajdujące się w polu tekstowym powinny być w odległości 4 px od wewnętrznej krawędzi pola tekstowego. Mniejsze tagi powinny mieć zaokrąglenie rogów do 4, a większe do 8.
? Uzupełnienie wiedzy:
Specyfikacje dla tagów dostępne na stronie Material 3 Design.
•••
2️⃣ Wskazówka: Tagi nie powinny mieć czarnego koloru, bo będą za bardzo kontrastującym elementem.
? Uzupełnienie wiedzy:
Przyznaję się, że miałam problem ze znalezieniem źródła odnoszącego się do tej porady, ale w ramach uzupełnienia można doczytać sobie informacje na stronie Material 2 Design.
•••
3️⃣ Wskazówka: Przycisk dla najważniejszej akcji powinien być najbardziej kontrastujący. Dla drugorzędnych akcji przyciski CTA mogą być białe z obramowaniem. Przycisk dla najmniej istotnej akcji może być tekstem z podkreśleniem, sygnalizującym interaktywność. To szczególnie ważne dla osób, które nie widzą kolorów.
? Uzupełnienie wiedzy:
Potwierdzenie powyższej wskazówki znajdziesz między innymi w artykule od Apple Developer Academy.
•••
4️⃣ Wskazówka: Wciśnięty przycisk opcji powinien mieć w środku koło, które jest w odległości 4 od zewnętrznego okręgu.
? Uzupełnienie wiedzy:
Poradnik od Material 2 Design na temat przycisków opcji.
•••
5️⃣ Wskazówka: W przypadku checkboxów warto ułatwić oznaczenie danej opcji poprzez sprawienie, że całe pole z tekstem i checkboxem będzie klikalne.
? Uzupełnienie wiedzy:
Powyższe potwierdzone w zasadzie opisanej na Material 3 Design – czyli, że dana opcja powinna móc być wybrana zarówno poprzez kliknięcie w checkbox, jak również w tekst.
•••
6️⃣ Wskazówka: Podczas przekazywania developerom mniejszych elementów do zaprogramowania, trzeba im zaznaczyć, jakie pole wokół będzie klikalne. Dobrą praktyką jest wyznaczenie klikalnego pola o wielkości 32×32.
? Uzupełnienie wiedzy:
Z artykułu napisanego przez Vitaly’ego Friedmana na łamach Smashing Magazine wynika, że „złoty” rozmiar dla klikalnego obszaru to 42-47px. W rzadszych przypadkach, na przykład kiedy ikona jest w jakimś elemencie, wtedy klikalny obszar może mieć 27px. Vitaly osobiście rekomenduje 30x30px dla mniejszych elementów oraz 48x48px dla ikon na górze i na dole strony.
•••
7️⃣ Wskazówka: Toggle to przycisk, który po kliknięciu wprowadza od razu jakąś zmianę. Umiejscowione są zwykle po prawej stronie tekstowej etykiety. Koło w przycisku toggle po prawej stronie oznacza, że przycisk jest włączony. Jeśli jest wyłączony, powinien być w neutralnej kolorystyce.
? Uzupełnienie wiedzy:
W powyższym mowa właściwie o toggle switch – poradnik na temat projektowania tego elementu dostępny jest na stronie Nielsen Norman Group.
•••
Listy
1️⃣ Wskazówka: Dobrze, żeby listy zajmowały cały ekran na urządzeniu przenośnym.
? Uzupełnienie wiedzy:
Choć nie dokopałam się do źródła, które mówi to samo, to przeglądając przykłady list na urządzeniach przenośnych można znaleźć potwierdzenie dla powyższego stwierdzenia. W artykule od UX Collective można znaleźć kompletny przewodnik na temat projektowania interfejsu dla aplikacji na iOS – i jest tam kilka wskazówek na temat list.
•••
2️⃣ Wskazówka: Checkboxy i przyciski radio w listach powinny być oddalone od krawędzi listy o 24. Pozostałe elementy o 16.
? Uzupełnienie wiedzy:
No dobra, jednak znalazłam poradnik na temat projektowania list, który jest dostępny na stronie Material 3 Design. Podane tam są inne wytyczne, które znajdziesz poniżej ⤵️
•••
Karty
1️⃣ Wskazówka: Dobrą praktyką jest wielkość obrazka w karcie co najmniej tej wielkości, co pozostałe pole karty.
? Uzupełnienie wiedzy:
Na stronie Material 3 Design znajdziesz wskazówki dotyczące projektowania różnych rodzajów kart.
•••
2️⃣ Wskazówka: Jeśli w karcie mamy przycisk, lepiej wykorzystać ten w mniejszym rozmiarze, np. 40 wysokości.
? Uzupełnienie wiedzy:
Na stronie Uxcel dostępna jest przydatna lekcja dotycząca projektowania kart, z ogromem przykładów jak projektować i czego unikać.
•••
3️⃣ Wskazówka: Wyrównanie tekstu do obiektu warto robić do liter, które nie znajdują się poza linią tekstu. Czyli lepiej nie wyrównywać do takich liter, jak „g”, „y” itp.
? Uzupełnienie wiedzy:
Nie znalazłam (jeszcze!) źródła odnoszącego się bezpośrednio do powyższego, ale w poradach od Buninux dla Prototypr znalazłam wskazówkę, żeby stosować wyrównanie wiszące, gdy w danym fragmencie znajduje się element, który nie ma tej samej wagi wizualnej, co tekst. Przykład poniżej ⤵️
•••
Zakładki i nawigacje
1️⃣ Wskazówka: Menu nawigacji to jedno z niewielu miejsc, gdzie można używać fontu w rozmiarze 10.
? Uzupełnienie wiedzy:
Przy tej okazji myślę, że warto poczytać o skalach typografii – przykładowe wyjaśnienie na stronie designcode.io. Dodatkowe uzupełnienie znajdziesz na stronie Material 3 Design.
•••
2️⃣ Wskazówka: Zakładki, które mają dwa elementy, są naprawdę rzadkie. Jeśli mamy do czynienia z taką sytuacją, warto przemyśleć, czy naprawdę potrzebujemy zakładek.
? Uzupełnienie wiedzy:
W tym wypadku skupiłabym się raczej na tym, kiedy zakładek (tabs) się używa. Material 3 Design doradza, żeby używać ich po to, aby grupować powiązane treści, a nie treści sekwencyjne. Więcej na temat tego komponentu przeczytasz na wspomnianej w poprzednim zdaniu stronie ➡️ Material 3 Design – Tabs.
•••
3️⃣ Wskazówka: Jeżeli korzysta się z ikon w zakładkach, które po zaznaczeniu zmieniają tylko kolor ikony, to nie jest to praktyczne pod kątem dostępności (dla osób, które nie widzą kolorów). Lepiej dać w tym wypadku ikonę na kolorowym tle. Lub wykorzystać dodatkowe elementy, które wyróżnią oznaczony element.
? Uzupełnienie wiedzy:
We wpisie od WCAG znajdziesz jeszcze trochę krótkich wskazówek na temat projektowania zakładek z myślą o ich dostępności.
•••
4️⃣ Wskazówka: Menu na iPhone’ach ma zwykle wysokość 54.
? Uzupełnienie wiedzy:
Szerzej o specyfikacji pasków nawigacji na polecanej przeze mnie już trylion razy stronie Material 3 Design. Lubię ją, bo sposób przekazania wiedzy jest dla mnie najbardziej lekkostrawny.
•••
Strony ze szczegółami
1️⃣ Wskazówka: W stronach ze szczegółami etykiety danej informacji są mniej ważne niż sama informacja. Dlatego warto wyróżnić bardziej samą informację.
? Uzupełnienie wiedzy:
Zalando Product Design opisuje w swoim artykule proces projektowania strony ze szczegółami. Więcej pomocnych artykułów do znalezienia w ich cyklu Design Principles Series.
•••
2️⃣ Wskazówka: Im bardziej oddalone od siebie elementy, tym łatwiej wizualnie odróżnić poszczególne grupy. Wewnątrz grupy odległość pomiędzy elementami może wynieść 16. Jak chcemy oddzielić grupę od innej, wtedy odległość powinna wynieść np. 32.
? Uzupełnienie wiedzy:
Aktualny przewodnik na temat wizualnej hierarchii przygotowało Interaction Design Foundation.
•••
3️⃣ Wskazówka: Optymalna szerokość pola tekstowego na większych ekranach wynosi 600-700px.
? Uzupełnienie wiedzy:
Na stronie Freshconsulting.com znajdziesz artykuł wyjaśniający kwestię czytelności tekstu na komputerach (tam również jest wzmianka o tym, aby nie przekraczać linijką tekstu wielkości 700px). Na podstawie informacji od Material 3 Design, żeby zapewnić czytelność projektu, dłuższe linie tekstu nie powinny przekraczać 40-60 znaków w linii.
•••
4️⃣ Wskazówka: Nie trzeba się obawiać pustej przestrzeni w elementach projektowanych na komputery. Nie należy wypełniać „na ścisk” całego elementu. Czyli należy unikać tworzenia bardzo szerokich elementów.
? Uzupełnienie wiedzy:
Zalety wykorzystywania pustej przestrzeni w web designie są szerzej opisane na blogu Manypixels.
•••
Hierarchia
1️⃣ Wskazówka: Im większa odległość, tym bardziej wizualnie oddzielamy elementy od innych grup. Odległości pomiędzy elementami tworzą hierarchię. Należy tworzyć logiczne zgrupowania poszczególnych elementów.
? Uzupełnienie wiedzy:
W artykule od Nielsen Norman Group wyjaśnione jest między innymi, że element, który posiada wyższy priorytet powinien mieć wokół siebie więcej oddechu, dzięki czemu zostanie jeszcze bardziej wyróżniony.
•••
Prezentuj jak pro!
1️⃣ Wskazówka: Kolory oraz typografię można zaprezentować w formie kart z obrazkiem na górze, poniżej informacją i pod spodem z dodatkowym info (np. kod HEX).
? Uzupełnienie wiedzy:
W tekście od Mockplus znajdziesz wskazówki dotyczące tworzenia przewodnika po stylach (style guide) oraz dziesięć najlepszych przykładów, jak można go zaprojektować.
•••
2️⃣ Wskazówka: Podczas prezentowania komponentów warto uwzględnić dodatkowo specyfikacje danego elementu, np. odległość tekstu od krawędzi (side spacing) i wielkość tekstu.
? Uzupełnienie wiedzy:
Na stronie Designsystems.com dostępny jest krótki poradnik na temat spacingu w projekcie.
•••
Paski hierarchii
1️⃣ Wskazówka: Paski hierarchii to dodatkowy boost dla projektu w portfolio. Możesz je wykorzystać do zaprezentowania, dlaczego podejmujesz konkretne decyzje projektowe.
? Uzupełnienie wiedzy:
Cała lekcja z kursu jest streszczona w artykule na Hype4.academy. Dostępne jest tam wyjaśnienie, czym są paski hierarchii.
•••
2️⃣ Wskazówka: Dobrze skorzystać z tej techniki przed rozpoczęciem pracy nad dopracowywaniem stylistycznych szczegółów, takich jak kolorystyka, zdjęcia itp.
? Uzupełnienie wiedzy:
We wspomnianym powyżej tekście od Hype4.academy znajdziesz również porady, jak prezentować poszczególne style w swoim projekcie.
Jeszcze więcej wiedzy
Jeśli masz jeszcze apetyt na więcej informacji, na koniec podrzucam dodatkowe linki na temat podstawowych zasad w projektowaniu UI ⤵️
➡️ Lektura, po której ciężko będzie tobie powiedzieć, że nie wiesz – czyli Design Principles stworzone przez Bena Bringella. Na stronie kolekcja 195 przykładów projektów, w tym 1448 zasad projektowych omówionych przez 167 osób. Jest się z czego uczyć ?
➡️ Na blogu UXPin znajdziesz krótki przewodnik po projektowaniu UI – dedykowany developerom, ale ty zapewne też znajdziesz tam coś dla siebie.
➡️ Na stronie toolkit.design zebrane jest sporo wiedzy na temat projektowania. Szczególnie zachęcam zajrzeć do zakładki z materiałami na temat design systemu.
➡️ Darmowy kurs UI design dla początkujących:
➡️ Darmowy kurs Figma dla początkujących:
I to by było na tyle ?
Choć możesz jeszcze przerobić sobie podstawy z projektowania UX. W tej sytuacji polecam tobie moje obszerne notatki z kursu Foundations of User Experience (UX) Design.
Życzę tobie i sobie powodzenia w rozwoju i ogarnianiu podstaw! ?