To 10‑godzinny kurs o fundamentach projektowania UI. Krok po kroku przejdziesz przez kluczowe komponenty: od kolorów, cieni i gradientów, przez przyciski i formularze, po checkboxy, pola, switche i listy rozwijane. Nauczysz się też projektować tabele oraz świadomie pracować z przestrzenią, paddingami, marginesami, siatkami i separatorami. To solidna baza do świadomego projektowania interfejsów.

Kolory, cienie i gradienty

Spory rozdział kursu został poświęcony kolorom. Zaczynasz od wybranego koloru głównego i uczysz się budować wokół niego spójną paletę. Krok po kroku tworzysz odcienie oraz osobną paletę szarości, a następnie poznajesz sposób, by ten proces zautomatyzować. Dalej skupiasz się na świetle i głębi: ustawiasz parametry nowoczesnych, subtelnych cieni i poznajesz trzy ich rodzaje – Umbra, Penumbra i Ambient. Na koniec łączysz barwy i światło, projektując estetyczne gradienty, które porządkują hierarchię wizualną i wzmacniają charakter interfejsu.

Przyciski: hierarchia i stany

Przyciski to elementy, dzięki którym kupujesz, zapisujesz się do newslettera lub pobierasz ebooka. W kursie poznasz ich hierarchię i podział, tak aby od razu było jasne, które działanie jest najważniejsze. Zobaczysz, jak projektować pełen zestaw stanów przycisków oraz jak dobrać typografię i właściwe odległości. Dowiesz się też, jak ułożyć przyciski w kartach czy listach, by pozostawały czytelne i spójne z resztą interfejsu. Zwrócisz uwagę na proporcje, kontrast i czytelność etykiet, tak aby przycisk był jednoznaczny w każdym stanie.

Formularze od podstaw

Formularze to jeden z najważniejszych elementów interfejsu. Na początku poznasz ich anatomię: czym jest etykieta, jak działają kontenery, pola zastępcze i podpowiedzi. Dowiesz się, jak dobrać kolory na potrzeby formularza, gdzie umieścić tekst pomocniczy i etykiety oraz jak je opisywać. Idąc dalej, nauczysz się projektować stany pól, zachowując spójność i przejrzystość. Zobaczysz, jak ustawić rytm i odległości, by cały formularz był czytelny i łatwy do wypełnienia. Dzięki temu każdy element zagra ze sobą, a wypełnianie stanie się naturalne.

Checkboxy, pola i listy

Poznasz zasady projektowania opcjonalnych komponentów, takich jak checkboxy, pola wyboru, switche i listy rozwijane. Dowiesz się, kiedy zastosować pole, a kiedy checkbox. Omówimy dobieranie kolorów na potrzeby formularza oraz to, jak układać tekst pomocniczy i etykiety w pobliżu kontroli. Nauczysz się również planować stany tych elementów, aby zachować spójność i czytelność w całym interfejsie. Przyjrzysz się także listom rozwijanym i switchom, aby świadomie dobierać ich warianty i sposób prezentacji w różnych miejscach formularza.

Tabele, odstępy i siatki

Projektowanie UI to także wizualizacja danych. W kursie nauczysz się tworzyć czytelne tabele, przydatne m.in. do list produktów w sklepie oraz prezentacji wyników filtrowania i sortowania. Druga część poświęcona jest przestrzeni. Dowiesz się, jak pracować z wolną przestrzenią w całym projekcie i wewnątrz komponentów, takich jak karty, przyciski czy ikony. Zobaczysz, jak ustawiać padding i marginesy, wykorzystywać wizualne separatory oraz różne rodzaje siatek. Zrozumiesz, jak rytm i powtarzalność odstępów porządkują treści i ułatwiają skanowanie układu.