0:00 / 0:00

Projektowanie UI: Czym są wyskakujące okienka?

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:01No ale czym byłby nasz warsztat bez pracy

0:04domowej, w trakcie której możecie przećwiczyć zdobyte informacje?

0:09Przygotowałam dla Was dwa zadania.

0:11W pierwszym zadaniu będziemy projektować

0:13wyniki wyszukiwania w sklepie internetowym.

0:16Spróbujcie swoich sił z listą wyników wyszukiwania w sklepie.

0:20Załóżmy, że wyszukaliśmy właśnie hasło telefon wykorzystując wyszukiwarkę w sklepie.

0:27Spróbujcie zaprezentować wyniki wyszukiwania dla tego hasła,

0:31zastanawiając się, jakie informacje będą kluczowe dla użytkownika.

0:35Warto zadbać również o dodatkowe opcje

0:38sortowania i filtrowania wyszukiwanych wyników.

0:41Taki projekt przygotujcie dla szerokości

0:43ekranów 1440 pikseli i 375 pikseli, czyli wersję desktopową i mobilną.

0:51W przypadku wersji mobilnej pamiętajcie,

0:53że to strona internetowa, a nie aplikacja mobilna.

0:57W drugim zadaniu do zaprojektowania będzie lista lekarzy

1:01na stronie internetowej, która pozwala rezerwować wizyty w różnych gabinetach.

1:06Chcecie sprawdzić listę dostępnych ortopedów w Krakowie?

1:10Zastanówcie się jak zaprojektować

1:12komponent, który pozwoli na sprawne przeglądanie i porównywanie dostępnych

1:17opcji, co pozwoli użytkownikowi podjąć decyzję.

1:21Może to cena albo ocena klientów?

1:24A może dostępne terminy?

1:26Wybierzcie kluczowe informacje i

1:27zaprezentujcie je na ekranie o szerokości 1920 pikseli, czyli Full HD.

1:34Zabierając się do jednego i drugiego

1:35ćwiczenia, nie pomijajcie etapu poszukiwania informacji i zbierania inspiracji.

1:41Etap researchu, nawet jeżeli nie opiera

1:44się na badaniach z użytkownikami, jest bardzo wartościowy.

1:48Pozwoli Wam sprawdzić, czy są jakieś

1:51dodatkowe elementy, które warto wziąć pod uwagę, a których np.

1:55nie omawialiśmy w tym kursie.

1:57Zerknijcie na konkurencyjne rozwiązania, może znajdziecie jakieś benchmarki.

2:01To wszystko pomoże Wam lepiej projektować i warto przenosić te przyzwyczajenia,

2:07tego poszukiwania informacji i zbierania inspiracji do każdego projektu.

2:14Im więcej czasu poświęcicie

2:16tak naprawdę na ten początkowy etap, czyli poszukiwania inspiracji i zbierania

2:21informacji, tym więcej czasu zaoszczędzicie sobie później.

2:26Zostawiam Was teraz z tabelkami i listami i usłyszymy się w kolejnej części kursu.

2:32Powodzenia.