Home » Artikelen » Ontwerpen voor het web

Ontwerpen voor het web

Geplaatst op 28-09-2009 in Advies

Dit artikel is bedoeld voor ontwerpers die weinig ervaring hebben met het ontwerpen van websites.

Van Grafisch vormgeving naar Interactie ontwerp

De rol van de designer verandert langzaam van grafisch vormgever naar interactie ontwerper. Vroeger werd er een aantrekkelijke website gemaakt die de klant zelf kon aanpassen. Nu vraagt men om een gebruiksvriendelijke website die goed gevonden wordt in zoekmachines als Google. Niet de opdrachtgever, maar de bezoeker staat centraal. Dit vraagt om een andere aanpak, behalve de vormgeving is er ook een interactie ontwerp nodig.

Ontwerp meer dan een screenshot

Waar een goede website bij valt of staat is de user interface. Is de beoogde applicatie intuïtief? Behalve de lay-out is het dus ook belangrijk de verschillende interfaces te ontwerpen van cruciale pagina's in de website. Vooral pagina's die interactie vergen met de bezoeker moeten dus uitgedacht en uitgewerkt worden. Voor veel van deze interacties zijn echter al design patterns bedacht die zich reeds bewezen hebben. Kijk voor een goed overzicht op: http://developer.yahoo.com/ypatterns/

Proces

Het interactie ontwerp wordt als eerste gemaakt in het ontwerpproces. Maak voor iedere pagina waar interactie vereist is een interactie ontwerp. Zo weet je zeker dat je alle elementen op de pagina kwijt kunt. Zorg dat je akkoord krijgt op dit interactie ontwerp voordat je over gaat tot vormgeving. Stuur het interactie ontwerp ook vast naar Yes2web, dan krijg je in een vroeg stadium al feedback op de usability.

Wireframes

De meest gebruikte vorm van interactie ontwerp zijn wireframes: een schets met alleen maar vakjes met de verschillende pagina elementen. Dit kan in gemaakt worden in Balsamiq, Microsoft Visio, Powerpoint of OmniGraffle. Onder het kopje Downloads onderaan vind je een aantal bestanden met standaard elementen die je kunt gebruiken om snel een wireframe in elkaar te zetten.

Usability Design

Don't Make Me ThinkStel de bezoeker voorop, de website-eigenaar volgt vanzelf. Natuurlijk moet een website er goed uit zien, goede vormgeving draagt bij aan een positieve perceptie van gebruiksvriendelijkheid. Maar vergeet niet waar de bezoeker voor komt: Hij is op zoek naar informatie, niet op zoek naar een mooie website. De bezoeker wil snel teksten kunnen scannen, dus maak het tekst oppervlak groot. Hij wil snel door kunnen klikken, dus geef links een opvallende kleur en een underline. Hij is super ongeduldig, dus zadel hem niet op met het introductiefilmpje waar de opdrachtgever zo vaak om vraagt. De uitdaging ligt erin de opdrachtgever hier ook van te overtuigen, want vaak ziet deze de website alleen maar als "plaatje" en zal hij nooit in zijn eigen website op zoek gaan naar informatie.

Een interessant boek over usability is "Don't make me think" van Steve Krug.

Screen size matters

Schermen hebben verschillende afmetingen, gemeten in pixels. Als we een website ontwerpen, hebben we niets te maken met DPI: er wordt altijd gewerkt met pixels, nooit met mm, cm of inches. Daarom ligt het ook voor de hand te ontwerpen in Photoshop, dit programma maakt alles op in pixels, zodat deze 1-op-1 kunnen worden overgezet in een website. Vector-programma's (zoals Illustrator of InDesign) produceren nooit haarscherpe lijnen van 1 pixel, omdat zo'n vector nooit exact over 1 pixel in Photoshop valt, waardoor een wazige omzetting ontstaat.

Bij het ontwerpen van een website moeten er een aantal keuzes gemaakt worden met betrekking tot de schermgrootte. We hebben de keuze de hoogte en breed vast te zetten (fixed) of flexibel te laten (fluid).

Breedte

