Design brutalista

Il brutalismo è uno stile architettonico emerso a metà degli anni '20, anche se la sua ascesa è avvenuta un po' più tardi, negli anni '50 e '60. Si caratterizzava per essere uno stile semplice e sincero. Nel brutalismo, la forma segue la funzione .

Gli edifici brutalisti sono solitamente costruiti con elementi modulari ripetitivi che formano masse che rappresentano zone funzionali specifiche, distintamente articolate e raggruppate in un insieme unificato. Il calcestruzzo è usato per la sua onestà grezza e senza pretese, contrastando così drammaticamente con gli edifici altamente raffinati e decorati costruiti nello stile d'élite Beaux-Arts.

Bello, vero? Ma ti starai chiedendo perché stiamo parlando di architettura se questo blog parla di tecnologia e WordPress. Ebbene, il motivo è semplice: il brutalismo è una moda progettuale che possiamo applicare anche al mondo del web...

L'origine del web e la sua evoluzione grafica

Per i nostri lettori più giovani, il web sembra qualcosa che è sempre esistito, ma niente di più lontano dalla realtà. La prima pagina web della storia è stata pubblicata “di recente”, nel 1991 ? e, come puoi vedere, era molto semplice:

Le prime pagine web erano semplicemente testi con collegamenti ipertestuali. Ma con il progredire della tecnologia, il numero di risorse che si potevano aggiungere aumentava e le possibilità di innovazione si espandevano rapidamente.

In quei primi giorni di Internet, nessuno sapeva esattamente cosa fosse un "buon design" (nonostante tutto il bagaglio che avevamo dal mondo della stampa), e i primi webmaster fecero "quello che potevano" per creare layout di pagina efficaci per mostrare il contenuto. Ricordi i modelli dei primi anni '90, tutti basati su tavoli?

Certo, questi design hanno più o meno "funzionato" a livello visivo, ma internamente sono stati un vero disastro. La struttura HTML si concentrava solo sull'aspetto finale della pagina e ignorava completamente il contenuto stesso, quindi il risultato non era affatto accessibile. Ma stavamo tutti imparando a "costruire il web..."

Tavolozze di colori, icone piatte o realistiche, animazioni... tutti i dettagli più fini che, una volta combinati, diventano una "tendenza del design" vanno e vengono. Ma c'è una tendenza che sembra una costante oggi: la semplicità, di cui Ruth ha discusso un paio di giorni fa quando ha esaminato Apple e i suoi principi di design.

Ma la realtà è più complessa di tutto questo. Non tutti i siti web seguono le stesse tendenze. Ci sono persone che si allontanano dalle tendenze globali ed esplorano altre strade. Rompono gli schemi. Forse creano anche la prossima tendenza...

Brutalismo nel web

Il termine brutalismo deriva dal francese "Beton brut" o "cemento grezzo". Quindi, se parliamo di brutalismo sul web, è chiaro che non stiamo parlando di "concreto", ma di "crudezza". L'architettura brutalista vuole essere fedele ai materiali che usa come elementi costitutivi, ed è ciò a cui anche noi sviluppatori web dovremmo aspirare. Almeno, se vogliamo creare siti web brutalisti.

Questo fa sorgere la domanda: quali sono i “materiali” che utilizziamo per costruire una rete? Potresti pensare che si tratti di HTML e CSS, ma nota che HTML e CSS sono per il web ciò che una betoniera o una gru sono per la costruzione: sono gli strumenti che utilizziamo per "costruire" il nostro progetto. Pertanto, la “materia prima” con cui lavoriamo sul web è il contenuto . E questo non dovrebbe sorprenderti, perché ne abbiamo parlato a lungo su questo sito Web ogni volta che abbiamo menzionato che il contenuto è il re.

Il brutalismo è fedele ai suoi materiali, quindi come sviluppatori web e designer dobbiamo anche essere onesti con il nostro lavoro e sapere cos'è un sito Web e cosa non è. I web non sono riviste. Non sono app. Non sono cartelloni pubblicitari. Allora perché dovrebbero assomigliare a qualcuno di questi?

Principi di progettazione brutalista sul Web

Ecco alcuni principi di base che dovresti tenere a mente quando progetti un sito web brutalista:

1 – Il contenuto dovrebbe funzionare ovunque

Se crei una pagina Web senza alcuno stile CSS e ti sforzi di strutturarla correttamente utilizzando esclusivamente tag HTML, sai che questo sito Web funzionerà perfettamente in tutti i browser del mondo. Non sarà il sito più bello, ma funzionerà. Funzionerà anche in browser senza schermo (sì, sto parlando di accessibilità). E, se il contenuto è re, è fantastico !

Il contenuto deve funzionare e avere un senso in un mondo senza CSS. Lo stile di una pagina web può sicuramente aiutarti ad avere il tuo marchio, ma può anche romperlo e allontanarti dai principi brutalisti.

2 – Le interazioni dell'utente con il Web sono limitate e ben definite dall'HTML

Con CSS e JavaScript, possiamo creare siti Web che sembrano app native, con interazioni che prima sembravano impossibili, animazioni eccezionali e transizioni mozzafiato. Ma tutto questo non ha assolutamente nulla a che fare con il contenuto... Allora come progettiamo interfacce utili su un sito web brutalista?

Per impostazione predefinita, gli utenti possono interagire con il tuo sito Web solo tramite pulsanti, collegamenti e moduli. E solo i link e i pulsanti possono essere "cliccati". Ecco perché è importante mostrarli crudi:

Dall'inizio del Web, i collegamenti ipertestuali hanno seguito uno schema chiaro. Sono come un testo normale, ma il loro colore è blu e il loro stile è sottolineato. Quando il collegamento ipertestuale è stato visitato, il suo colore diventa viola in modo che il visitatore sappia di averlo già visitato. Dovremmo davvero allontanarci da questa purezza?

I bottoni , invece, raffigurano un elemento che esiste nella vita reale: un bottone. Un pulsante è qualcosa che possiamo premere sia nella vita reale che sul web, quindi ci aspettiamo che si comportino in modo simile. Assicurati che i tuoi pulsanti assomiglino a pulsanti e che il loro aspetto cambi quando interagiamo con essi. Inoltre, usali quando è necessario utilizzarli: accanto a un modulo, ad esempio, promettono all'utente che le informazioni digitate verranno inviate al server e quindi verranno indirizzate a un'altra pagina con una risposta.

3 – I siti Web esistono nei browser Web, quindi consenti ai tuoi utenti di "sfogliare" il tuo sito Web

Sapevi che i browser hanno pulsanti per andare avanti e indietro? So che lo fai, perché siamo tutti abituati a questo schema…. eppure, alcuni siti Web stanno infrangendo questo schema oggi! Le applicazioni a pagina singola (SPA) utilizzano JS per caricare il contenuto in modo dinamico e alcune di esse lo fanno ignorando che è presente un'opzione nel browser per tornare a una fase precedente. Un design brutalista rimane fedele al web e non infrange mai gli schemi e le regole a cui un utente è abituato.

4 – Gli utenti possono scorrere i contenuti verticalmente

Un sito web non è una rivista o un libro, quindi non è necessario (in linea di principio) impaginare il contenuto. L'unico motivo per cui molti siti web lo fanno è aumentare artificialmente le visite, poiché, per leggere un articolo, il lettore è costretto a visitare più pagine. Non farlo!

In un sito web brutalista, il contenuto viene presentato immediatamente e il lettore può consumarlo al proprio ritmo, scorrendo a suo piacimento. Non è necessario disturbare l'utente con interazioni non necessarie per visualizzare e utilizzare ciò che conta davvero: il contenuto.

Cosa ne pensi?

Mi piacciono i principi brutalisti. Se non sei un designer, applicare questi principi è abbastanza semplice: lascia le cose come appaiono per impostazione predefinita (o modificale leggermente). Ma cosa ne pensi? Ti piace? Pensi che sia brutto e antiquato? Fatecelo sapere nella sezione commenti qui sotto!

Immagine in primo piano di berenice melis su Unsplash.