Aflevering 1 – Het ontwerp van een website

Geplaatst op door Tom van Leeuwen

Een van de eerste stappen die gezet moeten worden bij het maken van een website is het ontwerp. Je moet nadenken over kleuren, vormen, opmaak, volgorde etc. om een samenhangend geheel te krijgen. Waar moet de focus op komen te liggen en wat moet de website uitstralen?

De eerste Webmee.tv aflevering gaat over vormgeving. Froukje gaat op bezoek bij jonge ondernemers die zelf in de opstartfase zitten. Zij helpen Froukje op weg met informatie over waarop zij moet letten bij het design van haar website en vertellen waarom hun site zo succesvol is geworden.

Daarna gaat Froukje op bezoek bij het creatieve interactieve bureau Toscani waar zij hulp krijgt bij het ontwerpen van haar eigen site. In de eerste aflevering gaat Relinde op bezoek bij Netprofiler. Bij Netprofiler doen ze onderzoek naar de gebruiksvriendelijkheid van de site, de usability. Dit doen zij door middel van eye-tracking. Hoe dat in zijn werk gaat zie je allemaal in de eerste aflevering!

Meer over vormgeving

Stramien
Als je een website gaat ontwerpen is het handig om eerst op papier te beginnen met een schets waarin je de grote lijnen van de site uiteen zet. Dit heet ook wel een wire-frame/ stramien. Een duidelijke opzet helpt je bezoekers bij het navigeren. Onderstaand stramien verteld de belangrijkste elementen van een website en op welke posities deze elementen moeten staan. We zullen de verschillende elementen kort doorlopen.

Header
De header (kop) is de bovenkant van de website. In de header staat vaak het logo zodat duidelijk is op welke site de bezoeker zit en staan vaak de belangrijkste contactgegevens. De header kan je voorzien van een afbeelding, slogan of kleuren.

Logo
Het logo staat bijna altijd in de header aan de linkerkant van de website. Dit is namelijk de plek waar de bezoeker het logo verwacht. Het logo kan je naar de homepage toe linken, zo kunnen je bezoekers altijd gemakkelijk weer terug naar home. Heb je nog geen logo voor je website kan je ook grote letters op die plek toevoegen in een mooi lettertype.

Menu
Het menu zit vaak horizontaal onder de header. Ook zie je het menu vaak verticaal aan de linkerkant van de website. Er zijn diverse manieren om een menu vorm te geven, zoals:

  • een dropdown menu (hierbij komt er een submenu naar beneden schuiven als je er met je muis overheen gaat),
  • een fly-out menu (hetzelfde als een dropdown alleen dan horizontaal),
  • een horizontaal menu (een menu met alle menu-items naast elkaar),
  • een verticaal menu (een menu met menu-items onder elkaar),
  • een tab menu (een menu op basis van tabbladen waarbij elk tabblad een submenu kan bevatten).

Bij het ontwerpen van het menu dien je rekening te houden met alle menu-items die erin moeten komen. Zorg dat de belangrijkste items van je website in het hoofdmenu staan. Werken met een submenu is ook mogelijk, zo geef je de items die toebehoren aan het hoofdmenu ook de nodige aandacht. Het voordeel van een submenu is dat het hoofdmenu niet te vol komt te staan.

Zoeken
Als je veel informatie op je website hebt staan is het handig als je bezoekers de mogelijkheid hebben om te zoeken op de website. Geef het zoekveld een duidelijke plaats zodat er geen onduidelijkheid is over waar de bezoeker een zoekopdracht kan ingeven.

Content
Het belangrijkste element van je website is de plaats waar je de content (inhoud) gaat publiceren. Zorg voor een overzichtelijke opmaak van teksten door het kiezen van een duidelijk lettertype en maak subtiel gebruik van afbeeldingen.

Boven de inhoud van je site kan je breadcrumbs weergeven. Dit is een kort navigatiepad welke laat zien waar je momenteel op de site bent. Zit je bijvoorbeeld op de diensten prijzen pagina ziet de breadcrumb er zo uit: Home > Webdesign > Prijzen. De woorden zijn klikbaar zodat je gemakkelijk een “pad hoger” in de website kunt gaan.

Footer
Net zoals je de bovenkant van je website begint met een header sluit je de website af met een footer (onderkant). In de footer kan je de contactgegevens nogmaals herhalen en eventueel linkjes plaatsen naar een disclaimer, algemene voorwaarden of copyright informatie. In een footer zie je ook vaak menu-items staan die geen plek hebben kunnen krijgen in het hoofdmenu.

Kleuren
Na het bepalen van de opbouw is een belangrijke keuze bij het ontwerpen van een site natuurlijk welke kleuren je gaat gebruiken. Kleuren die je uitkiest moeten ook bij elkaar passen. Er zijn diverse sites waar je terecht kunt ter inspiratie. Op de site van Adobe kan je zien welke kleuren goed bij elkaar passen. Bekijk ook de site van CSSdrive eens, zij hebben een kleurengenerator die op basis van een zelf te uploaden foto het passende kleurenpalet geeft. Als je een bestaand logo hebt kan je natuurlijk deze kleuren verwerken in het ontwerp van de website.

Lettertype
Welk lettertype ga je gebruiken voor je site? Arial en Verdana zijn de meest gebruikte lettertypen, maar er zijn er nog veel meer. Let bij de keuze van het lettertype op de leesbaarheid. Het lettertype moet voldoende groot zijn om gemakkelijk te lezen en voorzien zijn van voldoende regelafstand. De regelafstand is de hoeveelheid witruimte tussen de regels. Maak de regels ook niet te breed. Brede teksten zijn lastiger te lezen.

Proberen
Een goed ontwerp heb je niet zomaar gemaakt. Maak meerdere schetsen en probeer diverse varianten uit. Het uitwerken van een ontwerp kan goed in een programma als Photoshop. Vraag ook aan anderen om hun mening over het door jou gemaakte ontwerp. Veel succes met het ontwerpen van je site!


avatar

Over Tom van Leeuwen

Tom van Leeuwen is werkzaam als Manager Marketing & Sales bij Argeweb. Zijn passie voor e-commerce en zoekmachine marketing zet hij in om klanten een nog betere online ervaring te bieden.


Geef een reactie

Jouw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *