0:00 / 0:00

Projektowanie UI: Pola tekstowe

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:00No i na koniec praca domowa, bo można oglądać wiele kursów i warsztatów, można

0:04przeglądać strony internetowe i czytać książki.

0:06Ale dopóki sami nie zaczniecie projektować i układać sobie tych wszystkich elementów

0:10interfejsu w programie graficznym, to nie nauczycie się robić tego dobrze.

0:15Dlatego mam dla Was propozycję trzech

0:17zadań domowych, które możecie zrobić w ramach tego warsztatu.

0:20Pierwsze zadanie to prosta matryca przycisków w różnych stylach.

0:25Pierwsze zadanie to stworzenie sobie matrycy

0:27przycisków i próba zrobienia ich w różnych stylach graficznych.

0:31Możemy zacząć od stylu flat i skeumorficznego flat, czyli takiego płaskiego,

0:35pozbawionego gradient'ów i cieni, a skeumorficzne to z kolei styl, który nawiązuje bardzo do

0:41rzeczywistych przedmiotów, czyli będzie miał np.

0:44gradient'y i cienie.

0:45Spróbujcie zrobić przyciski zarejestruj

0:48się i przejdź dalej właśnie w tych stylach.

0:51Wykorzystajcie ikony, wykorzystajcie typografię, tła, obrysy, dowolne style,

0:56które chcecie wypróbować i spróbujcie wpisać się właśnie w te dwa style.

1:01Jeżeli macie już dwa przyciski w tych

1:04różnych stylach, to możecie dla nich zaprojektować różne stany.

1:10To dla przykładu mogą być po najechaniu kursorem, zaznaczenie klawiaturą czy

1:14właśnie przycisk zablokowany, ale im więcej uda Wam się ich zrobić, tym lepiej.

1:19Kiedy będziecie mieć już różne stany

1:20przycisków, zastanówcie się o zestawie przycisków.

1:23Wyobraźcie sobie, że macie interfejs, w której do wykonania są trzy zadania.

1:28Jakaś główna akcja, np.

1:30zapisanie zmian, drugorzędna cofnięcie się i opcja np.

1:35wgrania plików.

1:36Spróbujcie z tych trzech różnych przycisków stworzyć cały zestaw, który

1:41będzie składał się z różnych stylów graficznych oraz różnych stanów, więc

1:45matryca przycisków prawdopodobnie mocno Wam się rozrośnie.

1:51Mam nadzieję, że warsztat był dla Was ciekawy.

1:54Ja nie bez powodu nie poruszałam kwestii związanych z narzędziami do projektowania

1:58UI, ponieważ wszystkie te rzeczy w jakimś stopniu możecie zrobić albo wykorzystując

2:03funkcję w danym narzędziu, albo robiąc to naokoło np.

2:08tak jak wspomniałam już układając kilka

2:10warstw cieni albo kilka warstw kolorów, żeby osiągnąć określone efekty.

2:15Jeżeli jesteście natomiast zainteresowani kursami, które dotyczą narzędzi do

2:21projektowania UI, zerknijcie na inne kursy na

2:23Eduweb.pl

2:25całkiem niedawno powstał kurs Grzegorza o Adobe XD.

2:28Być może wyda Wam się to interesujące.

2:31Ja się z Wami żegnam i mam nadzieję, że

2:33spotkamy się w kolejnym warsztacie z interfejsami graficznymi.

2:36Tym razem o formularzach.