Grids en responsive design
Deze module gaat over vlakverdeling. Vlakverdeling is de manier waarop de verschillende onderdelen van een app of webpagina geplaatst worden op de pagina. Vlakverdeling maak je met behulp van grids. Een grid-systeem is eigenlijk een “raster”-systeem dat door middel van een aantal horizontale en verticale lijnen een gebruiker de kans geeft om dingen beter uit te lijnen of te plaatsen zonder al te veel moeite.
Ieder design zou vanuit een duidelijk grid systeem moeten vertrekken. Of het nu gaat om print- of webdesign.
Ontwerpers worden geconfronteerd met het vinden van oplossingen voor visuele en organisatorische problemen. Een aanpak voor het oplossen van deze problemen is bijvoorbeeld een grid. Het is niet de enige benadering, maar het is er wel één met een aantal belangrijke voordelen.
- Duidelijkheid — Grids zorgen voor duidelijkheid en efficiëntie zodat het makkelijker is voor gebruikers om te navigeren door de site.
- Efficiëntie — Grids geven ontwerpers/developers de kans om snel elementen toe te voegen aan een layout zonder dat daarmee de huidige structuur in de war raakt.
- Samenwerken — Grids maken het makkelijker voor ontwerpers/developers om samen te werken aan een project omdat alle basiselementen al een “plek” hebben.
- Samenhang — Grids leiden tot samenhang en structuur die doorgevoerd kan worden zonder al te veel moeite. (dus ook voor vervolgpagina’s en dergelijke). Dit zorgt voor rust en structuur.
De variatie aan apparaten die we dagelijks gebruiken om een website te bekijken wordt steeds groter. Je moet daarom je website geschikt maken voor gebruik op zowel smart-tv, desktop, tablet, als smartphone. Deze optimalisatieslag maak je met ‘responsive design’. Meer dan de helft van alle gebruikers bekijken een website op hun mobile.
Doel van deze module
Je leert in deze module hoe een goed design maakt met behulp van grid. Je leert hoe je vanaf het begin van het ontwerpproces grid gebruikt voor het uitlijnen bij het schetsen en bij het maken van wireframes. Je leert hoe je het ontwerp omzet in een op het grid gebaseerde css.
Verder leer je hoe je een grid kunt gebruiken bij het responsive maken van een pagina.
Hoe is de training opgebouwd?
Deze module bestaat uit twee hoofdstukken.
- Grid
- Mobile design
Wat moet je kunnen/ kennen/ bewijzen aan het eind van deze training?
Aan het eind van deze training weet je
- wat grids zijn en kun je ze gebruiken
- wat er verstaan wordt onder een mobile design en op welke manieren je een app/ site responsief kan maken
Je bewijst deze kennis in de eindopdracht.
Waar kun je nog meer informatie vinden over het onderwerp van deze training?
Er is veel informatie te vinden op internet over grids en resonsive design. Een aantal voorbeelden zijn: