Ah, ik herinner me de dagen goed ... toen alles een glanzende, drop-shadowed gradiënt was, met minstens 6 stukjes clipart, en een stockfoto van 5 feestelijke kantoormedewerkers. We hielden van foto's van toetsenborden met onzinnige knoppen erop, en 3D-effect houdt mensen vast die glanzende symbolen dragen.

En wat gebeurde er toen? iOS 7 kwam langs. Het verloopgereedschap in onze Photoshops begon stof te verzamelen en we schrapten onze enorme bibliotheek met stockfoto's.

Plat ontwerp nam over in 2013 . Alles moest helder zijn, cartoonachtig en natuurlijk plat. Op dezelfde manier dat vlak ontwerp een reactie was op het skeuomorfisme, beginnen we de dingen helemaal anders te zien gaan.

Dus, wat is de nieuwe smaak van het jaar? Ik ben blij dat u het vroeg: sites die lijken op de downloadpagina van een open-source softwarebedrijf dat eind jaren negentig werd gesloten.

Dit is gedocumenteerd door Brutalistische websites , die tractie oppikte en dekking scoorde Washington Post en Snelle Co om een ​​paar te noemen. Maar dit zijn toch gewoon websites van pretentieuze ontwerpbureaus en experimentele kunstenaars? In de vittalistische websites showcase, dat is grotendeels waar, maar we beginnen deze esthetische lek naar de mainstream te zien. Leuk! We kunnen de rest van onze dagen niet naar een strak, plat ontwerp kijken, toch?

Persoonlijk houd ik van deze trend. Ik ben niet de scherpste webontwerper die er is, en ik wil ook geen afgezaagd raamwerk gebruiken - alles wat ik samen kan klingelen is het beste wat ik kan doen.

Vroeger spendeerde ik mijn tijd aan het doorzoeken van internet voor verouderde webontwerpen, met plezier in onhandige Times New Roman en ongemakkelijke framesets. Waarschijnlijk omdat het me deed denken aan een eenvoudiger tijd, waarin mensen zichzelf webmasters noemden en alles permanent 'Under Construction' was.

Maar, op zoek naar webontwerp helemaal opnieuw te leren in plaats van een WP-thema aan te nemen of CSS-framework, ik ben altijd al te beschaamd geweest om de eenvoudige, lelijke website van mijn dromen te maken. 'Wat zou het punt zijn?', Dacht ik. Als ik het zou laten zien, zou ik er belachelijk uitzien. Ik kan het niet gebruiken als een portfolio voor iets zonder eruit te zien als een puinhoop.

Het zien van CSS-light websites zonder JavaScript in zicht gaf me het vertrouwen dat ik nodig had om te stoppen met het werken op andermans sites en er zelf een te maken.

Kijkend naar de selectie van nieuwe minimalistische sites, merkte ik een aantal belangrijke thema's op die hun prachtig lelijke koppen lijken te vormen.

monochroom

Monochroom ontwerp doet precies wat goed ontwerp zou moeten doen: vestigt de aandacht op de inhoud.

001

Geen fancy CSS

Denk aan de goede oude tijd? Toen iedereen een website bezat en iets te bewijzen had? De no (of kleine) CSS-benadering brengt die dagen terug, en maakt me persoonlijk uiterst nostalgisch voor eenvoudiger tijden waarin een website slechts een korte biografie en een verzameling links kan zijn.

002

Schuine / overlappende tekst

Schuine tekst gooit de gebruiker een beetje weg, en niet op een verbazingwekkende manier . In plaats daarvan is het iets dat de gebruiker niet gewend is te zien, dus het maakt een krachtige indruk.

Bekijk de experimentele tekstplaatsing waar Loïc gebruik van maakt zijn website . De totale minachting voor leesbaarheid geeft bezoekers het gevoel van een high-fashion winkel die geen prijskaartjes heeft. Het is zo oninformatief (en in dit geval, afstandelijk) dat het stijlvol is.

004

Weinig aandacht voor schaal of padding

Bloomberg behoorlijk experimenteel worden deze dagen, en ik hou ervan. Stel je de beproevingen en beproevingen voor die de ontwerper moest doorstaan ​​om dat goedgekeurd te krijgen bij de grote baas.

De reden dat dit geweldig is, is dat het zo anders is. Het houdt weinig rekening met harde ontwerpregels: genoeg ruimte laten tussen elementen, dingen op dezelfde schaal houden en er zelfs voor zorgen dat alles op alle apparaten leesbaar is.

005

Verwijzingen naar legacy-technologie

Velen van ons zullen goede herinneringen hebben aan Windows 98 of vroege Mac-besturingssystemen. Sommige websites wekken een gevoel van nostalgie op - en misschien ook humor - door verwijzingen naar oude software te maken. Er komt immers veel brutalistisch webdesign uit de 'oude tijd'.

Bekijk dit voorbeeld van Post HTML (deze mappen bevatten elk experimentele kunst).

006

Wat dit betekent voor ontwerpers

We dachten dat plat = eenvoud, maar het heeft natuurlijk nog steeds heel wat ontwerpwerk nodig om het goed te krijgen.

Met brutalistische esthetiek op de voorgrond, zullen ontwerpers minder afhankelijk moeten zijn van traditionele CSS-frameworks en codesites.

Het lijkt echter niet te gaan om bedrijven die deze trend op hun sites toepassen. Brutalistisch ontwerp - afgezien van Bloomberg en enkele andere grotere namen - is op dit moment beperkt tot ontwerpbureaus, experimentele sites en persoonlijke blogs.

Als je je eigen brutalistische website wilt maken, volgen hier een paar tips ...

Verwijder de CSS uit uw huidige site

Hoewel sommige sites sterk afhankelijk zijn van CSS voor horizontale positionering, is het mogelijk om alle stijlen van sommige sites te rippen en ze toch 'juist' weer te geven. Hier is een voorbeeld:

Als uw site afhankelijk is van flitsende animaties, JavaScript of fancy CSS, moet deze waarschijnlijk opnieuw worden gemaakt als u deze stijl wilt gebruiken. De reden dat ik WordPress heb gedumpt was dat ik geen thema kon vinden dat bij mijn visie paste. Uiteindelijk heb ik uiteindelijk HTML / CSS geleerd door een oude sjabloon uit de vroege jaren 2000 te bewerken. Daarna had ik het volste vertrouwen om door te gaan en opnieuw te beginnen, mijn eigen rommelige CSS te krabbelen en het verste te maken van een gepolijste, 'moderne' site.

Snijd terug naar monochroom

Soms betekent brutalistisch ontwerp eenvoudig ontwerp. En dat is altijd geweldig voor de gebruikerservaring. Als u uw huidige kleurenpalet verkleint tot slechts 2 kleuren (zwart en een ander wit, technisch), kunt u de overbelasting van de gebruiker verminderen en krijgt u een duidelijkere richting voor waar u naartoe gaat. Je ziet immers geen sites met een heleboel verschillende kleuren in het tekstgebied omdat het moeilijk is om je op te richten.

Wees creatief met tekstpositionering

Wie zei dat je alles netjes in de rij moet hebben staan? De bovenstaande website van Loïc Dupasquier is bijvoorbeeld een gewaagde uitspraak die iets zegt over de ontwerper. Er precies hetzelfde uitzien als elke andere mogelijke huur is geen goede blik.

Tenzij u de beroemdste ontwerper in dat gebied bent, zult u altijd tweede beste zijn. Door traditionele 'regels' over typografie te negeren, sta je buiten de aandacht van de menigte.

Leer de basis en oude manieren opnieuw

Voor mij was het niet een kwestie van het aanpassen van een ontwerp of skillset aan een nieuwe mentaliteit. Ik heb de basis van webontwerp geleerd toen sites er precies zo uitzagen als ik ze heb laten zien, dus alles wat ik moest doen, was een snelle opfriscursus volgen en aan de slag gaan.

Ik raad aan om de broncode te controleren op oude sites en die op Brutalist-websites. oude HTML-tutorials of deze goudmijn met een lijst met de eerste websites die nog in leven zijn.

Waar deze stijl goed werkt (en waar niet)

Uiteindelijk is een website altijd een balans tussen zelfexpressie en het creëren van de beste ervaring voor uw gebruikers.

Op een blog is het waarschijnlijk het beste om je te concentreren op het gemakkelijk verteerbaar maken van de tekst. Je zult merken dat, terwijl het stuk van Bloomberg op Yahoo vrij raar begint, het hoofdgedeelte van de tekst gemakkelijk te lezen is.

Dus, wanneer u een blog aan het bouwen bent, is het beter om zich aan de conventies voor de inhoud van het artikel te houden. Bijvoorbeeld, BEDRADE Het ontwerp is behoorlijk onderscheidend, maar als het gaat om de artikelen zelf, gebruiken ze een aangenaam lettertype en houden het leesbaar.

Voor een ontwerper die meestal met stoffige bedrijven werkt, zou een experimentele portfolio de klant kunnen uitschakelen bij het meest essentiële moment-eerste contact.

Uiteindelijk komt het erop aan je publiek te kennen en of je weg kunt komen met volledig negerende conventies.

Ga heen en maak iets walgelijk briljant.