A brutalizmus a webdesign egy különleges fajtája, amely jól működik a furcsa, kreatív márkák és magánszemélyek számára. Azonban ezt a szabályokat áthágó tervezési technikát óvatosan kell alkalmazni. Olvassa el ezt az útmutatót, hogy megtudja, hogyan.
A brutalizmus egyike azoknak a trendeknek, amelyek jönnek-mennek a webdesignban. Nem azért, mert a brutalista dizájnban nincs sok érték. Sokkal inkább arról van szó, hogy nem mindig illik a kor stílusához és hangvételéhez.
De részben ez teszi a brutalizmust olyan izgalmassá. Amikor a legtöbb weboldal hajlamos arra, hogy évről-évre beálljon a sorba, és ugyanazokat az alapvető trendeket vegye át, egy olyan weboldal, amely nem a szabályok szerint játszik, könnyen ellophatja a reflektorfényt.
Csak tudnia kell, hogy ez az a fajta reflektorfény, amelyet a márkára akar vetíteni. A brutalizmus néha ridegnek és komornak tűnhet. Ha nem megfelelően van kivitelezve, vagy nem a megfelelő márkához használják, rossz üzeneteket közvetíthet a webhely látogatói számára.
A brutalizmus webdizájnban való megjelenéséről szóló útmutatóban megvitatjuk, hogy mi is ez, és miben különbözik a minimalista és antidizájn trendektől. Ezen kívül lebontjuk a brutalizmus alapelveit, mutatunk néhány példát brutalista weboldalakra, és javaslatokat teszünk arra, hogy mikor és mikor nem érdemes használni.
Mi a brutalista webdesign?
A brutalizmus egy olyan dizájnstílus, amely az építészet területén alakult ki az 1950-es években. A „brutalizmus” szó a francia brut szóból származik, ami nyerset jelent. Erről a tervezési technika ismert – a nyerseségről, a letisztultságról és az átláthatóságról.
A Met Breuer, a korábbi Whitney Museum of American Art épülete jó példa arra, hogy az építészetben a brutalista design a funkciót helyezi előtérbe a formával szemben:
Ez egy masszív, nyers anyagokból épült, markáns vonásokkal rendelkező építmény. A Whitney Múzeum honlapja ugyanilyen pontosan mutatja be, hogyan néz ki a brutalizmus a webdesignban:
Bár a brutalista weboldalak talán nem rendelkeznek olyan megalitikus és szigorú jelenléttel, mint a brutalista épületek, de hasonló módon épülnek fel a web nyersanyagaiból. Ez azt jelenti, hogy a CSS és a JavaScript helyett nagyobb mértékben támaszkodnak a HTML-re.
Ez ennek a webdesign-technikának néhány felismerhető vonása:
- Nyers szöveg
- rendszerben használt betűtípusok
- aláhúzott hiperhivatkozások
- Web-biztonságos színek
- Monokromatizmus
- Egyszínű hátterek kevés vagy semmilyen díszítéssel (tehát nincsenek színátmenetek)
- Geometrikus elemek és éles élek
- Kezeletlen fotók – azaz nincsenek szegélyek, árnyékolás, lekerekítés stb.
- Nyitott navigáció (a legördülő vagy hamburger menükkel szemben)
- A szakaszok közötti elválasztó vonalak
- Táblázatokban található tartalom
- Körvonalas gombok
Bár sok brutalista weboldal osztozik ezeken a vonásokon, a design nem mindig a következő módon van kivitelezve azonos módon – különösen akkor, ha a webdesignerek a brutalizmust modern tervezési technikákba ágyazzák. A Whitney Múzeum honlapja például a mai webdesign-szabványok szerint is kiszámítható felépítést tartalmaz, miközben sok képelemet használ.
A brutalizmus rövid története
A brutalizmus az 1950-es években jelent meg Európában, amikor az országok a II. világháborút követően újjáépítésre törekedtek. Az egyik fő oka, hogy ezt a lecsupaszított tervezési stílust követték, az volt, hogy költség- és erőforrás-hatékony volt. Bár a látható beton- és téglahomlokzatok és a monokróm paletták nem a legvonzóbb épületeket eredményezték, egyszerűbb és olcsóbb volt megépíteni őket.
Az olyan országok, mint az Egyesült Királyság (ahol a brutalizmus eredetileg született) azért fogadták el a brutalizmust, mert praktikus és olcsó módja volt a funkcionális lakások, oktatási intézmények és kormányzati épületek építésének. A Szovjetunió egy másik olyan ország volt, amely a II. világháború után alkalmazta a brutalizmust. Ezt azért tette, hogy kezelje a lakásválságot. Ez egyúttal a burzsoázia udvariasságának és extravaganciájának elutasítását is jelentette.
A brutalista mozgalom végül az 1970-es években hanyatlásnak indult. Míg az olcsó, durva anyagok, amelyeket az építészek a brutalista épületek építéséhez használtak, lehetővé tették a gyors újjáépítést és növekedést, a fenyegető, durva formák kedvezőtlen hírnevet szereztek látszólagos ridegségük, keménységük és a kommunizmussal való társításuk miatt.
Ennek ellenére a brutalizmus nem tűnt el teljesen. Az internet kezdeti időszakában épített weboldalak brutalista stílusúak voltak.
Sőt, a ’90-es évekből származó, ma is létező weboldalak közül néhány még ma is ezt a stílust őrzi. Az 1995-ben alapított Craigslist az egyik legnépszerűbb példája a brutalista webdesign irányzatnak. Így nézett ki 2000-ben:
Nincsenek képek – csak kék linkek oszlopról oszlopra, fehér háttér előtt. Így néz ki a weboldal 2022-ben:
Bár a webhely most már kifinomultabbnak tűnik, az eredeti struktúra és a tervezés nyers megközelítése megmaradt. A Craigslist nélkülözi a képi világot és a fehér teret, amelyet egy hagyományos módon vonzó modern weboldalon találna. Ehelyett oszlopfejléceket és kék hiperhivatkozásokat használ a főoldalak felépítéséhez.
A webdesignerek sokféle irányba mehetnek a brutalizmussal. Ennek ellenére fontos, hogy ne keverjük össze az antidizájnnal. Ez a tervezési irányzat az 1960-as évek olasz építészetében és az 1990-es évek webdesignjában egyaránt megjelent – rikító, eltúlzott és zavaros felületek jellemezték.
A brutalizmus eredeti célja az volt, hogy a tervezést és a kivitelezést az alapokig lecsupaszítsa, és praktikusabbá tegye. A csúnya formatervezés sajnos néha melléktermék volt, de nem az eredeti szándék, mint az antidizájn esetében.
Brutalista vs. minimalista webdesign
Bár nem biztos, hogy egy brutalista dizájnt összetévesztenénk egy minimalista dizájnnal, egy dolog közös bennük. Mindkét tervezési irányzat azon az elképzelésen alapul, hogy a kevesebb több. És hogy minden elemnek egyértelmű célt kell szolgálnia.
Egyszerűség
A brutalizmus hajlamos ezt a koncepciót a végletekig vinni azáltal, hogy egy webhelyet a vázszerkezetére csupaszít le. A funkció sokkal többet számít, mint a forma.
A minimalizmus azonban az egyszerűség és a szépség egyensúlyát célozza, így a részletek még mindig számítanak. Az alapértelmezett CMS-beállításoknak, a rendszerbetűtípusoknak és a túlzásba vitt színpalettáknak ritkán van helyük a minimalizmusban. Ehelyett a webdesignerek gondosan megrajzolnak minden részletet, ami a távolságokkal, a hierarchiával, a szimmetriával és egyebekkel kapcsolatos.
Esztétika
A brutalista tervezők általában nem törődnek túlságosan az ízléssel. A céljuk az, hogy a rendelkezésükre álló erőforrásokat úgy használják fel, és úgy alkalmazzák őket, hogy a lényeg hatékonyan átadható legyen. A brutalizmus valóban tartalomorientált megközelítés a weboldalak tervezésénél.
A minimalista tervezők ezzel szemben sokkal megfontoltabbak. Bár a tartalom a legfontosabb összetevő a webhelyen, a tervezők több UI-elemet használnak, és nem riadnak vissza a stilizálástól vagy az animációtól sem, hogy felhívják a figyelmet az oldal kulcsfontosságú területeire.
Relevancia
A másik nagy különbség, amiben ezek a design irányzatok különböznek, az az, hogy mennyire praktikus a használatuk. A minimalizmus régóta tartó trend a webdesignban. Ez annak köszönhető, hogy ez a tervezés örökzöld megközelítése – az egyszerű, vonzó és jól használható felületeket a fogyasztók mindig is szívesen fogják fogadni.
A brutalizmus általában sokkal rövidebb életű, ha nem jelenik meg az év designtrendjei között. Nincs is olyan sok releváns felhasználási területe. Általában olyan alkotók által elfogadott trend, akiknek a munkái ugyanúgy brutalista vagy avantgárd jellegűek.
A brutalizmus 4 alapelve a webdesignban
A brutalizmus nem mindig a webdesign alapelvei szerint játszik. Ez azonban nem jelenti azt, hogy a brutalista felhasználói felületek használhatatlanok. Csak más szabályok szerint játszanak:
1. A lehető legkisebb erőfeszítéssel végezze el, amit kell.
A brutalista tervezés nem engedi meg a pazarlást. Csak azt használod fel, amire szükséged van egy hatékony weboldal létrehozásához. Ez általában azt jelenti, hogy stilizálatlan HTML-szel dolgozol, és alapértelmezett beállításokat használsz a betűtípusok, színek, formák stb. tekintetében.
A funkcionalitásnak is egyszerűnek és leegyszerűsítettnek kell lennie. A látogatókat nem szabad túlzott tartalommal, zavaró funkciókkal vagy lassan betöltődő oldalakkal terhelni.
2. A projekt erőssége és stabilitása a struktúra révén
Egy brutalista weboldal első látásra primitívnek tűnhet, de ezzel a dizájnstílussal rengeteg erőt és stabilitást vetíthet ki. Még ha a weboldalakat nem is a túlméretezett, feltűnően nagy tipográfia uralja, a felhasználói felület látható struktúrája – például az elválasztó vonalak, a táblázatok és a nyitott navigáció – erőteljessé teheti a webhelyet.
Az olyan alapszínek, mint a fekete, a fehér és a természetes színek, például a szürke, a barnásbarna és a réz használata szintén szilárdabbá teszi a webhelyet – akárcsak a fizikai szerkezetek, amelyekről mintázták őket. A durva, tökéletlen, kemény élekkel rendelkező felhasználói felületek szintén hozzájárulnak az ipari hangulatú webhelyekhez.
3. A hatékony dizájnnak nem kell vonzónak lennie
Bár lehet, hogy egy lecsupaszított felületen nincs semmi szép, ez nem biztos, hogy sokat számít a felhasználóknak, akik gyors és egyszerű módon szeretnének kapcsolatba lépni az oldallal és konvertálni.
Ez azt jelenti, hogy a brutalista webdesignnak nem feltétlenül kell csúnyának lennie. Rengeteg példa van a kortárs és modern brutalista építészetre, bútorokra és weboldalakra, amelyek bonyolult tervezésűek anélkül, hogy pazarlóak vagy extravagánsak lennének.
4. Egyszerűséggel közvetítsen átláthatóságot
Amikor a brutalizmus először megjelent a színtéren, az építkezés praktikus és hatékony módja volt. Emellett kihívást jelentett a mindenhol máshol tapasztalható mesterkéltséggel és könnyedséggel szemben.
Mint ilyen, a mai brutalizmus nem csak az erő közvetítésére használható. Robusztus és tökéletlen felületei olyan igazságokat is közvetíthetnek egy márkáról, amelyeket a szavak önmagukban néha nem tudnak. A brutalizmus a webdesignban lehetővé teszi a márkák számára, hogy valódi önmagukat mutassák meg, méghozzá olyan módon, amihez sok márka és ember nem lenne elég magabiztos.
7 példa a brutalista webdesignra
Nézzünk meg néhány példát a brutalista weboldalakra, amelyek bemutatják, hogy milyen különböző módon alkalmazzák manapság ezt a designtrendet:
1. 56 Digital
Az 56 Digital egy torontói székhelyű digitális stúdió. Amit fentebb lát, az az ügynökség portfólió-weboldala. Bár a leendő ügyfelek az alján található összecsukható projektlista alatt elrejtve találnak portfóliógrafikákat, nincs sok minden, amit megnézhetnének.
A navigációról nem is beszélhetünk – csak néhány alapvető információ a cégről és a közösségi médiára mutató linkek. Van egy egyszerű szöveges lista is az ügynökség kreatív szolgáltatásairól. Ez alatt egy táblázat található, amely a projektek nevét és évszámát tartalmazza. Csak ha a látogató a projektsorok fölé mozdul, akkor jelenik meg a hozzá tartozó kép és egy egysoros leírás.
2. A2-TÍPUS
Az A2-TYPE egy független fontkészítő cég. A fenti GIF a cég betűtípusok oldaláról származik. Ennek ellenére az oldal nagy része olyan, amit brutalista dizájnnak nevezhetnénk – ez vonatkozik az oldal tetején található nyitott navigációra, amely az összes oldalt megjeleníti.
Az oldal háttere egyszínű magenta. A betűtípusok azonos méretben, azonos oszlop mentén jelennek meg, és a kategóriáikon belül egyenletesen vannak elhelyezve. Nincsenek említésre méltó képek, de ez azért van, mert a látogatók úgyis csak a beágyazott betűtípusokat akarják látni.
3. Alicia Keys
Az utóbbi években az énekesnő, dalszerző és színésznő Alicia Keys igyekezett visszavenni a fizikai megjelenéséből, és gyakran smink nélkül jelent meg nagyszabású eseményeken. Így nem lepődtünk meg, hogy a weboldalát ugyanez a fajta nyers, autentikus minőség hatja át.
A kezdőlapon található képek többsége nyers. Más szóval eredeti méretükben, alakjukban és formájukban jelennek meg az oldalon. Ráadásul nagyon kevés szó kíséri őket, egyszerű sans serif tipográfiával megformázva.
4. Apelido & Apelido
Az Apelido & Apelido egy sajátos digitális tervezőstúdió, ugyanilyen sajátos honlappal. A fenti képernyőképen látható, hogy néz ki az oldal „hero” szekciója. Nincs fejléc, amiről beszélni lehetne. Csak szöveges dobozok és egy szokatlan logó.
Az egyoldalas weboldal azonban nem teljesen brutális. A látogatók véletlenszerű animációkkal, egy interaktív videóval és a hagyományos kapcsolatfelvételi űrlap helyett egy vendégkönyvvel találkoznak.
5. Balenciaga
A Balenciaga már régóta piszkálja az embereket a ruhadivatával. Évekkel ezelőtt a stílus tekintetében is a végletekig vitte a weboldalát.
Amit fentebb látsz, az egy képernyőkép a Balenciaga honlapjáról 2017-ből. Az oldal dizájnja inkább hasonlított egy drótvázra, mint egy teljes értékű weboldalra. Csak akkor találkoztak a vásárlók a termékképekkel és a számukra ismerősebb felhasználói felülettel, amikor a kategóriák között haladtak.
Manapság a brutalista dizájn már nem olyan mindent átfogó, mint egykor volt. Így néz ki az oldal 2022-ben: A fejléc, a lábléc, a navigáció, az élő chat widget és a gombok megtartják az oldal kezdetleges drótvázszerű megjelenését.
6. Drudge Report
A Drudge Report egy híreket összesítő weboldal, amely majdnem olyan régóta létezik, mint a Craigslist. A Craigslisthez hasonlóan a Drudge Report is megőrizte brutalista stílusát a mai napig.
Bár az olvasók alkalmanként képet vagy harmadik féltől származó reklámbannert találnak az oldalon, a felhasználói felület nagy része egyszerű szöveges linkekből áll, amelyek cikkekre és hírforrásokra mutatnak. Ezeket egy egyszerű fekete aláhúzott stílusban ábrázolják. A linkek is véletlenszerűen vannak elrendezve az oldalon, és az egyes részeket vékony fekete vonalakkal osztják el.
7. Seth blogja
Seth Godin vállalkozó és szerző, aki egy brutalista stílusú blogot vezet Seth blogja néven. A hosszan görgetett oldalon nincsenek képek. A navigáció teljes egészében és mindenkor látható a bal oldalon. Ezenkívül a bejegyzésen belül megjelenő hiperhivatkozások kék aláhúzott szöveges hivatkozásként jelennek meg.
Annak ellenére, hogy ez a kizárólag szöveges blog a brutalizmus stílusában van kialakítva, vonzó dizájnnal rendelkezik. Ez azért van így, mert számos olyan UX-alapelvet követ, amelyek arról tájékoztatnak, hogy a tervezőknek hogyan kell az oldalakat az emberi pszichológia és a felhasználói preferenciák alapján elhelyezniük, csoportosítaniuk és elrendezniük.
Használjunk brutalizmust a weboldalakon?
A brutalizmus a webdesign korszerű megközelítése lehet. De trükkös tervezési irányzat, amelyet nehéz elsajátítani – nem csak a technikája miatt, hanem a tekintetben is, hogy mikor és hol alkalmazza.
Ha érdekli a brutalizmus, és azon tűnődik, hogyan lehet a webes megjelenítésben megvalósítani, íme néhány érv és ellenérv, amit érdemes megfontolni:
A brutalista webdesign előnyei
- Kiemelkedik a tömegből: Egy brutalista weboldal nem fog hasonlítani a versenytársakhoz, ami automatikusan kiemeli a márkát. Ez különösen hasznos a művészi típusok számára, akik ütős benyomást akarnak tenni a potenciális ügyfelekre, felhasználókra vagy vásárlókra.
- Maximális hatékonyság: A brutalizmusban nem számít, hogy egy weboldal vonzó-e, amíg hatékony. Ha jól ismered a webdesign alapelveit és az emberi pszichológiát, akkor olyan zavarmentes és jól használható felhasználói felületeket hozhatsz létre, amelyek rendkívül sikeresek a felhasználók konvertálásában.
- Költségek és erőforrások optimalizálása: A brutalizmus a weboldalak tervezésének költség- és erőforrás-hatékony módja. Ha olyan ügyféllel dolgozol együtt, aki kiválóan konvertáló webhelyet szeretne mindenféle sallangok és extrák nélkül, a brutalizmus nagyszerű módja lehet a kérés teljesítésének.
- Gyorsabb betöltési idő: Mivel a brutalista design elsősorban HTML használatával készül, és kevés képi anyagot használ, Ön és ügyfelei is profitálhatnak a sebesség melléktermékéből. A dolgokat lassító CSS és JavaScript nélkül a brutalista weboldalak nagyon gyorsan betöltődnek – ami jót tesz a felhasználói élménynek és a SEO-nak.
A brutalista webdesign hátrányai
- Vizuálisan nem vonzó: A brutalista dizájn nem mindig a legjobban tetszetős vizuálisan. Bár a brutalizmusban az esztétika nem prioritás, egy csúnya felület menekülésre késztetheti a látogatókat.
- Negatív asszociációk:A brutalizmusnak nincs a legjobb híre, sokan hidegnek, komornak, durvának, impozánsnak, poszt-apokaliptikusnak és egy sor más negatív jelzővel illetik ezeket a formaterveket. Legyen óvatos azzal, hogy mennyire nyers a dizájnja, különben a márkát is ezekkel a jelzőkkel társíthatják.
- Nem tartós: A minimalizmussal ellentétben, amely mindig modernnek és időszerűnek fog tűnni, a brutalista webdesign nem a legtartósabb trend. Ha egy weboldalon alkalmazza, valószínűleg szorosan nyomon kell követnie a teljesítményét, és újratervezést kell végrehajtania, ha az elkötelezettség és a konverziók csökkennek.
- Kevésbé olvasható: A brutalista weboldalakat nem feltétlenül a legkönnyebb hosszú ideig nézegetni. Ezért ezt szem előtt kell tartanod, amikor eldöntöd, mikor használd ezt a stílust. Lehet, hogy „meg kell szegned” a brutalizmus néhány szabályát, hogy egyensúlyt, teret és más elemeket vigyél a felhasználói felületbe, hogy kevésbé legyen nehéz olvasni.
Következtetés
A brutalizmus gyökerei talán az 1950-es évek európai építészetében gyökereznek, de az internet már évtizedek óta kísérletezik ezzel a webdesign-irányzattal. Ennek ellenére a brutalista dizájn nem olyan, mint az olyan modern dizájnirányzatok, mint a minimalizmus vagy a flat design, amelyek itt vannak, hogy maradjanak.
A brutalizmus a webdesign egy különleges fajtája. Jól működik a furcsa, kreatív márkák és egyének számára. Ez a szabályokat áthágó tervezési technika azonban nem mindig kap jó fogadtatást, függetlenül attól, hogy milyen szorosan követi az alapelveit.
Bár a brutalizmusnak ma is van néhány nagyszerű példája a weben, sok márka a régimódi brutalizmust keverte a modern designtrendekkel, hogy biztosítsa felhasználóbarátságát. Ha ennek a webdesign-irányzatnak a felhasználásán gondolkodik, ezt érdemes szem előtt tartani.
A mai fogyasztók megbarátkoztak a vonzó felületekkel. A végletekig vitt brutalizmus túlságosan megrázó élményt nyújthat számukra. Tehát a brutalizmus és a modern minimalizmus közötti jó egyensúly megtalálása biztonságos módja annak, hogy eljátsszunk ezzel a technikával.
Forrás: elementor.com