Platforma dla programistów i designerów
Interfejsy, które nie skaczą.
Projekty szyte na miarę zaczynają się od dyscypliny. Każdy stan widoku, od ładowania przez treść po błąd, ma swoje miejsce, zanim się pojawi. Tutaj uczysz się budować interfejsy idealnie responsywne i stabilne co do piksela, razem z zespołem i na wspólnym języku.
Czym jest liquid design
Szyte na miarę
Szablon dopasowuje treść do siebie. Projekt szyty na miarę dopasowuje się do treści i do każdego ekranu, na którym ta treść wyląduje. Responsywność nie jest listą breakpointów, tylko właściwością każdej decyzji projektowej.
Trzy stany, nie jeden
Interfejs ma stan ładowania, treści i błędu. Dwa z nich projektuje się najrzadziej, a użytkownik widzi je najczęściej. Dlatego skeleton jest wierną kopią layoutu treści, a komunikat błędu ma zarezerwowane miejsce od pierwszego renderu.
Płynność zamiast progów
Typografia, siatki i odstępy skalują się w sposób ciągły, jak ciecz wypełniająca naczynie. Breakpoint jest ostatecznością, a nie pierwszym narzędziem. Stąd name: liquid design.
Zasady projektowania
Wszystkie zasady →Nic nie skacze
Layout jest umową. Treść, która dociera później, wchodzi w miejsce, które na nią czekało.
Skeleton wierny treści
Szkielet to nie ozdoba. To ta sama karta, jeszcze bez danych, wierna co do piksela.
Miejsce na błąd
Komunikat błędu nie jest gościem. Ma zarezerwowane krzesło przy stole od samego początku.
Płynna typografia
Tekst nie przeskakuje między breakpointami. Płynie razem z ekranem, od zegarka po billboard.
Cel na miarę palca
Opuszek palca ma około 44 piksele. Wszystko, co klikalne, jest co najmniej takie i trzyma odstęp od sąsiadów.
Fokus zawsze widoczny
Interfejs daje się przejść klawiaturą, a aktualne miejsce widać na pierwszy rzut oka.
Wzorce do pracy
Cała biblioteka →Cztery stany widoku
Każdy widok danych ma cztery stany: ładowanie, treść, pustkę i błąd. Wszystkie dzielą jeden layout.
Formularz bez niespodzianek
Walidacja przy opuszczeniu pola, przycisk o stałej szerokości podczas wysyłki i potwierdzenie w zarezerwowanym slocie.
Siatka, która płynie
Kolumny wynikają z dostępnej przestrzeni, a karty przebudowują się według szerokości kontenera, nie ekranu.
Kafelki w równym rytmie
Nagłówki, opisy i stopki sąsiednich kart leżą na wspólnych liniach, bo wiersze kafelków pochodzą z jednej siatki.
Natywny dialog zamiast diva
Element dialog daje pułapkę fokusu, Escape i warstwę za darmo, a scrollbar-gutter pilnuje, żeby otwarcie nie przesunęło strony.
Powiadomienia w swojej warstwie
Toasty żyją w zarezerwowanej warstwie nad treścią, więc mogą przychodzić i znikać, nie ruszając niczego pod spodem.
Design system
Jedno źródło prawdy
Tokeny kolorów, płynna skala typograficzna i komponenty, z których zbudowana jest cała platforma. Te same nazwy w Figmie, w kodzie i w rozmowie.
Design do kodu
Figma pod kod 1:1
Jak projektować plik, żeby Claude odtworzył widok co do piksela: zmienne jak tokeny, auto layout jak flexbox i warianty jak propsy.
Technologie
Decyzje bez mody
Kiedy Tailwind, a kiedy vanilla-extract. Kiedy Next, a kiedy Astro. Wybory zaczynają się od kontekstu klienta i mobile first.
Współpraca
Checklista review
Wspólny język przy odbiorze designu i kodu. Odhaczaj punkty w trakcie przeglądu i kopiuj gotowy raport Markdown do pull requesta.