Design brutalist

Publicat: 2020-02-21

Brutalismul este un stil arhitectural care a apărut la mijlocul anilor 1920, deși ascensiunea sa a venit puțin mai târziu, în anii 1950 și 1960. S-a caracterizat prin a fi un stil simplu și sincer. În brutalism, forma urmează funcției .

Habitatul 67
Habitat 67. Sursa: Wikipedia.

Clădirile brutaliste sunt de obicei construite cu elemente modulare repetitive care formează mase reprezentând zone funcționale specifice, distinct articulate și grupate într-un întreg unit. Betonul este folosit pentru onestitatea sa brută și fără pretenții, contrastând astfel dramatic cu clădirile extrem de rafinate și ornamentate construite în stilul de elită Beaux-Arts.

Sainte Marie de La Tourette
Sainte Marie de La Tourette. Sursa: Wikipedia.

Cool, nu? Dar s-ar putea să vă întrebați de ce vorbim despre arhitectură dacă acest blog este despre tehnologie și WordPress. Ei bine, motivul este simplu: brutalismul este o tendință de design pe care o putem aplica și în lumea web...

Originea web-ului și evoluția sa grafică

Pentru cititorii noștri mai tineri, web-ul pare ceva ce a existat întotdeauna, dar nimic mai departe de realitate. Prima pagină web din istorie a fost publicată „recent”, în 1991? și, după cum puteți vedea, a fost foarte simplu:

Captură de ecran a primului site web
Captură de ecran a primului site web.

Primele pagini web erau pur și simplu texte cu hyperlink-uri. Dar pe măsură ce tehnologia a progresat, numărul de resurse pe care le puteau adăuga a crescut și posibilitățile de inovare s-au extins rapid.

În acele timpuri de început ale internetului, nimeni nu știa exact ce era un „design bun” (în ciuda tuturor bagajelor pe care le aveam din lumea tipăritului), iar primii webmasteri au făcut „ceea ce au putut” pentru a crea machete eficiente de pagină pentru a prezenta conţinut. Îți amintești de modelele de la începutul anilor 90, toate bazate pe mese?

Google la începuturile sale
Ce frumos a fost Google la început!

Sigur, aceste modele mai mult sau mai puțin „funcționau” la nivel vizual, dar au fost un dezastru absolut intern. Structura HTML s-a concentrat doar pe aspectul final al paginii și a ignorat complet conținutul în sine, astfel încât rezultatul nu a fost deloc accesibil. Dar învățam cu toții cum să „construim web-ul...”

Portal Terra
Terra… un clasic al anilor 90 în Spania, cu designul său bazat pe masă.

Palete de culori, pictograme plate sau realiste, animații... toate detaliile mai fine care, combinate, devin o „tendință de design” vin și pleacă. Dar există o tendință care pare o constantă astăzi: simplitatea, despre care Ruth a discutat în urmă cu câteva zile când s-a uitat la Apple și la principiile sale de design.

Dar realitatea este mai complexă decât toate acestea. Nu toate site-urile web urmează aceleași tendințe. Sunt oameni care se îndepărtează de tendințele globale și explorează alte căi. Ei sparg mucegaiul. Poate chiar creează următoarea tendință...

Brutalism pe web

Termenul de brutalism provine din francezul „Beton brut” sau „beton brut”. Deci, dacă vorbim de brutalism pe web, este clar că nu vorbim de „concret”, ci de „brutănie”. Arhitectura brutalistă vrea să fie fidelă materialelor pe care le folosește ca elemente de bază și pentru asta ar trebui să ne străduim și noi, ca dezvoltatori web. Cel puțin, dacă vrem să creăm site-uri web brutaliste.

Acest lucru ridică întrebarea: care sunt „materialele” pe care le folosim pentru a construi o rețea? S-ar putea să credeți că acestea sunt HTML și CSS, dar observați că HTML și CSS sunt pentru web ceea ce este o betoniera sau o macara pentru construcție: sunt instrumentele pe care le folosim pentru a „construi” proiectul nostru. Prin urmare, „materia primă” cu care lucrăm pe web este conținutul . Și asta nu ar trebui să vă surprindă, pentru că am vorbit pe larg despre asta pe acest site de fiecare dată când am menționat că conținutul este rege.

Brutalismul este sincer față de materialele sale, așa că, în calitate de dezvoltatori și designeri web, trebuie să fim cinstiți cu munca noastră și să știm ce este un site web și ce nu este. Web-urile nu sunt reviste. Nu sunt aplicații. Nu sunt panouri publicitare. Deci, de ce ar trebui să semene cu oricare dintre acestea?

Principii de design brutalist pe web

Aici aveți câteva principii de bază pe care ar trebui să le aveți în vedere atunci când proiectați un site web brutalist:

1 – Conținutul ar trebui să funcționeze peste tot

Dacă creați o pagină web fără niciun stil CSS și vă străduiți să o structurați corect folosind numai etichete HTML, știți că acest site web va funcționa perfect în toate browserele din lume. Nu va fi cel mai frumos site, dar va funcționa. Va funcționa chiar și în browsere fără ecran (da, vorbesc despre accesibilitate). Și, dacă conținutul este rege, este minunat !

Conținutul trebuie să funcționeze și să aibă sens într-o lume fără CSS. Stilizarea unei pagini web vă poate ajuta cu siguranță să aveți propriul branding, dar poate, de asemenea, să o rupe și să vă îndepărteze de principiile brutaliste.

2 – Interacțiunile utilizatorului cu Web-ul sunt limitate și bine definite de HTML

Cu CSS și JavaScript, putem crea site-uri web care arată ca aplicații native, cu interacțiuni care anterior păreau imposibile, animații remarcabile și tranziții uluitoare. Dar toate acestea nu au absolut nimic de-a face cu conținutul... Deci, cum proiectăm interfețe utile pe un site brutalist?

În mod implicit, utilizatorii pot interacționa cu site-ul dvs. numai prin butoane, linkuri și formulare. Și numai linkurile și butoanele pot fi „date clic”. De aceea este important să le arăți crude:

Design brutalist în Nelio Software
Site-ul nostru urmează câteva dintre principiile brutaliste. Poți identifica rapid ce este un link și poți chiar să identifici dacă l-ai vizitat deja sau nu, deoarece culoarea lui se schimbă.

De la începutul internetului, hyperlinkurile au urmat un model clar. Sunt ca textul obișnuit, dar culoarea lor este albastră și stilul este subliniat. Când hyperlinkul a fost vizitat, culoarea acestuia se schimbă în violet, astfel încât vizitatorul să știe că l-a vizitat deja. Chiar ar trebui să ne îndepărtăm de această puritate?

Butonul brutalist
Butoanele de pe site-ul nostru sunt, de asemenea, brutaliste. Ele seamănă în mod clar cu butoanele, chiar dacă am aplicat stiluri diferite pentru a le face mai „moderne”.

Butoanele , pe de altă parte, descriu un element care există în viața reală: un buton. Un buton este ceva ce putem apăsa atât în ​​viața reală, cât și pe web și, prin urmare, ne așteptăm ca aceștia să se comporte similar. Asigurați-vă că butoanele dvs. arată ca niște butoane și că aspectul lor se schimbă atunci când interacționăm cu ele. De asemenea, folosește-le atunci când trebuie să le folosești: lângă un formular, de exemplu, promit utilizatorului că informațiile pe care le-a introdus vor fi trimise către server și apoi vor fi duși la o altă pagină cu un răspuns.

3 – Site-urile web există în browserele web, așa că permiteți utilizatorilor să vă „răsfoiască” site-ul

Știați că browserele au butoane pentru a merge înapoi și înainte? Știu că da, pentru că suntem cu toții obișnuiți cu acest tipar... și totuși, unele site-uri web sparg acest tipar astăzi! Aplicațiile cu o singură pagină (SPA) folosesc JS pentru a încărca conținut în mod dinamic, iar unele dintre ele fac acest lucru ignorând că există o opțiune în browser pentru a reveni la o etapă anterioară. Un design brutalist rămâne fidel internetului și nu încalcă niciodată tiparele și regulile cu care este obișnuit un utilizator.

4 – Utilizatorii pot derula conținutul pe verticală

Un site web nu este o revistă sau o carte, deci nu este nevoie (în principiu) să paginați conținutul. Singurul motiv pentru care multe site-uri fac acest lucru este creșterea artificială a vizitelor, deoarece, pentru a citi un articol, cititorul este obligat să viziteze mai multe pagini. Nu face asta!

Într-un site brutalist, conținutul este prezentat deodată și cititorului i se permite să-l consume în propriul ritm, derulând după cum îi convine. Nu este nevoie să deranjați utilizatorul cu interacțiuni inutile pentru a vedea și utiliza ceea ce contează cu adevărat: conținutul.

Ce crezi?

Îmi plac principiile brutaliste. Dacă nu sunteți designer, aplicarea acestor principii este destul de ușoară: lăsați lucrurile așa cum arată implicit (sau modificați-le ușor). Dar ce crezi? Vă place? Crezi că este urât și depășit? Anunțați-ne în secțiunea de comentarii de mai jos!

Imagine prezentată de berenice melis pe Unsplash.