Brutalizm w web designie: przykłady na żywo i CSS do skopiowania | We.Inc
Brutalizm i neobrutalizm w projektowaniu stron wyjaśnione na czterech oryginalnych przykładach na żywo, z kreatorem przycisków z twardym cieniem i grubą ramką oraz CSS do skopiowania.
Brutalizm w web designie sprowadza stronę do surowej struktury: domyślne lub systemowe fonty, widoczne obramowania, zwykłe linki i mało dekoracji. Neobrutalizm, jego przyjaźniejszy krewny, zachowuje grube czarne kontury, ale dodaje płaskie jaskrawe kolory i twarde przesunięte cienie. Oba to głównie decyzje w CSS, więc przykłady poniżej można edytować, a każdą regułę skopiować.
Brutalizm a neobrutalizm
Cecha
Brutalizm
Neobrutalizm
Typografia
Systemowa lub monospace, często w domyślnych rozmiarach
Pogrubiony grotesk lub systemowy bezszeryfowy, duży
Kolor
Czerń, biel, ewentualnie jeden niebieski dla linków
Płaskie nasycone wypełnienia: żółty, róż, miętowy
Obramowania
Linie 1px, tabele, widoczne pudełka
Pełne czarne kontury od 2 do 4px
Cienie
Brak
Twarde przesunięcie, bez rozmycia
Odczucie
Surowe, jak dokument
Zabawne, jak naklejka
Galerie stron brutalistycznych pokazują zrzuty ekranu, których nie da się zbadać. Każdy przykład tutaj to oryginalny projekt w czystym HTML i CSS, renderowany na żywo, edytowalny na miejscu i darmowy do skopiowania, a do tego kreator neobrutalistycznego przycisku, którego szuka większość osób.
Najedź na podgląd, aby poczuć efekt wciśnięcia, a potem skopiuj CSS.
Przewiń do czterech przykładów i edytuj ich kod, aby zobaczyć zmianę wyniku.
Zanim opublikujesz krzykliwą paletę, pamiętaj o uwagach dotyczących dostępności.
Twarde cienie nie potrzebują rozmycia: ustaw trzecią długość box-shadow na 0, aby uzyskać ostry przesunięty blok.
Czarny tekst na nasyconym żółtym, miętowym lub różowym zwykle dobrze się czyta; biały tekst na takich wypełnieniach zwykle nie. Sprawdź każdą parę.
Surowe nie znaczy niedbałe. Utrzymuj stały krok odstępów, nawet gdy obramowania i typografia wyglądają szorstko.
Zostaw obrysy fokusu widoczne i grube, co zresztą pasuje do stylu.
Używaj tego wyglądu w portfolio, zinach, wydarzeniach i narzędziach dla projektantów; zanim użyjesz go na stronie banku lub przychodni, przetestuj go z odbiorcami.
Najczęściej zadawane pytania
Czym jest brutalizm w web designie?
To styl, który pokazuje szkielet strony zamiast go polerować: domyślne fonty, twarde krawędzie, widoczne siatki lub tabele, podkreślone linki i niewiele obrazów. Celem jest szczerość i szybkość, a nie uroda.
Czym jest neobrutalizm?
Neobrutalizm zapożycza ciężkie kontury i toporny układ brutalizmu i łączy je z płaskimi, jaskrawymi kolorami, masywną typografią i pełnymi przesuniętymi cieniami. Jest częsty na landing page produktów i w interfejsach aplikacji, które chcą wyglądać odważnie i nieformalnie.
Jak zrobić neobrutalistyczny cień w CSS?
Użyj box-shadow z przesunięciem x i y, zerowym rozmyciem i pełnym kolorem, na przykład box-shadow: 6px 6px 0 #000. Połącz to z border: 3px solid #000. Po najechaniu przesuń element w stronę cienia i zmniejsz przesunięcie, aby uzyskać wrażenie wciśnięcia.
Czy brutalizm szkodzi dostępności?
Nie z natury. Czysty HTML, prawdziwe linki i mocne kontury są często bardzo dostępne. Problemy biorą się z par kolorów o niskim kontraście, malutkiego domyślnego tekstu i usuwania stylów fokusu, więc sprawdź to jak na każdej innej stronie.
Gdzie ten styl się sprawdza
Brutalizm pasuje do stron, które chcą pokazać osobowość lub podejście zrób to sam: stron osobistych, studiów, publikacji, stron muzycznych i wydarzeń. Jego prostota sprawia też, że strony są lekkie, bo jest mało grafiki i niewiele fontów webowych do pobrania.
Trudniej go dopasować tam, gdzie odwiedzający potrzebują poczucia bezpieczeństwa, na przykład w ochronie zdrowia, finansach czy procesie zakupu. Tam lepszym kompromisem może być spokojniejszy układ z jednym brutalistycznym akcentem, na przykład wezwaniem do działania w obramowaniu.
Jak zrobić go po swojemu bez kopiowania
Większość stron brutalistycznych dzieli słownictwo, a nie szablon, więc rzadko trzeba od kogoś cokolwiek pożyczać. Wybierz jeden motyw strukturalny, na przykład widoczną siatkę, numerowane sekcje lub pasek przewijanych informacji, i powtarzaj go konsekwentnie.
Wybierz paletę z czerni, bieli i najwyżej dwóch płaskich akcentów. Resztę pracy niech wykonają odstępy, obramowania i rozmiar tekstu zamiast gradientów, zdjęć czy miękkich cieni.
Cztery oryginalne przykłady
Surowa strona główna jak dokument
Systemowy monospace, domyślne niebieskie linki i zwykła tabela. Cały wygląd to kilka reguł.
Neobrutalistyczna karta cennika
Gruby kontur, płaskie wypełnienie i twardy cień zarówno na karcie, jak i na przycisku.
Galeria z widoczną siatką
Obramowania służą jednocześnie za linie siatki, więc struktura jest dekoracją.
Brutalistyczny formularz newslettera
Opisane pole i przycisk z ciężkimi konturami oraz grubą ramką fokusu pasującą do stylu.
Kreator neobrutalistycznych przycisków
Dostosuj obramowanie, przesunięcie cienia, wypełnienie i promień. Wartości startowe dają taki CSS: