Vormgeving: persoonlijkheid en uitstraling

Goede informatie die niet goed wordt gepresenteerd, mist zijn doel. De juiste vormgeving zorgt voor een uitstraling die vertrouwen wekt bij de doelgroep en toch afwijkend genoeg is om uniek te zijn. De taak van de vormgever is dus puur esthetisch.

Eigen huisstijl

Als u al een eigen huisstijl heeft, dient deze natuurlijk zoveel mogelijk in uw website verwerkt te worden. Om een uniforme uitstraling te waarborgen, worden dan in ieder geval de bestaande kleuren en lettertypes daarin toegepast.

Als uw website door iemand anders gemaakt gaat worden dan diegene die uw huisstijl heeft ontworpen, zorg dan dat u beschikt over de benodigde grafische bestanden in een zo hoog mogelijke kwaliteit. De ontwerper van uw huisstijl kan hierin voorzien.

Hebt u nog helemaal geen huisstijl, logo, visitekaartjes of briefpapier? De vormgever van uw website kan ook hier in voorzien.

Voor sommige ondernemers lijkt dit iets om zelf eens te proberen. Mijn advies: niet doen! Dit is verkeerde zuinigheid die veel tijd kan gaan kosten.

Verschillende doeleinden

Mocht u zowel een nieuwe vormgeving voor uw bedrijfswebsite als voor uw intranet-site nodig hebben, zorg dan dat deze verschillen qua vormgeving. Hierdoor wordt duidelijker op welke site de gebruikers zich bevinden.

Breedtes

De ideale breedte van de belangrijkste kolom voor de tekst is ongeveer 80 karakters. Hoe breed deze dan in pixels of centimeters wordt, hangt van de typografie af.

Vroeger was het bepalen van de totale schermbreedte van een ontwerp vrij eenvoudig; je hield rekening met de laagste aantal pixels (resolutie) die de op dat moment gangbare beeldschermen konden weergeven.

Tegenwoordig worden websites veelal bekeken op mobiele apparaten (devices) zoals tablets en smartphones. Deze devices hebben kleine schermen, wat betekent dat uw bestaande website daar wellicht niet goed op wordt weergegeven.

Uw website-ontwerp mag nooit zo breed worden dat er een horizontale scrollbalk ontstaat tijdens het bekijken ervan!

Uitlijning

De websites die begin jaren 90 van de vorige eeuw werden gelanceerd, waren voornamelijk links uitgelijnd.

Tegenwoordig ziet u vooral gecentreerde of schermvullende lay-outs. Ook is het zogenaamde parallax design (het verschuiven van verschillende elementen over elkaar heen) op dit moment erg populair.

Vanuit technisch oogpunt is de ene uitlijning niet beter of slechter dan de andere. Het zijn persoonlijke voorkeuren en de drang tot innoveren die leiden tot nieuwe manieren van schermindelingen.

Laat uw teksten wel altijd links uitlijnen; dit oogt het beste en leest het prettigst.

Vormgeving

Kleuren en contrast

Kleuren worden online vaak toegepast op basis van uw (vormgevers) persoonlijke voorkeuren. U moet hierbij rekening houden dat kleuren een betekenis hebben, die per land en per doelgroep kunnen verschillen.

Zwart wordt in Nederland bijvoorbeeld vaak als bedreigend of somber gezien, grijs als saai, rood als gevaarlijk en oranje als vaderlandslievend. In de rest van de wereld staat zwart synoniem voor kwaliteit.

KissMetrics heeft een kort verhaal over kleurpsychologie geschreven op hun weblog.

Kleuren moeten goed bij elkaar passen, het contrast moet afgestemd zijn (geen diapositief) en ze mogen vooral niet met elkaar vloeken. Volgens de website van Webrichtlijnen.nl moeten groen, oranje, bruin, geel, rood op zwart, zwart op rood, paars en blauw samen en alle pastelkleuren worden vermeden.

Heeft u hulp nodig bij het bepalen van de kleuren voor uw website? Klik hier voor een lijst met links die u op weg kunnen helpen.

Typografie en webfonts

Typografie is volgens Wikipedia de kunst van het vormgeven, zetten en drukken van tekst, zowel voor functionele als esthetische doeleinden. Daarbij speelt de keuze van lettertypen (fonts), vette en cursieve variaties, witruimte en interpunctie een belangrijke rol.

Wat voor kleuren geldt, geldt ook voor lettertypen: persoonlijke voorkeuren spelen een rol. Het lettertype dat door de één als “zakelijk” wordt gezien, kan de ander “saai” vinden. “Speels” kan ook opgevat worden als “te frivool” of “niet serieus genoeg”. Was een aantal jaar geleden Verdana nog het populairste lettertype voor tekst, langzaam maar zeker lijkt Arial terrein te winnen.

Welk lettertype u ook kiest voor uw tekst:

  • leesbaarheid is het allerbelangrijkste!
  • denk aan de regelhoogte
  • zorg dat er genoeg ruimte tussen de letters en de woorden is
  • het font op uw poster of flyer is niet automatisch geschikt voor gebruik op uw website
  • voorkom een veelvoud aan gebruikte lettertypes en/of kleurvariaties
  • ziet het lettertype er in alle groottes goed uit?
  • probeer geen lettertype te forceren: omdat u een Grieks restaurant heeft, hoeft u nog geen Grieks font te gebruiken!

Tip: als u wilt weten hoe een bepaald woord eruit ziet in alle lettertypes op uw computer, ga dan naar http://www.wordmark.it.

Van oudsher zijn er maar een beperkt aantal (behoorlijke saaie) lettertypen dat in elke browser goed werd weergegeven, de zogenaamde websafe fonts. Lettertypen die niet tot dit beperkte aantal behoorden moesten verwerkt worden in afbeeldingen.

Echter, met de komst van technieken als “@font-face” is het nu ook mogelijk om sierlijke en in het oog springende lettertypen te gebruiken. Websites als FontSquirrel en Google Webfonts zijn helemaal op deze techniek gericht.

De echte typograaf zal het wellicht niet met mij eens zijn, maar ikzelf vind de keuze van lettertypes minder belangrijk dan de toepassing van stijlen. Een tekst die mooi is opgedeeld in paragrafen en op de juiste manier kleuren, lettergroottes en accentuering toepast, kan daarvoor wat mij betreft elk lettertype gebruiken.

Vormen en maten

De vormen en maten van elementen zoals knoppen en invulvelden zijn wederom veelal een kwestie van smaak.

Denk bij het gebruik van iconen in de eerste plaats aan de usability en dan pas aan de juiste kleur. Iconen moeten uw gebruikers de weg wijzen, welke kleur ze ook zijn.

Vroeger kon het weergeven van rondingen, schaduwen en kleurverloop alleen gedaan worden met behulp van afbeeldingen. Tegenwoordig zijn veel van deze effecten haalbaar door puur programmeerwerk. Dit heeft als voordeel dat uw website minder “afbeeldingsintensief” en daardoor sneller wordt.

Foto’s verwerken in het ontwerp

Zoals elke vormgever zal weten kan vanwege auteurs- en portretrechten niet elke afbeelding op het Internet gebruikt worden voor het ontwerp van een website.

U blijft als exploitant echter verantwoordelijk daarvoor. Mocht een vormgever tijdelijke foto’s gebruikt hebben, zorg dan dat deze zijn vervangen voordat de rechtmatige eigenaar zich meldt.

U kunt de website van TinEye Reverse Image Search gebruiken om meer informatie over een afbeelding te achterhalen.

Templates of maatwerk?

Het (naar uw zin laten) maken van een maatwerkvormgeving kost veel tijd en is daarom niet goedkoop.

Als reactie hierop is er diverse (online) “doe-het-zelf-software” ontstaan die gebruik maakt van voorbeeldlay-outs, meestal templates of themes genoemd. Hoewel deze templates er professioneel uit kunnen zien, staat de vormgeving meestal al vast en soms is er zelfs weinig variatie mogelijk op het gebied van functionaliteit.

Uit kostentechnisch oogpunt maak ik zelf ook weleens gebruik van templates. Als ontwikkelaar kan ik deze echter wel zo radicaal wijzigen, dat ze altijd aan de wensen van de klant voldoen, met andere woorden: maatwerk uit templates.


Referenties op deze pagina:
Over kleurpsychologie
De website van Webrichtlijnen
De kleuren van uw website
De website van Wordmark
De website van FontSquirrel
Google Webfonts
Over usability
TinEye Reverse Image Search

Laat een reactie achter

Uw e-mailadres wordt niet getoond. Verplichte velden zijn gemarkeerd met een *