Skip to content

Instantly share code, notes, and snippets.

@vasilisvg
Created February 15, 2015 21:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vasilisvg/fd84e67c51bb7e375091 to your computer and use it in GitHub Desktop.
Save vasilisvg/fd84e67c51bb7e375091 to your computer and use it in GitHub Desktop.
Content voor de eindopdracht

Grids op papier, en grids op het web

Tijdens de eerste drie weken van de CMDA Minor Vormgeving hebben we ons naast typografie beziggehouden met grids. Grids zijn, simpel gezegd, hulplijnen die houvast bieden bij het maken van layouts. In deze drie weken hebben we ons de terminologie eigen gemaakt. We hebben een flink aantal verschillende, klassieke grids onderzocht. We hebben ook content geplaatst in drie verschillende soorten grids, op papier. En uiteindelijk hebben we een responsive grid ontworpen voor deze content.

Terminologie

Grids bestaan uit columns. Dat zijn er twee of meer naast elkaar. Veel grids hebben daarnaast ook rows, en dat zijn er meerdere onder elkaar. Zo’n systeem van columns en rows vormt een raster wat bestaat uit een aantal modules: de kleinst mogelijke cellen van een grid. Je kunt content in één zo’n module plaatsen, maar je kan ook meerdere modules samenvoegen tot een spatial zone. Vaak zit er wat ruimte tussen columns en rows. Dat noemen we gutters. De witruimte rondom het grid heet de margin.

Soorten grids

Er zijn meerdere soorten grids. We hebben er in deze drie weken drie onderzocht. Modular grids, compound grids en asymmetrische grids.

Modular grids

Modular grids bestaan uit rows en columns en zorgen zo voor een horizontaal én een verticaal ritme. Dit kan een prachtig, rustig resultaat opleveren zoals goed te zien is in de voorbeelden van Müller-Brockmann en van Vignelli. Modulaire grids zijn goed toe te passen op een medium waar je volledige controle over hebt (zoals papier), maar ze zijn minder geschikt voor chaotische platformen (zoals het web).

Compound grids

Soms is één grid niet voldoende voor de content waarmee gewerkt moet worden. In zo’n geval kan er gekozen worden voor een compound grid: een samenstelling van twee of meer verschillende grids. Een veelvoorkomend compound grid is een grid dat is samengesteld uit twee grids van drie en vier kolommen. De Guardian gebruikt dat bijvoorbeeld. Je ziet het ook veel in magazines. Maar er zijn veel meer samenstellingen mogelijk. Compound grids bieden over het algemeen zeer veel mogelijkheden. Het is aan de ontwerper om er geen zooitje van te maken, en om de grids te gebruiken als tool om eenheid te creëren.

Asymmetrische grids

Kolommen hoeven natuurlijk niet allemaal even breed te zijn. Kolommen van verschillende breedtes kunnen een zeer verrassend resultaat opleveren. Er zijn zeer veel manieren om een asymmetrisch grid te maken. Veel van deze grids zijn gebaseerd op veelvoorkomende verhoudingen, zoals de gulden snede of bijvoorbeeld ratios uit de muziek.

Grids op het web

Op het web werken rijen niet zo goed: we hebben namelijk te weinig controle over hoe de content gerenderd wordt. Over het algemeen wordt er op het web dus niet gewerkt met hele stricte rows. Kolommen daarentegen zijn prima bruikbaar. Maar hoeveel kolommen heb je nodig? Op papier is dat redelijk eenvoudig af te leiden uit het papierformaat en het soort (en de hoeveelheid) content. Op het web hebben we geen vaststaand formaat. We kunnen dus alleen afgaan op de content.

Grids gebaseerd op tekst

Er bestaat zoiets als een ideale breedte van lopende tekst. Dit wordt wel de measure genoemd. Deze is het liefst tussen de 20 en de 40em, en idealiter precies 30em. Dit geeft ons houvast voor het bepalen van het grid. De helft van de measure zou bijvoorbeeld een prima eenheid kunnen zijn. Of een derde. Deze werkwijze geeft ook een prima uitgangspunt voor breakpoints in een responsive design.

Grids gebaseerd op foto’s

Als foto’s, of banners, of iets ander van een vast formaat, de belangrijkste content vormen op een site dan kan er voor gekozen worden om dat als uitgangspunt te nemen. Dit biedt weer andere mogelijkheden.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment