Projektowanie UI: Wady i alternatywne rozwiązania
Komponenty
3 godz. 56 min · Figma · UI, UX i Webdesign
Natalia BieniasHead of Design w Mobee DickCzego się nauczysz
- Elementy wizualne, które trzeba wziąć pod uwagę przy projektowaniu
- Omówienie stanów interakcji na przykładzie popularnych design systemów (Material, Carbon, Fluent)
- Przedstawienie często używanych i projektowanych komponentów
- Zasady i komponenty, z których składają się formularze
- Co robić, a czego nie, gdy projektujemy tabele i listy?
- Praktyczne wskazówki do zastosowania w każdym projekcie
- Jak można zaprojektować wyskakujące okna?
Szczegóły w projektowaniu UI
Dla UI designera każdy szczegół ma znaczenie. Patrząc na to, z czego składają się interfejsy, można uprościć i powiedzieć, że są to właśnie kształty geometryczne, teksty lub ewentualnie ikony. Do tego dochodzi aspekt stosowania barw i dodatkowych efektów, które mają zbudować hierarchię wizualną w projekcie. Aby budować skuteczne interfejsy, trzeba dokładnie przyjrzeć się każdemu elementowi – a w tym warsztacie omówimy przyciski i linki tekstowe.
Praktyczne wskazówki
Oczywiście, nie będziemy opowiadać o projektowaniu tylko na bazie teorii. W Kursie poznasz wiele praktycznych wskazówek opartych między innymi na popularnym Material Designie. Poznasz porady, które z łatwością zastosujesz w swoich projektach, a także omówimy stany interakcji. Przekonasz się jakie najważniejsze elementy wizualne trzeba wziąć pod uwagę w projektowaniu.
Różnorodne elementy interfejsów
W Kursie omówimy projektowanie takich elementów interfejsu, jak przyciski, formularze, taby i zakładki, listy i tabele czy wyskakujące okna. Przekonasz się jakich zasad warto przestrzegać, tak, by całość była estetyczna i wygodna dla użytkownika.
Praktyczne wskazówki
Dużą część Kursu poświęciliśmy na omówienie praktycznych wskazówek, dzięki którym będziesz sprawnie projektować wygodne interfejsy. Dowiesz się co robić, a czego unikać, tak, by nie powielać częstych błędów w projektowaniu.
Design Systemy
W trakcie Kursu omówimy również stany interakcji na przykładzie popularnych Design Systemów - czyli Material, Carbon czy Fluent. Dowiesz się czym się różnią i jak wpłyną na proces projektowania elementów interfejsu.
Dla kogo jest ten kurs?
Ten Kurs stworzony został z myślą o początkujących projektantach, którzy chcą stosować najlepsze techniki podczas projektowania interfejsów. Kurs pomoże też świetnie ugruntować zdobytą już wiedzę na temat elementów wizualnych.
W przypadku zakładek mamy analogiczne
stany jak w przypadku tekstowych linków czy przycisków.
Wszystko zależy od tego, w jaki sposób je zwizualizujemy.
Projektujemy więc przede wszystkim dwa główne stany zakładkę aktywną i zakładki
nieaktywne, a następnie do każdego z nich stany pośrednie hover i focus
taby pozwalają przełączać się między jedną treścią a drugą, a to oznacza, że musimy
jasno pokazać użytkownikowi, gdzie właśnie się znajduje.
Dlatego tak ważne będzie odpowiednie
rozróżnienie zakładki aktywnej od tych, które można dopiero kliknąć.
Aktywne zakładki możemy oznaczać dodatkowym kolorem, obrysem, kształtem,
powiększeniem tekstu lub specjalnymi ikonkami.
Wszystko, co sprawi, że na pierwszy rzut
oka będzie rozróżnialne od pozostałych, będzie dobrym rozwiązaniem.
Pamiętajmy jednak, by nie rozróżniać tabów wyłącznie kolorami.
Zwłaszcza, gdy nie różnią się za bardzo.
Osoby nie rozróżniają kolorów, a także te
ze słabszymi ekranami mogą mieć wtedy problem.
Nie oznacza to, że nieaktywne zakładki zupełnie ignorujemy.
Te wciąż muszą zostać czytelne.
Dlatego nie powinniśmy przesadzać z rozjaśnieniu czy wyszarzeniem tekstów,
tak by z kolei nie wyglądały na stan zablokowany.