Schermformaat bepalen voor webontwerp

uit de cursus Website ontwerp met Illustrator

Hallo vreemdeling,

wat leuk dat je onze site bezoekt. Bekijk gerust een paar video's en als het je bevalt kun je altijd abonnee worden.

Automatisch afspelen

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Website ontwerp met Illustrator

perm_identity Belinda | video_library 41 video's | query_builder 02:20:39

Wil je websites ontwerpen, ben je vaardig in Illustrator en beheers je HTML en CSS dan leer je in deze online videocursus hoe je snel en efficiënt websites kunt ontwerpen in Illustrator. Je bent dan daarna nog vrij en flexibel om wijzigingen in je ontwerp te maken.

Het ontwerp kun je daarna omzetten in HTML en CSS. Ook als je geen HTML en CSS beheerst maar wel websites wilt ontwerpen om vervolgens bij een webbouwer aan te leveren is het handig om deze cursus te volgen.

De mogelijkheden en onmogelijkheden van webdesign

Heb je inzicht in de mogelijkheden en onmogelijkheden van webdesign dan helpt dit in de communicatie en samenwerking met de webbouwer. Je bespaart tijd als je niet het onmogelijke ontworpen hebt, maar leert werken binnen de begrenzingen van wat er mogelijk is met HTML en CSS. Je zult zien dat je ontwerp dan beter geschikt is om ook daadwerkelijk volgens jouw idee uitgevoerd te kunnen worden. Kortom ontwerp binnen de mogelijkheden!

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.