Schermformaat bepalen voor webontwerp

In deze video behandel ik hoe je een document voor een webontwerp aanmaakt,

en welke voorkeursinstellingen je in illustrator kunt instellen.

Om het ontwerpen van weblayouts in Illustrator makkelijker en efficiënter te maken.

Je kijkt nu naar een voorbeeld van het ontwerp.

Hiervoor heb ik gebruik gemaakt van een grid en een kolomstramien.

Maak je namelijk goed gebruik van een grid en kolommen.

Dan zorg je ervoor dat een ontwerp altijd in evenwicht is.

Ongeacht waar je de kaders, afbeeldingen en teksten plaatst.

Maar we beginnen met het eerste wat je moet bepalen.

Namelijk het schermformaat waarvoor je een layout gaat ontwerpen.

Bij het ontwerpen houd je er direct rekening mee,

dat de browser zelf ook al een bepaald gebied ervan in beslag neemt.

Neem nou de adresbalk, bovenin het venster bijvoorbeeld.

Maar ook de ruimte die ingenomen wordt door bladwijzers of extra functionaliteiten.

Waarmee de bezoeker haar of zijn browser mee heeft uitgebreid.

Als er meer informatie op een pagina staat dan kan worden weergegeven.

Dan toont de browser automatisch een horizontale en/of verticale scrollbalk.

Daarnaast is het ook prettig om links en rechts van de weblayout lege ruimte te houden

En de website te centreren binnen het browservenster.

Dan komt een ontwerp beter tot zijn recht als dat deze van browserrand tot browserrand zou lopen.

Als eerste moet je dus kiezen voor een monitorformaat.

Op de website van 'wschools', vind je meer informatie over de meest gebruikte monitorformaten,

monitorresoluties en ook browsers.

Typ het zoekwoord 'browsers' in de zoekfunctie van deze website.

En bovenin de lijst vind je dan de Browser Statistics.

Op deze pagina kun je dus heel goed aflezen welke browsers het meest gebruikt worden op dit moment.

Met de data erbij, ook van voorgaande jaren.

Een volgend optie die hierbij zit, is de browser-display.

Op deze pagina wordt bijgehouden welke monitorresolutie het meest gebruikt wordt door browsers.

Bovenaan de tabel staat al aangegeven dat % van alle bezoekers,

een schermresolutie gebruikt van bij , of hoger.

Dus wil je vormgeven voor de meeste gebruikers.

Dan kies je dus voor x .

Als je de webpagina vrij wilt houden van de browser zijkanten.

Dan trek je ongeveer pixels in de breedte hier vanaf.

Dan kan de webpagina ook mooi gecentreerd worden.

Over de hoogte maken we ons over het algemeen minder druk

want we zijn al lang gewend om naar beneden te scrollen.

Alleen als je absoluut wilt dat alle inhoud direct op het scherm past.

Bijvoorbeeld voor de homepagina.

Dan houd je bijvoorbeeld een hoogte tussen en pixels aan.

Ik kies voor een ontwerp van x pixels

En hou er gewoon rekening mee dat de onderste tot pixels

eventueel buiten beeld verdwijnen en dat men dus naar beneden moet scrollen om dit te kunnen bekijken.