» direct naar zoek en menu

Tijdschrift voor webwerkers » Artikel #93

Design door programmeurs - Snelle tips en handvatten

Regelmatig kom ik programmeurs tegen die een beetje zijn vastgelopen in het grafische gedeelte van websites waar ze mee bezig zijn. Vaak zijn dit programmeurs die op freelancebasis werken aan internetsites voor kleinere klanten.

Deze klanten stellen een klein budget beschikbaar, met het gevolg dat de site niet door een internetburo met een team van specialisten wordt gebouwd, maar door één specialist: de programmeur. Dit resulteert soms in een perfect werkende website die er toch nét niet lekker uitziet. Ik ben van mening dat met het gebruik van een aantal eenvoudige handvatten een website al snel heel behoorlijk kan overkomen.

Sommige handvatten uit dit artikel lijken misschien heel voor de hand liggend, maar worden toch regelmatig onnodig vergeten. Hoe meer van de punten je kunt meenemen in je ontwerp, hoe beter - naar mijn idee - je website.

Wat vraag je je opdrachtgever?

Er is slechts een beperkt budget. Daarom zou het mooi zijn als je het hele bouwproces in een zo kort mogelijk tijd kunt doorlopen. Bijna iedereen op deze aardbol heeft een uitgesproken eigen smaak, ook je opdrachtgever dus. Op designgebied kan er veel vertraging ontstaan als er onnodig veel over meningen gecommuniceerd moet worden. Vraag daarom om één vast aanspreekpunt binnen de organisatie, zodat niet jij, maar die persoon degene is die alle meningen en visies op jouw ontwerp binnen de organisatie op een rijtje moet zetten. Vraag aan je contactpersoon regelmatig tussentijds akkoord om verder te gaan en documenteer dit akkoord.

Jij bent degene die alle informatie zal gaan ordenen en in een mooi jasje zal gaan steken. Er is een grote kans dat je opdrachtgever naarmate de website vordert ineens nieuwe ingevingen krijgt en met nieuw materiaal komt aanzetten. Als je achteraf ineens gevraagd wordt om allerlei zaken toe te voegen moet jij je ontwerp bijschaven... Die ingevingen gaan jou dus tijd kosten. Maar wie kosten ze geld? Je opdrachtgever heeft misschien geen enkel idee hoeveel werk bepaalde aanpassingen aan het ontwerp voor jou zijn. Vraag je opdrachtgever daarom nadrukkelijk vóóraf alle content en beeldmateriaal te verzamelen en aan te leveren, voordat jij ermee aan de slag gaat.

Aan de slag! Inspiratie opdoen

Hoe snel of goedkoop hij ook gemaakt moet worden, ook déze website behoort straks tot jouw portfolio. Dat het er ‘goed’ uitziet is enorm belangrijk. Voor bezoekers die voor het eerst op de website langskomen zelfs - onbewust - het állerbelangrijkst. Het uiterlijk, ofwel het design van een website bepaalt voor zo'n 46% of bezoekers de informatie die ze zien (en daarmee het bedrijf) vertrouwen. Op de tweede plaats komt de informatiestructuur.

Begin met het kijken naar de bestaande huisstijldragers van het bedrijf. Heb je een visitekaartje? Briefpapier? Foldermateriaal? Hoe meer je hebt hoe beter natuurlijk, hoewel er ook veel MKB'ers zijn zonder foldermateriaal. Ga in ieder geval na met welk kleurgebruik en lettertypen je te maken hebt en vraag je af of je deze in de site kunt gaan gebruiken.

Kijk ook naar wat websites van concurrenten. Je doel hierbij is om wat snelle indrukken op te doen. Kijk naar navigatie, kleurgebruik, typografie. Sfeertjes proeven, zoveel mogelijk. Kies er een aantal die je mooi vindt (positie van logo, knoppen, hoofdmenu, submenu). Welke visuele kenmerken vind je sterk? Het is natuurlijk niet de bedoeling dat je gaat jatten, maar na inspiratie opgedaan te hebben kom je waarschijnlijk wel sneller tot een fraaie structuur.

De ontwerpschets

Het is tijd om een helder stramien te bedenken. Blijf zeker nog even weg van je computer! Pak een stapeltje wit papier en wat potloden (als je hebt ook kleurpotloden). Een helder stramien blinkt uit in eenvoud! Begin met een aantal hele snelle en ruwe schetsen. Maak er vervolgens keuzes uit en werk stap voor stap naar een definitieve versie toe, waarin je steeds exacter aangeeft waar verschillende elementen moeten komen.

niet direct achter de computer eerst op papier schetsen

Bedenk dat de website heel helder en snel te bouwen moet zijn. Daarom laten we bijzondere navigatiemethoden (vaak door Flashmenu's) achterwege. Ieder onderdeel (hoofdmenu, submenu's en een gedeelte voor inhoud) heeft een eigen kolom en een vaste, voorspelbare positie. Een aantal handvatten over navigatie en schermindeling geef ik in het volgende hoofdstukje.

Geef op je definitieve papierschets(en) ook al belangrijke kleuren aan, en hou deze bij de hand als je je ontwerp over gaat zetten op de computer. Maak, zodra je tevreden bent met je ideeën, je eerste ontwerpvoorstel: bij voorkeur nog niet in HTML, maar gewoon in Photoshop. Je kunt dan als je van gedachten verandert het makkelijkst schuiven of kleuren en lettertypen aanpassen. Gebruik ‘layer sets’ voor de verschillende onderdelen van je ontwerp. Een layerset voor het hoofdmenu, het submenu, de pagina inhoud, etc.

Zelf maak ik vaak een opzet voor het uiterlijk van de homepage en één andere pagina. Dit geeft al een redelijk compleet beeld. Het afronden van je eerste Photoshop-ontwerpen is een moment om feedback te vragen van je opdrachtgever.

Begin pas met het echte bouwen als jij en je opdrachtgever helemaal uit het ontwerp zijn. De eerste keer werkt dit voor jou als programmeur wellicht wat trager, maar je zult zien dat het je uiteindelijk heel veel tijd besparen zal.

Handvatten in navigatie en schermindeling

De site moet op ieder beeldscherm goed bekeken kunnen worden. Horizontaal scrollen is vervelend, verticaal scrollen is minder erg. Maak je website daarom maximaal zo'n 750 pixels breed. Een gebruiker met een 800x600 scherm kan zo zonder problemen je pagina mét een eventuele scrollbar tonen. Maak je een site met ook een vaste hoogte, ga er dan van uit dat een browser in een 800x600 scherm een site van zo'n 450 pixels zonder te hoeven scrollen kan tonen.

Een bezoeker moet altijd kunnen zien waar op een website hij/zij zich precies bevindt (vind ik...). Maak daarom duidelijk zichtbaar welke hoofd- en/of subopties actief zijn. Over keuzen in onderscheid meer onder ‘handvatten in kleurgebruik’ en ‘handvatten in typografie’.

Hou de navigatie ondiep, bij voorkeur een menustructuur van maximaal 2 of 3 niveau's (hoofdmenu / submenu / sub-submenu). Plaats het logo en de menu's op iedere pagina op dezelfde plaats, liefst in de bovenste helft van de pagina. Laat als het even kan het logo naar de homepage linken.

Probeer vooraf volledig op een rijtje te krijgen welke informatie waar moet komen te staan. Je kunt natuurlijk van de standaarden afwijken, maar de meeste gebruikers zullen de bedrijfsnaam of het logo links bovenin verwachten, je hoofdmenu aan de linkerkant of in een horizontaal balkje onder het logo, en je eventuele submenu daar vlak onder. En de tekstuele (of andere) inhoud van de pagina middenin hun scherm. Iedere gebruiker heeft een verwachtingspatroon, meer over deze verwachtingen lees je in dit artikel over criteria voor optimaal webdesign.

Handvatten in kleurgebruik

Kleurgebruik bepaalt voor een enorm groot deel de sfeer van je website. Maar ook de leesbaarheid, en de volgorde waarop een bezoeker informatie bekijken zal, kun je met kleur beïnvloeden. Tegenwoordig hebben veel mensen LCD schermen, vaak met een slecht kleurbereik (helemaal als je er vanuit een hoek naar kijkt). Dit heeft als gevolg dat bijvoorbeeld lichtgrijze tekst op een witte achtergrond wat slecht leesbaar is. Ik raad dan ook aan om geen ál te lage contrasten te gebruiken.

Naast de één of twee hoofdkleuren van de huisstijl van je klant waarmee je moet werken, kun je waarschijnlijk zonder problemen ook wit, zwart en grijswaarden gebruiken. Maar misschien wil je nog andere kleuren gebruiken: kleuren voor buttons, tekstkoppen en achtergronden. Allemaal om het wat levendiger en mooier te maken. Hoe kies je nu kleuren die bij elkaar passen, zonder dat het een onlogisch kleurencircus wordt? Wellicht vind je bij colormatch al wat leuke suggesties.

Nicoline Wouterlood geeft hierover in haar artikel over kleur een aantal handige tips!

Handvatten in typografie

Net als met kleurgebruik bepaal je met typografie ook voor een groot deel het overzicht, de sfeer en de volgorde waarin bezoekers je pagina's bekijken. Daarnaast geeft een goed gekozen typografie veel helderheid over de exacte aard van ieder onderdeel.

