Designabile #17 - UI Kits, Brutalist Web Design
innazitutto ti auguro buon anno, spero tu abbia passato delle buone feste 🥳 🎉
Oggi riprende l'appuntamento di questa newsletter con due temi interessanti:l'arte di creare UI Kits e l'analisi di uno stile di web design che sta lentamente prendendo piede, il "brutalist" (in netta opposizione al "minimalist").
Insomma, un numero tutto da leggere! 🚀
L’arte di creare UI Kits
Questo talk di Jan Toman — Design System Lead di Productboard — alla conferenza Figma Schema 2021 mi ha colpito per un concetto molto importante e sottovalutato:
Creating components to are understandable to people who will only use your design system.
Il Design Kit deve quindi essere fruibile non solo per il mantainer (colui che lo crea e lo mantiene nel tempo) ma sopratutto per il consumer (colui che lo usa), che può essere qualunque figura tecnica e non.
Brutalismo Digitale
Nell’era dei Design Systems, dove la coerenza e uniformità del visual design la fanno da padroni, fa un certo effetto vedere emergere una nuova tendenza, quella del Brutalism nel web design.
Il brutalismo è uno stile architettonico divenuto popolare negli anni '50 e fino agli anni '80. Il termine deriva dalla frase francese béton brut che significa "cemento grezzo".
In particolare, gli edifici istituzionali o civici adottarono questo stile. Questi erano visti dalla maggior parte delle persone come molto ostili, brutti e intimidatori.
Sì, ma cosa c’entra il web design?
Il motivo per cui questo stile di web design prende il nome da quello architettonico risiede nelle stesse emozioni che evoca. Inoltre, lo strano aspetto di questi siti web viene attribuito anche ad una volontà di differenziarsi rispetto allo standard globale. Non è una novità infatti che, oggi, molti siti web sembrano tutti uguali.
Quali sono le caratteristiche di un sito web brutalist:
- Sfondi neri o bianchi
- Nessuna sfumatura o ombra
- Elementi sovrapposti
- Mancanza di simmetria
- Design affollato
- Nessuna gerarchia distinta
- Tipografia monospaziata
- Un carattere utilizzato in tutto
- Colori con forte contrasto
- Nessuna animazione
- Immagini sparse
- Navigazione semplice o inesistente
- Una sola pagina
Guarda una raccolta di siti web brutalisti
Se vuoi appronfondire questo stile ti consiglio quest'altro articolo: Brutalism: BrutAl wEbsIteS for mOdern dAy webMAsTeRS.
Tools e Risorse
- Una guida su come diventare un Senior Designer
- Il Product Design spiegato bene
- Color Tools And Resources — Smashing Magazine
Al prossimo numero 👋
Francesco