Blog
Richtlijnen voor een goed webdesign
Robert GiezenLead Ontwerper
Ontwerp27 september 2011

De 6 belangrijkste richtlijnen voor een goed webdesign

Het gebeurt té vaak; als ontwikkelaar krijg je de opdracht om een webdesign om te zetten naar een goed functionerende website. Geen probleem! Het design wordt vervolgens aangeleverd in een afgesproken bestandsformaat. Maar wat blijkt nu? Je kan er gewoon helemaal NIKS mee; de tekst is niet meer te bewerken, schaduwen zijn niet meer los te trekken van de achtergrond en ga zo maar door met de ergernissen.

Naar aanleiding van deze frustraties sommen wij hier de 6 belangrijkste richtlijnen voor u als vormgever op zodat u een webdesign aflevert waar de ontwikkelaar wat mee kan.

Waarom is het goed aanleveren van een webdesign zo belangrijk?

  • Het bespaart tijd om de website te ontwikkelen.
  • Het bespaart frustraties van de ontwikkelaar wat de relatie ten goede komt.
  • Het bespaart ‘heen-en-weer’ contact tussen de ontwikkelaar en de vormgever.
  • Kortom: Het bespaart tijd en dus geld.
De 6 richtlijnen die wij voor u als vormgever hebben vastgesteld
  1. Het is erg belangrijk om van te voren vast te stellen waar u het design voor gaat maken. Dat kan zijn voor een folder, een mobiele applicatie of een iPad applicatie maar in dit geval is dat voor een website die u bekijkt met uw computer. Waarom is dit zo belangrijk? Als u kijkt naar het de statistieken van meest gebruikte browser resoluties (de hoogte x de breedte van uw beeldscherm in pixels) is dat 1024×768. Dat betekent dat u er rekening mee moet houden dat uw website in de breedte goed zichtbaar moet zijn voor deze resolutie. U maakt uw website dus niet breder dan 1000 pixels omdat er eventueel nog een scroll balk naast komt.
    Hulpmiddelen: 960.gs (dit is een template voor uw favoriete designprogramma die deze 1000 pixels opdeelt in kolommen).
  2. Verder is er een zeer groot verschil tussen print-design (folders etc.) en webdesign. Een folder bijvoorbeeld is nooit groter dan de folder zelf, maar een website kan heel veel content (tekst, afbeeldingen) hebben waardoor de website hoger wordt en men moet gaan scrollen.
    Hier kunt u heel makkelijk rekening mee houden als vormgever door alleen elementen te gebruiken die in de hoogte en eventueel breedte uittrekbaar zijn zonder dat de kwaliteit van dit element verloren gaat. U gebruikt dus nooit achtergrond afbeeldingen die opeens ophouden na een bepaalde hoogte te hebben bereikt. Mocht dit wél het geval zijn omdat het element er écht in moet, zorg er dan wel voor dat deze laag apart te bewerken is in het werkbestand, zodat de ontwikkelaar het zelf altijd nog kan bewerken.
  3. Het komt vaak voor dat er in een aangeleverd webdesign bepaalde lettertypen worden gebruikt die niet standaard ondersteunt worden door de gebruiker. Zorg er dan voor dat in het werkbestand de lettertypes nog aan te passen zijn en nog te selecteren zijn. Zo kan de ontwikkelaar er altijd achter komen welk lettertype gebruikt is en er voor kiezen om dit wel of niet te gebruiken. Daarnaast is het ook handig om deze lettertypes mee te sturen met het werkbestand.
    Tegenwoordig bestaan er meerdere technieken die ervoor zorgen dat speciale lettertypen ondersteunt worden en ingeladen worden op de server, enkele voorbeelden hiervan: Font Face, Sifr, Cufon. Kiest u zelf uw favoriete techniek uit, elke techniek heeft zijn voor- en nadelen.
  4. Soms is het zo dat gebruikte kleuren in een design anders uitvallen op verschillende beeldschermen of totaal niet matchen. Een makkelijk hulpmiddel om dit te voorkomen is door het design tijdens het design proces meerdere keren te bekijken op verschillende beeldschermen. Hierdoor voorkom je dat een grijstint bijvoorbeeld roze uitvalt. Helemaal voorkomen kunt u dit niet, maar u kunt de schade beperken.
    Hulpmiddelen: De volgende websites bieden kleuren paletten aan die 9 v/d 10 keer goed met elkaar matchen:  Colourlovers, Kuler.
  5. Sommige vormgevers denken dat wanneer ze hun design doorsturen naar de ontwikkelaar dat ze het nog moeten verkopen. Het kan zijn dat er nog een browser scherm of een mooi presentatie bord omheen zit. Dit is overbodig! Een ontwikkelaar geeft er meestal weinig om hoe het design er mooi gepresenteerd uitziet. Die wil gewoon snel de website in elkaar zetten zonder dat hij de overbodige “presentatie” elementen eerst weg moet halen voordat hij kan beginnen. Friks heeft er voor gekozen om het design als een JPG online te zetten zodat de klant het design ziet zoals de klant het ook te zien krijgt als de site af is en ‘live’ staat.
  6. Als laatste punt moet er nog even goed benadrukt worden dat ALLE lagen APART van elkaar te bewerken moeten zijn. Het mag dus niet zo zijn dat 2 in elkaar overgelopen schaduwen in 1 laag zitten. Dit is een hele grote frustratie voor ontwikkelaars, omdat zij het hierdoor zelf nog een keer overnieuw moeten maken in het design. En dat is niet wat ontwikkelaars willen doen, anders waren ze wel vormgever geworden.
Als u deze richtlijnen volgt als vormgever kan er weinig mis gaan tussen de vormgever en de ontwikkelaar en kost het gehele proces simpelweg minder tijd, waardoor de klant uiteindelijk goedkoper uit is!

BREAKING NEWS: Per 1 januari 2019 gaan @junction.nl, @in2media.live en @friksweb samen verder onder de naam JUNCTION Creative & Digital Agency. 🎉 Meer info? Link in bio. #friksweb

NEW WORK: www.deunsk.nl 😁 @_delangejeroen_

BREAKING NEWS! Het redesign van Sanjesfertier staat online 💪🏻. Lees alles over de case op onze website. De link vind je in onze Bio. #friksweb #webdesign #bedrijfsfotografie

Die keer toen @jochem1979 op vrijdagmiddag Anne Hazes en Ricky ‘Genot’ uitnodigde 😁🎉 #workhardplayhard #friksweb #vrijmibo #tb

25 portretten voor @teamfrysk 📸 Laat het schaatsseizoen maar komen! 💪🏻 #portretphotography #elfstedenhal #smile #friksweb

Gratis quickscan
Hoe presteert jouw website? Klik hier voor een gratis Quickscan!
×