0:00 / 0:00

Projektowanie UI: Okienka modalne

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:00I klasycznie.

0:01Na koniec czas na kilka zadań, które pomogą wdrożyć nowo poznaną wiedzę.

0:05Przygotowałam dla Was trzy dość rozbudowane zadania.

0:12W pierwszym zadaniu chodzi o

0:13zaprojektowanie pytań, o zgodę na udostępnianie lokalizacji,

0:18dostęp do kontaktów oraz włączenie notyfikacji push w telefonie.

0:22Załóżmy, że aplikacją, dla której projektuje się te zgody jest usługa

0:26pozwalająca na rezerwację noclegów w hotelach i prywatnych kwaterach.

0:30Jeżeli nie chcecie projektować całych

0:32widoków, do czego Was zachęcam, możecie zaczerpnąć z istniejących aplikacji.

0:38Główne widoki np.

0:39listingi booking.com

0:40albo Airbnb i spróbować dopasować do ich stylu własne propozycje.

0:46W drugim zadaniu wyobraźcie sobie system,

0:49który składa się z nawigacji, głównej filtrów i ogromnej tabeli wypełnionej

0:53danymi o zamówieniach w sklepie internetowym.

0:56Na potrzeby zadania załóżmy, że w sklepie

0:58powinny pojawiać się notyfikacje, które będą informować o wpłynięciu nowego

1:03zamówienia oraz anulowaniu zamówienia przez klienta.

1:07Zaprojektuj również notyfikację, która

1:10poinformuje o braku połączenia z Internetem.

1:13Co ma w tym kontekście znaczenie?

1:15Bo oznacza, że użytkownik nie będzie dostawał dwóch pozostałych notyfikacji,

1:19kiedy nie będzie miał dostępu do Internetu.

1:22To zadanie to świetna okazja do przećwiczenia sobie jeszcze raz tabelek,

1:25które omawialiśmy w poprzedniej części warsztatu.

1:29I ostatnie zadanie to projekt On boardingu w aplikacji do rysowania.

1:34Wyobraźcie sobie prosty produkt, który

1:36składa się z obszaru roboczego i kilku narzędzi, a także opcji

1:40zapisywania, udostępniania i pobierania tworzonych projektów.

1:45Narzędzia nie są jednak standardowe i wymagają pokierowania użytkownika.

1:49Spróbujcie zaprojektować proces zapoznania się z narzędziami.

1:53Gdy użytkownik wchodzi do takiej aplikacji pierwszy raz.

1:58Choć zadania mogą nieco przytłaczać objętością.

2:00Gorąco zachęcam do tego, żeby jednak spróbować je zrobić na co dzień.

2:04W pracy projektowej stajemy właśnie przed takimi wyzwaniami, gdzie projektujemy całe

2:09systemy i przewidujemy konsekwencje swoich propozycji projektowania pojedynczych

2:15projektowanie pojedynczych komponentów

2:16jest ciekawe i z pewnością sprawia dużo zabawy, ale pamiętajcie, że te komponenty

2:22zawsze występują w jakimś kontekście i kiedy dobrze nauczymy się panować nad

2:26całością, będziemy projektować dobre interfejsy.

2:31Powodzenia!