Allereerst de breedte: Indien de breedte vast gezet wordt op bijvoorbeeld 999 pixels, kan iedereen met een breder scherm (1024, 1280, 1440 of 1600 pixels) de volledige breedte zien. Bezoekers met een schermbreedte van 800 pixels missen echter 1/5 van de website, omdat ze horizontaal moeten scrollen. Gelukkig ligt het percentage bezoekers met een dergelijk scherm inmiddels onder de 4% (peildatum: augustus 2009). Een flexibele breedte lost dit probleem op: de website wordt zo breed geschaald als de monitor. Houdt er wel rekening mee dat afbeeldingen zich niet laten schalen, dus zorg dat er vlakken zijn die kunnen oprekken bij een groter wordend scherm. Een ander nadeel van flexibele breedte is de lengte van zinnen. Uit onderzoek blijkt dat een regellengte van ongeveer 550 pixels het meest prettig leest, bij een regelafstand van 1,5 en een lettergrootte van 11 of 12 pixels (let op: geen pt (points)! Dat is voor print). Er zijn ook tussenvormen: bijvoorbeeld een website die minimaal 775 pixels breed is, maar maximaal 999px. De extra ruimte kan dan opgevuld worden met een extra kolom of door de kolommen mee te schalen.

Wij raden aan om met een vaste breedte te werken van maximaal 999px (rekening houdend met een resolutie van 1024px en een scrollbalk van 25px). Zo is er voldoende breedte voor één of twee zij-kolommen en een tekstvlak van 500px tot 600px.

Hoogte

Hoewel een vaste breedte dus geen probleem hoeft op te leveren, geldt dit niet voor de hoogte. Designers met een achtergrond in print hebben vaak moeite de vaste afmetingen van print los te laten, waardoor er nog steeds veel websites een vaste hoogte hebben. Dit brengt alleen een aantal problemen met zich mee: Je krijgt een content-vlak met een vaste hoogte, waar de te lange tekst van de klant niet in past (terwijl het lorum-ipsum in het ontwerp wél altijd past, vreemd!). Gevolg is een lelijke scrollbalk midden in het scherm. Doordat het scherm zo inefficiënt gebruikt wordt (het gros is leeg of design), moet de bezoeker heel veel scrollen in een klein vlak. Dit leest alles behalve prettig. Bij te kleine schermen doet zich nog een groter probleem voor: er ontstaan 2 scrollbalken: 1 om de website te scrollen en 1 om in het tekstvlak te scrollen. Hierdoor wordt de scroll-knop op de muis buiten werking gesteld en raakt de bezoeker nog sneller geïrriteerd. Dit probleem doet zich zeker op kleine schermen zoals de iPhone voor.

Vaak willen designers niet dat het logo en menu uit beeld raken door te scrollen. Als een bezoeker aan het lezen is, wil hij echter helemaal niet afgeleid worden door menu en logo! Als hij klaar is met lezen, kan hij makkelijk terugkeren naar boven door een link met "naar boven" te maken.

Met 200.000 iPhones die per dag verkocht worden is het tijdperk van inflexibele websites definitief voorbij. Wie op dit moment een website ontwerpt met een vaste hoogte, weet zeker dat deze website de komende jaren bezoekers gaat mislopen.

Design

Als er goed nagedacht is over bovenstaande keuzes is het moment daar om te gaan ontwerpen. Gebruik de Photoshop template als uitgangspunt, gebruik een grid en denk goed na over de belangrijkste variabelen:

  • Wat gebeurt er met het ontwerp als het scherm breder wordt?
  • Stel iemand heeft een heel klein scherm (iPhone), is alles dan nog leesbaar?
  • Wat gebeurt er als de inhoud van een pagina langer wordt? Voorkom scrollbalken midden in het ontwerp!
  • Zet de Anti-Aliasing van de tekst uit (behalve van grote kopjes). Dan komt het zoveel mogelijk overeen met de uiteindelijke weergave in de website.
  • Vraag om echte (voorlopige) teksten. Dit visualiseert veel beter dan "Lorem Ipsum".

Downloads

Wireframes

Design

« Terug naar Advies

Artikelen