Skip to content

Instantly share code, notes, and snippets.

@vasilisvg
Created February 15, 2015 21:04
Show Gist options
  • Select an option

  • Save vasilisvg/fd84e67c51bb7e375091 to your computer and use it in GitHub Desktop.

Select an option

Save vasilisvg/fd84e67c51bb7e375091 to your computer and use it in GitHub Desktop.

Revisions

  1. vasilisvg created this gist Feb 15, 2015.
    35 changes: 35 additions & 0 deletions eindopdracht.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    # 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.