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 en tekstvlakken overal even groot te laten zijn. Door met een grid te werken krijg je een strak ontwerp. Rust, ritme en regelmaat.

 

Opdracht

Ontwerp een website waarbij je gebruik maakt van een het 12 kolommen grid. Onderwerp van de site is een website voor het fictieve Youtube Short Film Festival horroreditie. Wanneer we kijken naar de websites van de concurrenten dan blijkt dat er weinig mooie horrorsites te vinden zijn! Dat kun jij beter!

A night of Horror

A night of Horror

New York horror film festival

New York horror film festival

Brooklyn horror festival

Brooklyn horror festival


Het Youtube Short Filmfestival horroreditie richt zich op jongeren die van griezelfilms houden. Al het beeldmateriaal wordt van Youtube verzameld en duurt per film niet langer dan 20 minuten. Er is een logo aangeleverd, een basisgrid en extra beeldmateriaal.

Maak ten minste een homepage en een pagina met het overzicht van de films. Heb je tijd genoeg? Dan kun je ook een pagina ontwerpen waarop je meer informatie van een film kunt zien, of een pagina met het complete programma.
Bedenk goed wat er op de site moet komen. Bijvoorbeeld:

  • De naam van het festival (YSFF)
  • Waar het festival is (verzin zelf wat)
  • Wat het kost
  • Het programma
  • Een aantal films (plaats screenshots van Youtube filmpjes of bijgeleverde plaatjes)

Je kunt er voor kiezen om een hele lange website te maken. Dat heet een one page layout; alle pagina’s staan dan als het ware onder elkaar. Maar je kunt er ook voor kiezen om twee aparte schermen te maken. Gebruik een 12-kolommen grid als basis voor je layout.

Je mag neptekst gebruiken als tekst of je kopieert tekst van een bestaand horrorfestival. Neptekst is een stuk Latijnse tekst en wat meestal begint met “Lorem ipsum”. Voordeel hiervan is dat niemand je tekst gaat lezen (en corrigeren) maar naar je ontwerp kijkt. Je kunt lorem ipsum tekst kopiëren vanaf de site lipsum.com.

Aangeleverd

Download benodigdheden
Bij de benodigdheden vind je een Photoshop bestand en een PNG bestand met daarin de 12 kolommen. Werk in dit bestand verder en gebruik de layout voor je maatvoering. Ook vind je het logo (als Illustrator file) en een heel scala aan foto’s. Uiteraard mag je zelf andere foto’s zoeken.

 

Wat is een 12 kolommen grid

Dit is een grid waarbij over een bepaalde breedte 12 kolommen zijn gemaakt. Deze kolommen hebben gelijke breedte.
Tussen de kolommen zit steeds evenveel witruimte. Onderdelen van je website (zoals een stuk tekst) is dan net zo breed als een aantal kolommen. Je houdt steeds 12 kolommen OOK wanneer je scherm verandert van laptop naar smartphone.

12 Kolommen grid

1 grid voor verschillende schermbreedtes

1 grid voor verschillende schermbreedtes

Afhankelijk voor je beeldscherm deel je met behulp van het grid je content in


Het kan zo zijn dat een afbeelding, welke op een laptop 6 kolommen breed is, op een smartphone 12 kolommen breed is. In gewone mensen taal: op de laptop is de afbeelding de helft van de breedte van het beeldscherm, op de smartphone is de afbeelding net zo breed als het hele scherm.

Nog meer grids

Er zijn veel grids; je kunt er ook zelf een opzetten maar de volgende drie zijn erg bekend:

Kolommen grid
12 kolommen grid

12 kolommen grid

Thomas Robin

Thomas Robin 12 kolommen grid


 

Folio grid (Pinterest)

Dit grid is voor het eerst gebruikt door Pinterest. Er worden boxen gebruikt maar deze kunnen van verschillende hoogte zijn. Als een soort gemetseld muurtje stapelen die boxen op elkaar.

Pinterest layout

Pinterest layout

Teruhiro Yanagihara

Teruhiro Yanagihara, Folio layout


 

Box grid

Dit is een grid waarbij er een strak stramien horizontaal en verticaal gebruikt wordt.

boxgrid

boxgrid

Curioos boxgrid

Curioos box layout


 

Hoe begin ik?

Op https://960.gs/ kun je een zip bestand downloaden waarin je, in de map Templates, Photoshop en Illustrator templates kunt vinden. Deze psd of ai bestanden kun je gebruiken als startpunt van je site. Let op: je kunt hier kiezen voor een 12 kolommen grid, een 16 kolommen grid of een 24 kolommen grid. Open een .ai bestand in Illustrator en een .psd bestand in Photoshop. Werk vervolgens in lagen zodat je het grid altijd boven je eigen ontwerp houdt. Je kunt de layer met het grid op slot zetten in Photoshop en Illustrator zodat deze niet meer beweegt of verschuift. Vraag je docent eventueel hoe dat moet.

690 folder

690 folder

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

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.

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.