Uitgelichte case

CSS Zen Garden

Een demonstratie van wat je met puur CSS-design kunt bereiken.

Hero-afbeelding van CSS Zen Garden

Overzicht

CSS Zen Garden is een wereldwijde designuitdaging die de schoonheid en het potentieel van CSS toont. Deelnemers krijgen een vast HTML-bestand en moeten met alleen CSS compleet verschillende ontwerpen maken.

In dit project onderzocht ik twee duidelijke architecturale stijlen — Classicisme en Brutalisme — en vertaalde ik hun unieke kenmerken naar digitaal design. Het doel was om te tonen hoe visuele sfeer en storytelling kunnen werken zonder de onderliggende HTML aan te passen, louter via styling.

Rol

CSS-designer met focus op visuele systemen, sfeer en structuur.

Focus

Eén HTML-structuur omzetten naar twee duidelijke kunstzinnige richtingen: classicisme en brutalisme.

Middelen

Puur HTML en CSS, met layout, pseudo-elementen en responsive styling.

Proces

1. Research

Ik begon met onderzoek naar classicisme en brutalisme. Voor classicisme bestudeerde ik symmetrie, balans en ornamentele details, terwijl ik bij brutalisme focuste op ruwe, onbewerkte structuren, sterke materialen zoals beton en een eerlijke vormentaal.

Dat onderzoek legde het conceptuele fundament en hielp me om visuele kernwoorden per stijl te bepalen: simpel, gebalanceerd, harmonieus voor classicisme en ruw, uitgesproken, functioneel voor brutalisme.

2. Schetsen en wireframes

Op basis van mijn onderzoek maakte ik moodboards en haalde ik inspiratie uit verschillende beelden. Ik hield dezelfde HTML-structuur aan, maar veranderde de visuele ervaring drastisch via doordachte CSS-keuzes.

Schetsen en notities voor classicisme Moodboard voor classicisme Inspiratie voor brutalisme

3. Ontwerp en prototyping

Daarna begon ik direct in de browser te prototypen, met puur HTML en CSS zonder externe frameworks. Belangrijke technieken waren onder meer:

  • Geavanceerde CSS Grid- en Flexbox-layouts
  • Gebruik van pseudo-elementen (::before en ::after) voor decoratieve accenten

4. Eindresultaat

Het eindresultaat bestaat uit twee duidelijk verschillende visuele thema’s:

  • Classicisme: met elegante seriflettertypes, gebalanceerde grids, pastelkleurige paletten en ornamenten die traditie en verfijning oproepen.
  • Brutalisme: met krachtige schreefloze lettertypes, monochrome en grijstonen, blokkerige layouts en een minimalistische, ruwe uitstraling die aansluit bij de brutale vormentaal.

Dit project heeft niet alleen mijn CSS-vaardigheden versterkt, maar ook mijn begrip verdiept van hoe ontwerpprincipes digitaal kunnen worden geabstraheerd en gecommuniceerd.

In één oogopslag

Probleem

Eén vaste HTML-structuur leesbaar houden terwijl het visuele resultaat totaal anders aanvoelt.

Aanpak

Met alleen CSS, typografie en spacing twee contrasterende sferen opbouwen.

Inzicht

Ik kan CSS inzetten als ontwerpmiddel, niet alleen als stijllaag.

Galerij

Brutalisme Screenshot van het uiteindelijke webdesign

Waarom deze case telt

Dit project is het duidelijkste bewijs van technische visuele controle in mijn portfolio. Het toont dat ik begrijp hoe ver CSS kan worden doorgedreven wanneer layout, typografie en sfeer als één systeem worden benaderd.

← Back to Projects