0:00 / 0:00

Projektowanie UI: Ikony

Komponenty

3 godz. 56 min · Figma · UI, UX i Webdesign

Natalia BieniasHead of Design w Mobee Dick

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

0:00W przycisku oczywiście możemy mieć też tekst.

0:02Tekst powinien w jasny sposób komunikować,

0:04co stanie się po interakcji z tym elementem.

0:07Czy uda się coś zapisać, usunąć?

0:09A może wysłać dane jakiegoś formularza?

0:12Czyli po pierwsze treść.

0:14Obok treści ważne jest również styl.

0:18Czyli ten tekst może być duże, może być grube, może być małe albo cienki.

0:23Krój pisma może być z szeryfów lub bez szeryfem.

0:27Litery mogą być pisane z wielkiej litery lub normalnie.

0:33W projektowaniu interfejsów raczej staramy

0:35się wybierać kroje, które są przede wszystkim czytelne w małym rozmiarze.

0:40To sprawi, że jeżeli będziemy wykorzystywać te teksty w takich małych

0:44elementach jak pola formularzy czy właśnie małe przyciski,

0:48użytkownik wciąż będzie mógł przeczytać, co tam jest napisane.

0:51Jeżeli popatrzycie zwłaszcza na aplikacje mobilne czy strony mobilne na Waszych

0:55telefonach, to zobaczycie, że w większości tych elementów interaktywnych

1:00wybrane kroje pisma to właśnie kroje bez szeryfowe.

1:03Oczywiście w projektowaniu interfejsów jak

1:05najbardziej możemy stosować kroje szeryfowe.

1:07Na przykładzie możecie zobaczyć m.in. Lore

1:10i Robotics Lab, ale nie każdy krój szeryfowy.

1:13Nawet jeżeli jest web fontem i został przygotowany do wykorzystywania go w

1:17sieci, niekoniecznie będzie nadawał się do używania w małych elementach interfejsu.

1:23Zobaczcie to na przykładzie dosyć popularnego kroju playfair display

1:30który świetnie będzie nadawał się do zastosowania np.

1:33w nagłówkach na stronie.

1:35Ale kiedy ten sam krój pisma wykorzystamy w mniejszym rozmiarze?

1:40Np. niech to będzie 18 punktów,

1:43to zobaczycie jak wiele traci ze swojego uroku w takim wydaniu.

1:49Przede wszystkim jeżeli mamy bardzo kontrastowy krój pisma,

1:52czyli kontrast między tą najcieńszą a najgrubszą linią w literze jest duże,

1:59to w momencie kiedy bardzo zmniejszamy taki krój pisma, te grube części będą

2:04bardzo widoczne, a te najcieńsze elementy mogą wręcz trochę się zgubić.

2:10Efekt jest taki, że nie widzimy fragmentów

2:12liter, nie widzimy części szeryfów i mamy takie wrażenie, że on jest gdzieś tam

2:16trochę zblurowany, trochę jakiś taki pogubiony.

2:20No i to ma oczywiście oprócz wpływu na

2:22warstwę wizualną, również wpływ na czytelność.

2:25A to najważniejsza cecha typografii w interfejsach graficznych.