Schermformaat bepalen voor webontwerp

uit de cursus Website ontwerp met Illustrator

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

Webontwerp vanuit Adobe Illustrator

Je kunt Adobe Illustrator gebruiken om webpublicaties ontwerpen en daarna om te zetten in html en css. Illustrator biedt een aantal gereedschappen en opties waarmee je jouw ontwerp kunt exporteren voor webproducties.

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!

Doelgroep van deze cursus

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 Adobe Illustrator en je wilt websites ontwerpen om vervolgens bij een webbouwer aan te leveren, dan kan het handig zijn om deze cursus te volgen.

Wat ga je leren

Je bouwt stap voor stap een ontwerp voor een website op in Adobe Illustrator. Daarna leer je hoe je jouw illustrator-ontwerp omzet naar html-pagina’s en met behulp van css voorziet van de juiste vormgeving.

Vereiste voorkennis en vaardigheden

Voor deze cursus heb je goede kennis en vaardigheden nodig van Adobe Illustrator.

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.