Overal in je website zul je logische varianten in typografie moeten toepassen. Om hier ook logische keuzen in te maken, hanteer ik als vuistregel dat teksten of woorden die in functie op slechts één punt van elkaar verschillen, ook optisch maar op één punt van elkaar mogen verschillen. Neem bijvoorbeeld je ‘gewone’ bodytekst, en een linkje in je bodytekst. Het enige verschil tussen de twee is het feit dat er achter één tekstje een link zit. Optisch laat ik ze dan ook op één punt verschillen, namelijk een onderstreping óf een andere kleur, nooit beide (gebruik het tweede verschil dan als mouse-over).

Nog een voorbeeld: in je menu staan actieve en inactieve opties. Ook die hebben maar één functioneel verschil, dus kies ik voor een onderscheid in kleur, of een verschil tussen ‘bold’ en ‘regular’ tekst. Of ik hou de tekstvariant- en kleur gelijk, maar verander de kleur van het buttonvlakje waar de tekst in staat.

Als je voor iedere keuze even nagaat in hoeveel punten de functionaliteit van je nieuwe variant in relatie staat tot andere tekstvarianten, en je baseert het visuele onderscheid hier ook op, geef je de gebruiker uiteindelijk veel helderheid!

Ingewikkeld wordt het als je klant teksten aanlevert met veel variatie: paginakoppen, tussenkoppen, opsommingen, alineakoppen, etc. Ga in dat geval heel goed na welke volgorde van belang is om aan te houden. De gewone bodytekst staat ‘onderaan’ in deze volgorde, en werk je weg zo steeds op één punt visueel verschillend omhoog in lettervariaties.

Paginakoppen

Gebruik korte en pakkende koppen. De koppen mogen best behoorlijk groot zijn, maar blijf in proportie (gebruik je een 24 pixel letter als kop, neem dan niet óók nog eens de bold variant).

Bodytekst

De bodytekst moet écht goed comfortabel leesbaar zijn. Gebruik een lekker hoog contrast en geen al te kleine letters. Maak ook de regellengte niet te lang (cicra 80 tekens per regel leest lekker) anders moeten je ogen steeds een beetje 'zoeken' naar het begin van de volgende regel.

Alineakopjes

Deze laat ik meestal niet van grootte, lettertype en kleur afwijken van de bodytekst, maar gebruik alleen de ‘bold’ variant. Voordeel is dat de tekst even leesbaar is als de bodytekst, en ook op slechts één punt verschilt. Plaats voor de duidelijkheid je tekst ook meteen op de volgende regel onder het kopje, zonder returns.

Een website die best goed met het ‘1 punt verschil’ systeem werkt is bijvoorbeeld die van Planet Internet. En de site van het Noorse bedrijf Arngren doet dat totaal niet.

[Voorbeeld: een aantal typogrammen]

Een beetje meerwaarde

Tot slot, geef je website een beetje meerwaarde. Let vooral op de homepage, want dit is de binnenkomer, die beïnvloedt of mensen geïnteresseerd zijn in wat ze zien. Wat dit precies moet zijn is moeilijk te zeggen, het hangt ook af van wat je voor handen hebt. Heb je niets, vraag dan je klant om bijvoorbeeld fotografie (een echt goede, lekkere foto, met daaroverheen bijvoorbeeld de slogan/payoff van het bedrijf). Misschien kun je in een korte Flashmovie uitleggen wat het bedrijf doet (ik bedoel natuurlijk geen ‘skip intro’ Flashmovie, maar gewoon eentje die ergens in de homepage verschijnt). Probeer beeldmateriaal voorhanden te hebben waarmee de openingspagina zich nét even onderscheidt.

Met deze handvatten kom je als vastgelopen programmeur misschien al wat verder. Zo bespaart je klant op de kosten van een designteam, en vul jij je portfolio aan met een fraai ontworpen website.

Auteur

Erik Nieuwenhuis

is ontwerper (web & print), illustrator en striptekenaar onder de naam Oirik. Daarnaast werkt hij als web- en multimediadesigner bij Athena in Utrecht.

Hij vindt programmeurs over het algemeen heel aardig, en vindt het interessant dat programmeurs en ontwerpers niet altijd dezelfde idealen voor ogen hebben. Ook lachen ze niet altijd om dezelfde grapjes.

Publicatiedatum: 03 november 2004

Let op

Naar Voren is op 18 juli 2010 gestopt met publiceren. De artikelen staan als een soort archief online. Het kan dus zijn dat de informatie verouderd is en dat er inmiddels veel betere of makkelijkere manieren zijn om je doel te bereiken.

Copyright © 2002-heden » NAAR VOREN en de auteurs