Werken met een grid

Een grid is een opzet bestaande uit horizontale en verticale lijnen wat gebruikt wordt om je content mee te verdelen. Een grid helpt je om ruimte tussen kolommen, afbeeldingen etc overal even groot te laten zijn. Er zijn veel grids; je kunt er ook zelf een opzetten maar de volgende drie zijn erg bekend:

Kolommen grid kolommen grid
Folio grid (Pinterest) folio grid
Gulden Snede gulden-snede

 

Video’tje kijken?

In deze video bespreekt de maker een aantal voorbeelden van websites welke volgens een grid ontworpen zijn.

Een video over hoe je het 960px grid kunt toepassen in je CSS. Hiervoor moet je wel een goed begrip hebben van het boxmodel en hoe floating elementen werken! Deze docent heeft meerdere video’s geplaatst die hier op ingaan.

Tip: als je bij Google zoekt op “webdesign grid” en bij de resultaten Video aanklikt dan krijg je veel resultaten!

 

Links

Echter, zeer veel grids zijn kolommengrids. Je kunt van alles downloaden, zelfs grids die al kant en klaar in je HTML pagina te voegen zijn. Zie http://goldengridsystem.com/ of http://www.responsivegridsystem.com/ als voorbeelden. En welbeschouwd is Bootstrap ook een grid systeem.

http://www.designersinsights.com/designer-resources/using-layout-grids-effectively voor een overzicht van een aantal grids

http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/ voor een artikel over ontwerpen met een grid. Het artikel is al uit 2007 maar nog steeds te gebruiken.