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.

Zacznij od zasady 01 Otwórz checklistę review

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ą, nie pierwszym narzędziem. Stąd metafora cieczy w nazwie.

Nazwa i trzy nieporozumienia

Metafora cieczy jest w tej branży stara i zajęta z dwóch stron. Warto więc powiedzieć wprost, czym liquid design nie jest.

Liquid layout, 1996: Układ w procentach zamiast tabeli o stałej szerokości. Liquid design bierze z tego płynność, ale dokłada drugi filar: stabilność layoutu, o której tamten termin nie mówił nic.
Liquid czy fluid: W literaturze to synonimy. Rozdział jest konwencją tej platformy: liquid nazywa metodę, fluid zostaje w kodzie, w tokenach text-fluid i p-fluid.
Liquid Glass, 2025: Język wizualny Apple: materiał, refrakcja, głębia. Liquid design nie opisuje wyglądu interfejsu, tylko jego zachowanie, gdy zmienia się ekran, sieć i dane.

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.

Przykład

Landing, w którym gra wszystkie dziewięć zasad

Fikcyjne studio Atlas, prawdziwy Liquid Design: sekcja, która naprawdę się ładuje, błąd do zepsucia, formularz bez skoków i znaczniki prowadzące do lekcji.

Zobacz przykład

Design system