Richtlijnen aanlevering website ontwerpen

memento werkt voor een breed scala aan opdrachtgevers en naast haar eigen klanten ook voor verscheidene marketing en campagne bureaus.

Vaak verzorgen wij in opdracht van deze bureaus de techniek in en achter de website. Deze websites zijn vaak onderdeel van een grotere campagne met uitingen in zowel print als overige type media (radio, TV, etc…). Omdat deze bureaus goed in staat zijn in-house het ontwerp te verzorgen van de de campagne, wordt het ontwerpen van de ‘campagne-website’ vaak hierin meegenomen.

Echter, dient bij het ontwerpen van een website wel rekening gehouden te worden met de technische (on)mogelijkheden. Zeker omdat de ontwikkelingen op het internet zeer snel gaan is dat niet altijd even gemakkelijk. Toch zijn er enkele basis principes waar je rekening mee dient te houden bij het ontwerpen van een website.

Ontwerp:

Een website kun je het best ontwerpen in een pixel-georienteerd grafisch programma als GIMP of Adobe Photoshop. In principe is een website ook te ontwerpen in bijvoorbeeld Adobe Illustrator, echter moet de website dan wel worden ontworpen mbv. pixel-preview.

Resolutie ontwerp:

De ontwerpen dienen kleiner te zijn dan de daadwerkelijke schermresolutie ivm de ruimte die bv. de taakbalk, browser-buttons, adres-balk en scroll-balk(en) innemen.
Voor minimaal 1280 x 1024 ontwerp in 1240 x 854 pixels
Voor minimaal 1024 x 768 ontwerp in 984 x 598 pixels
Voor minimaal 800 x 600 ontwerp in 760 x 430 pixels

Wat gebeurt bij een hogere resolutie?

Wordt de tekst breder (liquid) of krijgt men een groter deel van de achtergrond te zien?

DPI is niet van toepassing voor web-ontwerpen. Een scherm kent enkel pixels en vandaar dat pixels alleen van belang zijn in website-ontwerpen. Standaard kan dus gewoon 72DPI worden gehanteerd in photoshop.

Fontgebruik

Algemene tekstgebruik voor HTML website:
- Arial
- Verdana
- Trebuchet MS
- Times New Roman
- Courier (New)
- Comic Sans
- Sans-Serif
- Georgia
Geadviseerd wordt om maximaal 2 lettertypes door te voeren in de website (bijv. navigatie: Arial, tekst: Verdana). Dit ivm rust en consistentie in de vormgeving.

Vaste titels of headers in de website kunnen wel andere type fonts gebruiken, in dat geval kunnen we technieken gebruiken als sIFR of Cufón. Bovenstaande fonts worden standaard ondersteund door MS Windows, Apple Macintosh (OSX) en Linux systemen. Verdana heeft de voorkeur omdat het font is ontworpen voor gebruik op schermen.

Font-grootte:

Tussen 9px – 12 px (pixels)

Een font werkt het optimaal voor een beeldscherm tussen de 9 pixels en 12 pixels (geen punten). Hierbij is 9 pixels klein en 12 pixels groot.

Font-opmaak:

Non aliased (none ipv smooth in photoshop)

Standaard worden fonts in een browser weergegeven zonder ‘smooth aliasing’. Standaard op OSX en Windows pc’s vanaf IE7 hebben de mogelijkheid om fonts smooth weer te geven. Echter zal het meerendeel van de bezoekers de website zo niet zien. Vandaar dat wij adviseren een site te ontwerpen zoals de meerderheid van de bezoekers de site zullen ervaren.

Tekst-breedte:

Maximaal 500px breed

Maak ruimte voor de tekst niet te breed. Anders dan in magazines heeft dit directe invloed op de leesbaarheid bij lezen van een (computer)scherm. Het is lastig de volgende regel gevoelsmatig te vinden bij het lezen van scherm met brede tekst-regels.

Nieuws:

Een dynamisch systeem bied zeer veel mogelijkheden om informatie op te slaan en aan te bieden voor bezoekers van gebruikers. Echter moet in het ontwerp daar wel rekening mee worden gehouden.

Nieuws; hoeveel nieuwsberichten worden er standaard getoond op de website. Wordt er een datum getoond, is de titel klikbaar of staat er lees meer bij? Heeft een nieuws intro tekst met of zonder afbeelding? Als er minder nieuwsberichten getoond worden, hoe ziet de vormgeving er dan uit?
Nieuwsarchief; Zodra er meer dan een x aantal nieuwsberichten op de website beschikbaar zijn gaan de oudere berichten direct naar het archief toe. Is dit archief zichtbaar? (bv. Link: “Bekijk archief »”). En zoja, hoe worden de oudere nieuws-items aangeboden? (Idem voor poll)

Formulieren:

Welke velden hebben de verschillende formulieren (bv. naam, adres, e-mail, etc)?
Op welk(e) mail-adres(sen) moeten de formulieren op worden ontvangen?
Welke velden zijn verplicht? Welk melding krijgt de gebruiker op welke manier bij het niet volledig invullen van het formulier?
Welke tekst krijgt de gebruiker te zien zodra men het formulier heeft verstuurd?

Kleurgebruik:

Probeer voldoende contrast te verwerken in de verschillende elementen van de website (b.v. bij donkere achtergrond witte teksten ipv grijs)
Hanteer HEX waarden voor kleuren in de website. (bv #FF3300).
Ontwerp de website in RGB ipv. CMYK ivm kleurcodering door monitoren
Het is niet nodig enkel de web-palette kleuren te gebruiken in photoshop. Op dit moment heeft meer dan 98% van de gebruikers zijn beeldscherm ingesteld op 16bit of meer.

Navigatie:

Hoe ziet een menu-item eruit zodra men zich in de desbetreffende pagina bevindt? (highlighted) Hoe reageert de navigatie zodra men met de muis over de link gaat (mouse-over)
Hoe ziet een link in de tekst eruit en hoe reageert deze zodra men met de muis erover navigeert (color, underline, etc).

Schermverdeling:

Bezoekers van websites bekijken websites intuïtief. De bezoeker ‘scant’ een webpagina van linksboven naar rechtsonder. Op basis van deze kennis is het raadzaam belangrijke zaken ((primaire) navigatie, broodkruimels, logo en pay-off) te plaatsen aan de linker- of bovenzijde van de website.

Templates:

Dynamische websites maken gebruik van templates. Deze templates hebben enkele randvoorwaarden voor een juiste werking.

Gebruik vaste breedtes en hoogtes voor afbeeldingen; vaste afmetingen voor afbeeldingen in tekstpagina’s, links en bv. nieuws.
Welke verschillende templates zijn er voor een pagina en met welke vaste onderdelen? (Bv. elke pagina heeft een titel, intro, shout-out en tekst met afbeeldingen).

Neem contact met ons op als u hulp nodig heeft bij het ontwerpen van uw website.