0:00 / 0:00

Projektowanie UI: Czym są listy i tabele?

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 dobra, ale my możemy sobie tutaj pogadać, ale tak naprawdę chodzi o to,

0:03żeby to teraz wszystko przećwiczyć w praktyce.

0:07Tym razem przygotowałam dla Was trzy zadania i pierwsze z nich to formularz

0:10z tabami. Spróbuj zaprojektować formularz

0:13składający się z kilku kroków na szerokość ekranu 1440 pikseli, w którym użytkownicy

0:20będą mogli przechodzić między krokami wykorzystując podpięte do krawędzi

0:24przeglądarki taby lub scrollując przez całą stronę.

0:28Przykładowe kroki do zaprojektowania to

0:31dane kontaktowe, dostawa i płatność i możliwość załączenia plików.

0:38Drugie zadanie polega na zaprojektowaniu mobilnej wersji tabów.

0:42Spróbuj zaprojektować ekran strony mobilnej, w którym użytkownicy mogą za

0:47pomocą tabów przeglądać treści dotyczące różnych typów mediów.

0:51Niech będą to na przykład teksty, obrazki, filmy i pliki do pobrania.

0:56Elementy, które powinny się tam pojawić.

0:58Poza tabami treścią, która pod tymi

1:00tabami według typów się pojawi, to logo i jakaś nawigacja główna i wyszukiwarka.

1:06Trzecie zadanie to zwijane zakładki.

1:09Opowiadałam o nich trochę w jako alternatywie dla klasycznych tabów.

1:14Wejdź na podaną niżej stronę, wybierz produkt z kategorii ubrań i zaprojektuj

1:18mobilną stronę nie aplikacją tego produktu z wykorzystaniem zwijanych zakładek.

1:24Pamiętaj o dobrych i złych praktykach, które omówiliśmy w tym kursie.

1:31I to na tyle w tej części kursu, który dotyczył tabów, czyli zakładek.

1:36Warto pamiętać, że samo wysłuchiwanie i oglądanie prezentacji niewiele da.

1:40W projektowaniu interfejsów w projektowaniu UX

1:43chodzi przede wszystkim o to, żeby jak najwięcej projektować.

1:46Żeby próbować tych wszystkich rzeczy, Żeby natrafiać na te problemy, z którymi jako

1:51projektanci spotykamy się w codziennej pracy.

1:56Jeżeli nie macie pomysłów na przykładowe

1:58projekty, które możecie zrealizować, możecie iść tropem ostatniej pracy domowej

2:03i po prostu wziąć na warsztat jakieś sklepy internetowe.

2:07Tak naprawdę im mniej popularne i mniejsze

2:10sklepy spróbujecie opracować, tym będzie Wam trochę łatwiej, bo jest duża szansa,

2:14że te duże sklepy internetowe już jakieś dobre wzorce mają wprowadzone.

2:19Ale jak wspominałam, to nie zawsze jest regułą.

2:23Nie róbcie też tylko artystycznych, bardzo ładnych, designerskich projektów.

2:28W codziennej pracy spotykamy się często z

2:30interfejsami, które tak naprawdę są całą masą tabelek, formularzy i polegają na

2:36tym, żeby bardzo, bardzo dużo treści zmieścić w małej przestrzeni.

2:40To jest ogromne wyzwanie dla projektantów,

2:42bo z jednej strony musimy przekazać całą masę treści, a z drugiej strony zadbać o

2:47to, żeby to jednak było estetyczne i przede wszystkim czytelne.

2:52Dlatego jeżeli budujecie właśnie

2:53portfolio, miłym dodatkiem, poza takimi bardzo artystycznymi, designerskim

2:58projektami będą właśnie takie, które będą rozwiązywały trudne projektowe problemy.

3:04Czyli masa informacji i mało miejsca. Powodzenia!