Rasters maken de vorm

In grote projecten werken user interface ontwerpers en grafici zij aan zij. De vakgebieden overlappen en beïnvloeden elkaar. Samen bepalen ze wat waar komt te staan. De user interface ontwerper richt zich op gebruiks­vriendelijkheid en functie, de graficus op esthetische elementen. De user interface ontwerper bepaalt vorm omdat dit vertrouwen, verwachtingen, structuur en rust vastlegt.

Smaken verschillen, maar een aantal ontwerpregels zijn universeel en zorgen ervoor dat iedereen een ontwerp mooier en aantrekkelijker vindt. Dit heeft ermee te maken dat klanten in principe luie lezers zijn, of anders gezegd, het zijn efficiënte lezers. Ze willen allemaal met minimale inspanning de ogen bewegen, zonder hapering. De taak van de ontwerpers is dan ook om de ogen van klanten prettig te leiden. Voor een goede oogbeweging is een heldere structuur in de vormgeving nodig. Daarmee is de graficus zeker niet zijn vrijheid kwijt. Het gaat juist om de afstemming van de onderliggende vormen en elementen.

Orden met raster

Goed afstemmen doe je met een raster. Met een raster heb je een goede garantie voor een structureel gebalanceerde opmaak. Bij de gebruiker, de lezer, komt de opmaak als consistent over en je heb als ontwerper de vrijheid om meerdere opmaken te introduceren. Een raster zorgt voor uniformiteit tussen verschillende opmaken.

Gebruik het 960-raster

Een vaak gebruikt raster is het 960 Grid System van Nathan Smith. Dit raster systeem is speciaal bedacht voor websites. De breedte van 960 pixels kan je goed gebruiken voor een verschillend aantal kolommen. Dit introduceert grote vrijheid om een wisselend aantal kolommen te gebruiken op webpagina’s of in secties. Hiernaast is de breedte van 960 erg geschikt omdat beeld­schermen tegenwoordig minimaal 1024 pixels breed weergeven. Het 960 Grid System past dus mooi op ieders beeldscherm.

Kies een vast raster

Het 960 Grid Systeem is een vast raster. Daar wil ik toch nog even extra op wijzen. In tegenstelling met een elastisch raster dat uitrekt zodra je je browser­scherm groter maakt. Een elastisch raster vind ik onverstandig. Bij een elastische opmaak verlies je controle over regellengtes en de lengte-breedte-verhoudingen van de inhoud. Deze met zorg vastgelegde verhoudingen zijn belangrijk om je website leesbaar en overzichtelijk te maken. Een veel gehoord argument tegen vaste rasters is dat gebruikers de lettergrootte kunnen aanpassen. Het is dan onmogelijk om verhoudingen te garanderen. Dit argument geldt echter tegenwoordig niet meer, omdat moderne webbrowsers de opmaak en plaatjes samen met de lettergrootte schalen.

Wees consistent met stijlpatronen

Ook bij gebruik van stijlen moeten patronen snel te herkennen zijn. Hoe regel­matiger en preciezer een patroon, des te minder moeite het iemand kost dat patroon te ontdekken. Geef veel aandacht aan stijlpatronen en wees voorzichtig met het introduceren van variaties van elementen die op elkaar afgestemd zijn.

Maak op in OmniGraffle

OmniGraffle is van oorsprong een programma voor Mac OS X om geavanceerde diagrammen mee te maken, zoals Visio voor Microsoft Windows is. Met OmniGraffle maak je gemakkelijk stijlbibliotheken en houd je verschillende opmaken georganiseerd. Tevens heeft het een krachtige raster-functie. Door eerst je website in OmniGraffle (of Visio) te bouwen zorg je ervoor dat je snel, mooi en trefzeker kunt experimenteren. Perfect voor webontwikkeling en presentaties.

Als je hierover meer wilt lezen raad ik je de volgende websites aan: The 960 Grid System (voorbeelden en uitleg 960 Grid); The Grid System (veel verwijzingen); Mark Boulton’s Five simple steps to designing grid (uitleg).

Bart van de Biezen

Bart van de Biezen

Als cognitief ergonoom bij Aan Zee Communicatie, onderzoek, ontwerp, spreek en schrijf ik over user interfaces en usability. M'n achtergrond: Industrieel Ontwerpen en daarna Psychologie aan de Universiteit Twente, afgestudeerd bij Philips op midair pointing voor een nieuwe generatie TV's, Apple Design Award voor CSSEdit, usability onderzoeker bij MetrixLab en blogger.