Brutalistisch webdesign: voorbeelden die u kunt bewerken
Voorbeelden van brutalistisch webdesign
Brutalistisch webdesign: live voorbeelden en CSS om te kopiëren | We.Inc
Brutalistisch en neo-brutalistisch webdesign uitgelegd met vier originele live voorbeelden, een knoppenbuilder voor harde schaduwen en dikke randen, en de CSS om te kopiëren.
Brutalistisch webdesign brengt een pagina terug tot de kale structuur: standaard- of systeemlettertypen, zichtbare randen, gewone links en weinig decoratie. Neo-brutalisme, het vriendelijkere familielid, houdt de dikke zwarte contouren maar voegt vlakke felle kleuren en harde verschoven schaduwen toe. Beide zijn vooral CSS-keuzes, dus de voorbeelden hieronder zijn bewerkbaar en elke regel kan gekopieerd worden.
Brutalistisch versus neo-brutalistisch
Kenmerk
Brutalistisch
Neo-brutalistisch
Typografie
Systeem of monospace, vaak standaardgroottes
Vette grotesk of systeem-sans, groot
Kleur
Zwart, wit, misschien één blauwe linkkleur
Vlakke verzadigde vullingen: geel, roze, mint
Randen
Lijnen van 1px, tabellen, zichtbare vakken
Effen zwarte contouren van 2 tot 4px
Schaduwen
Geen
Hard verschoven, zonder blur
Gevoel
Rauw, als een document
Speels, als een sticker
Galerijen met brutalistische sites tonen screenshots die u niet kunt inspecteren. Elk voorbeeld hier is een origineel ontwerp in gewone HTML en CSS, live weergegeven, ter plekke bewerkbaar en vrij te kopiëren, plus een builder voor de neo-brutalistische knop waar de meeste mensen naar op zoek zijn.
Stel de knoppenbuilder af: randdikte, verschuiving van de schaduw, vulkleur en hoekradius.
Beweeg over het voorbeeld om het indrukeffect te voelen en kopieer dan de CSS.
Scroll naar de vier voorbeelden en bewerk hun code om het resultaat te zien veranderen.
Houd de opmerkingen over toegankelijkheid in gedachten voordat u een uitgesproken palet live zet.
Harde schaduwen hebben geen blurwaarde nodig: zet de derde lengte van box-shadow op 0 voor een scherp verschoven blok.
Zwarte tekst op verzadigd geel, mint of roze leest meestal goed; witte tekst op die vullingen meestal niet. Controleer elk paar.
Rauw betekent niet slordig. Houd een consistente spacingstap aan, ook als randen en typografie ruw ogen.
Laat focusranden zichtbaar en dik, wat ook goed bij de stijl past.
Gebruik de stijl voor portfolio's, zines, evenementen en tools voor ontwerpers; test hem bij uw publiek voordat u hem op de site van een bank of kliniek gebruikt.
Veelgestelde vragen
Wat is brutalistisch webdesign?
Het is een stijl die het skelet van een webpagina laat zien in plaats van het op te poetsen: standaardlettertypen, harde randen, zichtbare grids of tabellen, onderstreepte links en weinig afbeeldingen. Het doel is eerlijkheid en snelheid in plaats van schoonheid.
Wat is neo-brutalisme?
Neo-brutalisme leent de zware contouren en botte layout van het brutalisme en combineert die met vlakke, felle kleuren, stevige typografie en effen verschoven schaduwen. Het komt veel voor op landingspagina's van producten en in app-interfaces die er gedurfd en informeel uit willen zien.
Hoe maak ik een neo-brutalistische schaduw in CSS?
Gebruik box-shadow met een x- en y-verschuiving, nul blur en een effen kleur, bijvoorbeeld box-shadow: 6px 6px 0 #000. Combineer dat met border: 3px solid #000. Verschuif het element bij hover richting de schaduw en verklein de verschuiving voor een ingedrukt gevoel.
Is brutalistisch design slecht voor de toegankelijkheid?
Niet van nature. Gewone HTML, echte links en sterke contouren zijn vaak heel toegankelijk. Problemen komen van kleurparen met weinig contrast, piepkleine standaardtekst en het weghalen van focusstijlen, dus controleer die zoals u bij elke site zou doen.
Waar de stijl werkt
Brutalisme past bij sites die persoonlijkheid of een doe-het-zelfhouding willen uitstralen: persoonlijke pagina's, studio's, publicaties, muziek- en evenementensites. Door de eenvoud zijn pagina's ook licht, omdat er weinig beeld en weinig webfonts te downloaden zijn.
Het past minder goed waar bezoekers geruststelling nodig hebben, zoals in de zorg, financiën of afrekenprocessen. Daar kan een rustigere layout met één brutalistisch accent, zoals een call-to-action met rand, een beter compromis zijn.
Het eigen maken zonder te kopiëren
De meeste brutalistische pagina's delen een vocabulaire in plaats van een template, dus u hoeft zelden van iemand te lenen. Kies één structureel motief, zoals een zichtbaar grid, genummerde secties of een ticker, en herhaal dat consequent.
Kies een palet van zwart, wit en hooguit twee vlakke accenten. Laat witruimte, randen en lettergrootte daarna de rest van het werk doen in plaats van verlopen, foto's of zachte schaduwen.
Vier originele voorbeelden
Homepage als rauw document
Systeem-monospace, standaard blauwe links en een eenvoudige tabel. De hele look bestaat uit een handvol regels.
Neo-brutalistische prijskaart
Dikke contour, vlakke vulling en een harde schaduw op zowel de kaart als de knop.
Galerij met zichtbaar grid
De randen dienen ook als rasterlijnen, dus de structuur is de decoratie.
Brutalistisch nieuwsbriefformulier
Een gelabeld veld en een knop met zware contouren en een dikke focusrand die bij de stijl past.
Builder voor neo-brutalistische knoppen
Pas de rand, de verschuiving van de schaduw, de vulling en de radius aan. De beginwaarden geven deze CSS: