Ontwerpen met een grid, deel 1

9 maart 2009 om 14:35

De laatste 5 jaar is het web volwassener geworden: de toepassingen zijn serieuzer, gebruikers doelgerichter en dit heeft zijn weerslag op hoe we als designers en developers voor dit jonge medium werken. Voortschrijdend inzicht en technische vooruitgang hebben als gevolg dat de principes van grafisch ontwerp steeds meer toegepast worden door webdesigners.

Een van de basisprincipes van grafisch ontwerp is de grid. Een collectie van (denkbeeldige) horizontale en verticale lijnen waarop je de elementen van je ontwerp uitlijnt. En dat gebeurt heel erg veel: De grid wordt overal om je heen door mensen toegepast in boeken, tijdschriften, maar ook in stratenplannen, de inrichting van een winkel, kantoor of je huiskamer. Kijk een keer extra en je ziet: de grid is overal, hij zit ons mensen in het bloed. We willen structureren, categoriseren, hokjesdenken. Het is een manier om met de wereld om te gaan. In twee artikelen ga ik in op de geschiedenis van de grid, wat ie te maken heeft met webdesignen laat ik zien hoe je de grid kan toepassen op webontwerp.

Geschiedenis van de grid

300px-da_vinci_vitruve_luc_viatourKunst en grafisch ontwerp hebben elkaar altijd beïnvloed. Zo ook in het ontstaan van de grid. Geometrie en de Gulden Snede werden al door Leonardo Da Vinci toegepast: De natuur diende bij hem als leidraad voor systematisch werken in zijn kunst. Zijn “Man van Vitruvius” geldt als een schoolvoorbeeld van het streven naar wiskundige exactheid in de kunst. Dit principe zou in de 20e eeuw veel navolging krijgen.

Met name het Kubisme, het Modernisme en de daaruit voortvloeiende kunststromingen De Stijl, het Duitse Bauhaus en de Zwitserse Stijl, gebruikten geometrie en wiskunde als leidraad en waren daarmee van invloed op ALLE moderne grafische ontwerpers.

De Stijl

180px-mondrian_compryb

De Stijl was onder direkte invloed van het Kubisme zeer geometrisch, maar ging een tandje verder in het streven naar functionaliteit in de kunst. Grote vlakken, strakke lijnen en primaire kleuren. In het werk van Theo van Doesburg en Piet Mondriaan overheerst de geometrie en schilderijen van hen tonen al een strak lijnenspel en zijn al gebaseerd op een rudimentaire grid. Het blad “De Stijl” dat door de beweging werd uitgegeven was ook een vooruitstrevend en zeer strak ontworpen tijdschrift.

Bauhaus

566px-bauhaus-dessau_wohnheim_balkone

Het Duitse Bauhaus was net als De Stijl beinvloed door het Kubisme en zocht in haar uitingen verder naar doegerichtheid; wetenschap en de ratio waren leidraad, men zocht naar schoonheid in wat machines konden maken. Vorm en functie domineerden in architectuur, meubelontwerp en industrieel design. Ontwerpen werden nog strakker en functioneler. Begonnen als opleiding voor industriele vormgeving en architectuur ontwikkelde het Bauhaus later ook aanverwante opleidingen voor reclametechnieken, fotografie, typografie en tentoonstellingen. De grid was bij Bauhaus-ontwerpers al een veelgebruikt middel.

Zwitserse Stijl

gridsystems_thumb

De Zwitser Josef Muller-Brockmann tenslotte kwam van de Kunstgewerbeschule in Zurich en geldt als een van de meest toonaangevende Zwitserse ontwerpers aller tijden. Brockmann was een exponent van de “Zwitserse Stijl” , een ontwerpstijl die opviel door het gebruik van asymmetrische layouts, een grid, schreefloze letters en links strak uitgelijnde tekst. (* kuch* gaat er al een belletje rinkelen?) Typografie was daarnaast een belangrijk element bij de Zwisterse Stijl. Hij publiceerde in 1961 het boek: “Grid Systems in Graphic Design”, een betoog over het nut van de grid dat internationaal als een standaardwerk wordt beschouwd.

Midden jaren ’70 werd de grid als een standaardonderdeel van de opleiding tot grafisch ontwerper beschouwd in Europa, Noord-Amerika en Latijns-Amerika. Grids werden synoniem met corporate communicatie uitingen, en als reactie daarop sloegen ontwerpers als in de jaren ’80 soms een meer organische richting in. De grid wordt vandaag de dag nog steeds onderwezen op de kunstacademie, maar is niet meer leidend voor al het grafisch werk.

Wat heeft dit nou te maken met webdesign?

De Modernistische en Zwitserse designprincipes lenen zich, 80 jaar later, uitstekend voor het web. We kunnen zelfs met weinig fantasie een directe link leggen tussen De Stijl, Bauhaus, de Zwitserse Stijl en webdesign. De nadruk die bij deze stromingen lag en ligt op geometrie, functionaliteit, simpelheid, typografie en vlakverdeling lijkt wel ten grondslag te hebben gelegen aan de manier waarop websites worden opgebouwd. Immers, het web is een functioneel, technisch en gestandaardiseerd medium. Html en css zijn de gestandaardiseerde methode om websites te bouwen. We werken met een boxmodel. Het medium dicteert de vorm, en als webdesigners zoeken we naar de manier om schoonheid te creeeren in wat we maken voor het bekijken op een machine.

Webdesign, en grafisch ontwerp in het algemeen, gaat om het structureren van informatie. Het inzichtelijk maken wat niet direct duidelijk is. Communiceren.

De grid biedt je gebruiker of lezer houvast helpt om snel informatie te scannen of rustig te lezen, maar domineert niet de vormgeving. De grid gaat om gevoel. Je gebruikt ’em tijdens het proces, plaatst de elementen van je design op d e grid en als het goed is zie je de grid niet direct in het eindresultaat, maar voel je dat ie er is. De grid is dan ook geen rigide beperking, maar een manier om gecompliceerde informatie vorm te geven op een georganiseerde manier. De grid, kortom, geeft mensen een lekker georganiseerd gevoel.

In het volgende deel van deze serie laat ik je zien hoe je een grid kan toepassen in webdesign.

Over de auteur

  • http://www.joelcox.nl Joël Cox

    Leuk, wat achtergrond informatie. En het is waar, je ziet het werkelijk overal in terug.

  • http://www.marcel-xl.nl Marcel

    Een tip over grids: Hier een leuk grid voor prototyping: http://960.gs/ , incl. templates voor bijvoorbeeld photoshop etc!

  • http://www.renekreijveld.nl Rene Kreijveld

    Hier nog een goede grid: http://www.blueprintcss.org/ ,

  • http://jessevlasveld.nl Jesse Vlasveld

    Net.Tutsplus heeft een goede screencast als intro voor het (door Marcel genoemde) 960 Grid System. http://net.tutsplus.com/videos/screencasts/a-detailed-look-at-the-960-css-framework/

  • http://www.rutgerzandman.nl Rutger

    Dank voor de gridtips. Die worden meegenomen in deel twee :)

  • Gerwin
  • http://www.buromonster.nl tonijn

    Fluid grids… deze is echt prachtig:

    http://www.designinfluences.com/fluid960gs/

  • http://h3rj4n.nl Herjan

    Het gaat ten goede van je kwaliteit om ABN aan te houden. Vind het zelf prettiger lezen.

  • Luc

    De gulden snede; de moeder van alle lengte-breedte-verhoudingen en de basis van ons A4-tje

    Hoort eigenlijk ook in dit stukje geschiedenis.

  • http://www.weblicity.nl/ Benke

    Via onze Google Analytics zie ik dat er behoorlijk vaak op dit onderwerp wordt gezocht. Sinds ik met Grids (960.gs) ben gaan werken, zien m'n websites er ook een stuk strakker uit. Het gebruik maken van de CSS bestanden die bij het 960.gs framework worden meegeleverd, is alleen niet zo'n succes, mijn ervaring is dat je beter zelf de CSS nog kunt opmaken. Maar zoals gezegd je krjgt wel hele mooie en strakke Photoshop designs.