Het indelen van een ontwerp van een website is anders dan het indelen van een ontwerp voor drukwerk. Bij drukwerk kan veel zolang je maar binnen de kaders blijft van je werkblad. Bij een ontwerp voor een website moet altijd rekening worden gehouden met een ontwerp voor 6 verschillende formaten. Omdat een website responsive is, kan deze een andere indeling hebben op elke stap binnen Bootstrap.
Bootstrap indeling
De standaard stappen zijn:
- 320 tot 575 pixels breed
- 576 tot 767 pixels breed
- 768 tot 991 pixels breed
- 992 tot 1199 pixels breed
- 1200 tot 1319 pixels breed
- 1320 pixels en breeder
Grofweg wordt van 320 tot 768 pixels getoond op mobiele telefoons en kleine tablets, van 768 tot 1200 pixels op tablets en laptops en alles van af 1200 pixels en er boven op desktop computers. Een enkele uitzondering daargelaten uiteraard.
Hou er ook rekening mee dat steeds meer mensen websites op hun mobiele telefoon bekijken. Op het moment van schrijven (jan 2022) bekijkt meer dan 54% van de bezoekers een website met een mobiele telefoon. Dit geldt misschien niet voor elke website, maar het is zeker iets om op te letten.
We kregen vaak te horen “Dit is het ontwerp voor de website en kunnen jullie zelf even de versie voor mobiel maken?”. Dat is voor ons geen probleem, maar wij zijn geen ontwerpers. Het is toch zonde als meer dan 50% van de bezoekers van de website naar een versie kijken die jij als ontwerper niet hebt gemaakt.
Mobile first indelen van een ontwerp van een website
Eigenlijk zou je met het oog op de toekomst ‘mobile first’ moeten ontwerpen. Het mobiele ontwerp is dan de basis en de tablet, laptop en desktop versie zijn afgeleid van het mobiele ontwerp. Dit is een hele andere manier van werken die wellicht niet bij jou als ontwerper past. Maar denk er op z’n minst wel er over na hoe de mobiele versie en de versie op tablets er uit moeten gaan zien.
Belangrijkste verschillen met het ontwerpen voor drukwerk
Het indelen van een ontwerp van een website verschilt op veel punten van het ontwerpen van een flyer, folder of brochure. De 4 belangrijkste vind je hieronder:
- Je ontwerpt in RGB kleuren en niet in CMYK kleuren. Daar kan je alles over lezen de pagina ‘kleuren’
- Je moet rekening houden met het 12 kolommen stramien van Bootstrap
- Je moet heel erg in horizontale banen denken de z.g.n. rows
- Ga het wiel niet opnieuw uitvinden
Punt 2, 3 en 4 gaan we uitleggen op deze pagina.
