Kurs podstawy projektowania Ui

89

W tym kursie poznasz podstawy projektowania UI komponentów interfejsu użytkownika. Naucz się tworzyć strony i aplikacje od podstaw, poznaj fundamenty.

Poziom: podstawy
Data wydania: 2022
Czas trwania: 10 godzin

Czego się nauczysz?

W tym kursie poznasz podstawowe elementy, na których projektowane są strony internetowe. Zobaczysz najlepsze praktyki projektowania komponentów dla interfejsów stron oraz aplikacji.

W ciągu 10 godzin, zrozumiesz kluczowe techniki projektowania najważniejszych komponentów, na które składa się wiedza o: kolorach, przyciskach, formularzach, typografii, ostępach, przestrzeni, elementach typu checkboxy, polach, lischt i tabelach.

Wiedza z tego kursu pozostanie aktualna nawet po wielu latach, kiedy wszystkie narzędzia i trendy zmienią się  kilkakrotnie. Tutaj nauczysz się projektowania, a nie tylko narzędzi projektowych.

  • czym jest hierarchia i stany przycisków?
  • czym jest przystępny i dostępny design?
  • jak dobierać fonty do elementów?
  • jak prawidłowo ustawić interlinie?
  • jak dobierać ikony do projektów?
  • jak poprawić czytelność ikon?
  • jak ożywić ikony?
  • jak samodzielne stworzyć paletę kolorów?
  • czym charakteryzuje się udany gradient?
  • jak tworzyć naturalnie wyglądające cienie?
  • jak wyrównywać elementy formularzy?
  • poznasz budowę komponentów: checkboxy, pola, switche
  • jak zaprojektować rozwijane listy?
  • jak projektować dane w formie tabel oraz list?
  • jak ustawić przestrzeń oraz wyrównania?
  • jak stosować siatkę oraz kolumny?
  • jak tworzyć wizualne separatory?
  • poznasz podstawy projektowania mobilnego
  • zobaczysz podstawy pracy w Figma

Dla kogo jest ten kurs?

  • Początkujący zainteresowani projektowaniem UX/UI
  • Dla osób, które chcą rozpocząć karierę designera UI
  • Dla osób bez żadnego doświadczenia w projektowaniu

Kolory

Spory rozdział kursu został poświęcony kolorom. To tutaj dowiesz się jak od podstaw zaprojektować palety kolorów mając wybrany tylko jeden, główny kolor. Utworzysz do niego odcienie oraz paletę szarości. Pokażę Ci również jak ten proces zautomatyzować.

Dowiesz się jak tworzyć nowoczesne, subtelne cienie, ustawiając odpowiednie parametry. Poznasz 3 rodzaje cieni jak: Umbra, Penumbra, Ambient. Zobaczysz również jak tworzyć dobrze wyglądające gradienty.

Przyciski

To elementy, dzięki którym kupujesz lub zapisujesz się do newslettera, czy pobierasz ebooka. Poznasz ich hierarchię oraz podział. Zobaczysz jak projektować stany przycisków oraz ustawić typografię i odpowiednie odległości.

Formularze

Jednym z ważniejszych elementów projektów są formularze. Warto zadbać o prawidłowe zaprojektowanie, ponieważ często to w głównej mierze od nich zależy konwersja. Na początek poznasz anatomię formularza, gdzie zobaczysz czym jest etykieta, kontenery, pola zastępcze, podpowiedzi.

Zobaczysz jak dobierać kolory na potrzeby formularza, jak ułożyć tekst pomocniczy oraz etykiety. Idąc dalej nauczysz się tworzyć stany pól formularza.

Checkboxy, pola, switche

W kursie poznasz zasady projektowania oraz stosowania opcjonalnych komponentów jakimi są checkboxy, pola wyboru, switche czy listy rozwijane. Zobaczysz jak podjąć decyzję, kiedy zastosować pole, a kiedy checkbox.

Zobaczysz jak dobierać kolory na potrzeby formularza, jak ułożyć tekst pomocniczy oraz etykiety. Idąc dalej, nauczysz się tworzyć stany pól formularza.

Tabele

Projektowanie ui, to często też wizualizacja danych. Tutaj warto posiąść wiedzę na temat projektowania tabel. Dzięki temu możesz zaprojektować listę produktów w sklepie czy wyniki filtrowania i sortowania.

Ostępy i przestrzeń

Dobry projekt charakteryzuje się odpowiednio ustawioną przestrzenią. Pokażę Ci, jak pracować z wolną przestrzenią, zarówno całego projektu jak i wewnątrz poszczególnych komponentów, jak karty, przyciski, ikony. Zobaczysz jak ustawić padding i marginesy.

W tym rozdziale przekażę Ci wiedzę na temat wykorzystania wizualnych separatorów oraz rodzajów siatek.

Przyciski
Co to przycisk i gdzie go znajdziemy na stronach
Role i hierarchia przycisków
Wygląd przycisków
Stany, Kształty, style przycisków
Podstawowa typografia
Interlinia i nagłówki
Kolory i szarości
Marginesy

Ikony
Podstawowe informacje o ikonach
Właściwości ikon i ich użycie
Widoczność ikon
Jak łatwo ożywić ikony

Kolory
Tworzenie podstawowej palety kolorów
Paleta – inne barwy
Paleta – skala szarości
Strony do tworzenia palet
Jak stworzyć gradient
Strony do tworzenia gradientów
Cień omówienie
Cień Penumbra
Cień gradientowy
Cień z zdjęcia

Formularze
Anatomia formularzy cz 1
Anatomia formularzy cz 2
Placeholder i jego ułożenie
Inne elementy wokół kontenera
Pola tekstowe i stany
Radio cz 1
Radio cz 2
Checkboxy
Switch
Rozwijane listy
Rozwijane listy anatomia

Tabele i listy
Listy i tabele, omówienie ogólne
Anatomia list
Anatomia tabeli
Filtry oraz sortowanie

Przestrzeń w projekcie
Budowanie odstępów
Dla przycisków i formularzy
Dla kart
Dla ikon
Padding i marginesy
Regulacja optyczna
Rodzaje siatek
Separatory cz 1
Separatory cz 2
Zastosowanie siatki
Szukanie inspiracji

Projektowanie mobilne
Omówienie przycisku
Paski narzędzi, kart
Typografia
Projekty omówienie

Dodaj ocenę