Een digitale, responsive versie van Wim Crouwel’s affiche Vormen van de kleur

Gepubliceerd op door Wouter van der Zee

Wim Crouwel is een beroemde Nederlandse grafisch ontwerper. Hij is bekend om zijn minimalistische ontwerpen waarbij voornamelijk typografie en een strak onderliggend grid gebruikt worden. Van Crouwel’s affiche Vormen van de kleur heb ik een digitale, responsive versie gemaakt.

Aanleiding hiervoor is het willen leren van Macaw Een nieuw webdesignprogramma, zie ook de website van Macaw., een nieuw programma voor webdesigners. De demo van het affiche heb ik met Macaw gemaakt. Bovendien vind ik het interessant het gebruikte grid te analyseren. Dit grid helpt bij het maken van andere formaten van het affiche.

Ik ben een groot fan van Wim Crouwel en deel zijn voorliefde voor typografie en grid systemen. Bovendien is Crouwel docent geweest bij de opleiding Industrieel Ontwerpen op de TU Delft, de studie die ik ook gevolgd heb. Ik heb dus wel wat met Crouwel.

De vormen van der kleur

Affiche Vormen van de kleur van Wim Crouwel, 95x64 cm.
Affiche Vormen van de kleur van Wim Crouwel, 95 bij 64 cm.

De Vormen van kleur is een affiche Affiche zoals weergegeven in de uitgave Kunst + Design, Wim Crouwel, Preisträger der Stankowski-Stiftung 1991. voor de gelijknamige tentoonstelling in het Stedelijk Museum Amsterdam en is gemaakt in 1967 (dat is dus bijna vijftig jaar geleden). Het affiche heeft een helderrode achtergrondkleur met een groene constrasterende halve ring aan de bovenkant. De rest van het affiche bestaat uit typografie. De afmetingen van het affiche zijn 95×64 cm.

Grid

Om een digitale, responsive versie van dit affiche te maken, heb ik eerst het door Crouwel gebruikte grid geanalyseerd. Dit maakt het eenvoudiger om andere formaten van het affiche te maken. Ik heb niet van tevoren uitgezocht welk grid Crouwel gebruikt heeft. Met mijn analyse kan ik er dus naast zitten. Voor zover mij bekend is gebruikte Crouwel voor bijna al zijn affiches voor het Stedelijk Museum hetzelfde onderliggende grid. Het grid bestaat uit een raster van rijen en kolommen. Elke rij en kolom is opgedeeld in een aantal vierkanten (units). De hoogte en breedte van een unit zijn een veelvoud van de tussenruimte tussen de kolommen en rijen (Engelse term: gutter). Dit grid lijkt echter niet gebruikt te zijn. Vooral de marges van het grid aan de zijkant komen niet overeen met die van het affiche. Ik ben uitgekomen op een grid met een unit van 72×72 mm, acht kolommen, twaalf rijen en een gutter van 8 mm (dat is 1/9 deel van de unit).

Wim Crouwel Vormen van de kleur, analyse grid.
(links) Grid zoals waarschijnlijk door Crouwel gebruikt, (midden) 64x64 grid, (rechts) 72x72 grid.

Smartphones en kleine schermen

De digitale, responsive versie van het affiche bestaat uit twee formaten. Een smalle versie voor smartphones en het originele formaat voor grotere schermen Voor het gemak heb ik de afmetingen van het affiche in mm rechtstreeks omgezet naar px. Dat zal niet altijd juist zijn, maar voor deze excertitie volstaat het.. Voor de smalle, smartphone versie heb ik gekozen voor een schermbreedte van 320 px. Dat is ongeveer de helft van het originele formaat.

Verder heb ik mijzelf de beperking opgelegd de lettergrootte van alle tekst gelijk te houden. Dit maakt de uitdaging groter en leuker.

Smalle versie affiche Vormen van de kleur, rechts met gebruikt grid.

Hier kun je de responsive versie van het affiche te zien.

Omdat Crouwel gebruik gemaakt heeft van een grid, was het maken van de smalle versie relatief eenvoudig. De smalle versie heeft vier kolommen en de onderdelen zijn – net als bij het origineel – uitgelijnd op het grid. Deze oefening toont voor mij aan dat het werken met grids voor ontwerpen in het algemeen en responsive webdesign in het bijzonder een goed bruikbaar middel is.