Web design brutalista: esempi live e CSS da copiare | We.Inc
Web design brutalista e neo brutalista spiegato con quattro esempi live originali, un builder di pulsanti per ombre nette e bordi spessi, e il CSS da copiare.
Il web design brutalista riduce una pagina alla sua struttura grezza: font predefiniti o di sistema, bordi visibili, link semplici e poche decorazioni. Il neo brutalismo, il suo parente più amichevole, mantiene i contorni neri spessi ma aggiunge colori piatti e accesi e ombre nette sfalsate. Entrambi sono soprattutto scelte di CSS, quindi gli esempi qui sotto sono modificabili e ogni regola si può copiare.
Brutalista e neo brutalista a confronto
Caratteristica
Brutalista
Neo brutalista
Tipografia
Di sistema o monospace, spesso con dimensioni predefinite
Grotesk in grassetto o sans di sistema, grande
Colore
Nero, bianco, magari un blu per i link
Riempimenti piatti e saturi: giallo, rosa, menta
Bordi
Filetti da 1px, tabelle, riquadri visibili
Contorni neri pieni da 2 a 4px
Ombre
Nessuna
Nette e sfalsate, senza sfocatura
Sensazione
Grezza, simile a un documento
Giocosa, simile a un adesivo
Le gallerie di siti brutalisti mostrano screenshot che non puoi ispezionare. Ogni esempio qui è un design originale scritto in semplice HTML e CSS, visualizzato live, modificabile sul posto e gratuito da copiare, più un builder per il pulsante neo brutalista che la maggior parte delle persone viene a cercare.
Regola il builder del pulsante: spessore del bordo, sfalsamento dell'ombra, colore di riempimento e raggio degli angoli.
Passa il mouse sull'anteprima per sentire l'effetto pressione, poi copia il CSS.
Scorri fino ai quattro esempi e modifica il loro codice per vedere cambiare il risultato.
Tieni a mente le note sull'accessibilità prima di pubblicare una palette vistosa.
Le ombre nette non hanno bisogno di sfocatura: imposta a 0 la terza lunghezza di box-shadow per un blocco sfalsato preciso.
Il testo nero su giallo, menta o rosa saturi di solito si legge bene; il testo bianco su quei riempimenti di solito no. Controlla ogni coppia.
Grezzo non significa trascurato. Mantieni un passo di spaziatura coerente anche quando bordi e tipografia sembrano ruvidi.
Lascia i contorni di focus visibili e spessi, il che si adatta anche allo stile.
Usa questo look per portfolio, fanzine, eventi e strumenti rivolti ai designer; testalo con il tuo pubblico prima di usarlo sul sito di una banca o di una clinica.
Domande frequenti
Che cos'è il web design brutalista?
È uno stile che mostra lo scheletro di una pagina web invece di rifinirlo: font predefiniti, bordi netti, griglie o tabelle visibili, link sottolineati e poche immagini. L'obiettivo è l'onestà e la velocità più che la bellezza.
Che cos'è il neo brutalismo?
Il neo brutalismo prende i contorni pesanti e il layout diretto del brutalismo e li abbina a colori piatti e accesi, tipografia corposa e ombre piene sfalsate. È comune nelle landing page di prodotto e nelle interfacce di app che vogliono apparire audaci e informali.
Come creo un'ombra neo brutalista in CSS?
Usa box-shadow con uno sfalsamento x e y, sfocatura zero e un colore pieno, per esempio box-shadow: 6px 6px 0 #000. Abbinala a border: 3px solid #000. All'hover, sposta l'elemento verso l'ombra e riduci lo sfalsamento per un effetto premuto.
Il design brutalista è dannoso per l'accessibilità?
Non per natura. HTML semplice, link veri e contorni forti sono spesso molto accessibili. I problemi nascono da coppie di colori a basso contrasto, testo predefinito minuscolo e stili di focus rimossi, quindi controllali come faresti su qualsiasi sito.
Dove funziona lo stile
Il brutalismo si adatta ai siti che vogliono comunicare personalità o un atteggiamento fai da te: pagine personali, studi, pubblicazioni, siti di musica ed eventi. La sua semplicità rende anche le pagine leggere, perché ci sono poche immagini e pochi web font da scaricare.
È più difficile da adattare dove i visitatori hanno bisogno di essere rassicurati, come sanità, finanza o percorsi di checkout. Lì, un layout più calmo con un solo accento brutalista, come una call to action con bordo, può essere un compromesso migliore.
Renderlo tuo senza copiare
La maggior parte delle pagine brutaliste condivide un vocabolario più che un template, quindi raramente devi prendere in prestito qualcosa da qualcuno. Scegli un motivo strutturale, come una griglia visibile, sezioni numerate o un ticker, e ripetilo in modo coerente.
Scegli una palette di nero, bianco e al massimo due accenti piatti. Poi lascia che spaziature, bordi e dimensioni del testo facciano il resto, invece di gradienti, foto od ombre morbide.
Quattro esempi originali
Homepage in stile documento grezzo
Monospace di sistema, link blu predefiniti e una semplice tabella. L'intero aspetto si ottiene con una manciata di regole.
Card dei prezzi neo brutalista
Contorno spesso, riempimento piatto e un'ombra netta sia sulla card sia sul pulsante.
Galleria con griglia visibile
I bordi fanno anche da linee della griglia, quindi la struttura è la decorazione.
Modulo newsletter brutalista
Un campo con etichetta e un pulsante con contorni pesanti e un anello di focus spesso in linea con lo stile.
Builder di pulsanti neo brutalisti
Regola bordo, sfalsamento dell'ombra, riempimento e raggio. I valori iniziali producono questo CSS: