Blog

1. Een goede eerste impressie

Wanneer je een design kritisch onder de loep wil nemen dien je van de eerste impressie te weten waar de site over gaat. Voor bepaalde onderwerpen is dit een hele opgave, voor andere is het een “piece of cake”. Bij websites zoals bijvoorbeeld Themeforest kom je vaak templates tegen die kwalitatief erg goed afgewerkt zijn maar die de regel van de eerste impressie niet ondersteunen omwille van hun neutraliteit en brede inzetbaarheid.

Tips voor een betere eerste impressie:

• Een op maat gemaakte website zal altijd beter scoren op dit punt dan een aangekochte template.
• Maak een achtergrond in het thema van de website (vb wandeleninlimburg.be).
• Gebruik duidelijke foto’s van het thema in de header / slider. Als het kan maak je ze zelf, anders richt je je tot kwalitatieve stockfoto’s.

2. Gebruiksvriendelijke navigatie

Een slechte navigatie leidt tot verwarring bij de bezoeker. Zorg voor een simpele, herkenbare voorstelling. Een navigatie zonder tekstuele verankering, bijvoorbeeld door middel van een blok foto’s, is niet gebruiksvriendelijk en zal tot verwarring leiden. Zorg ook steeds dat de navigatie duidelijkheid schept in de huidige locatie. Een duidelijke active state op de “Home” button zou de bezoeker moeten vertellen dat hij of zij zich op de homepagina bevindt.

Tips voor een geslaagde navigatie:

• De navigatie moet in één oogopslag terug te vinden zijn.
• Zorg voor duidelijke active states en hovers.
• Probeer de navigatie-items te beperken tot een maximum van 7. Gemiddeld kan een mens zo’n zevental elementen onthouden.

3. Duidelijk gerichte call to actions

Een goede interface zorgt voor interactie met de bezoeker. Zorg ervoor dat de bezoeker zich aangesproken voelt tot belangrijke elementen door deze te accentueren. Je kan dit verwezenlijken door middel van kleur, een opvallende illustratie, bold tekst, enz…

Tips voor een gerichte call to action:

• Zorg voor een goed contrast.
• Omring het betreffende element met voldoende witruimte.
• Controleer de focuspunten van jouw design door je ogen dicht te knijpen en door je wimpers heen te kijken. Welke elementen vallen op?
• Artikel: Controleer de effectiviteit met A/B-testing.

4. Voldoende witruimte

Een evenwichtige hoeveelheid aan witruimte laat je bezoeker toe op een rustige manier een tekst te overlopen of te scannen. Een overvloed aan dicht op elkaar geplaatste elementen gaat leiden tot drukte, met als gevolg een verloren overzicht.

Tips voor de juiste dosis witruimte:

• Hou een constante afstand aan tussen blokelementen, bijvoorbeeld 30px.
• Gebruik een hogere lijnhoogte dan de standaardwaarde. Voor een gewone paragraaf is het aangeraden een minimale vergrotingsfactor van 1.5 te gebruiken. Een font van 12pt krijgt dan een lijnhoogte van 18pt.
• Ter controle kan je uitzoomen tot een bepaald % van de originele grootte, zijn er gebieden die erg op elkaar plakken?

5. Consistente uitlijning

Een ander belangrijke eigenschap is de uitlijning. Een interface waar een consistente uitlijning gebruikt wordt is aantrekkelijker dan één waarvan de blokelementen bijvoorbeeld niet op gelijke eind- of startlijn staan.
Inventis maakt voor een optimale uitlijning gebruik van een gridsysteem zoals 960. Een alternatief dat zijn opmars aan het doen is, is het 1140 gridsysteem.

Tips voor een pixelperfecte uitlijning:

• Maak gebruik van line guides.
• Laat je begeleiden door een 960 of 1140 gridsysteem.
• Respecteer je gutters en je paddings (zie punt 4 - witruimte).

6. Duidelijk leesbare typografie

Een goede webinterface gebruikt leesbare fonts. Over het algemeen zijn schreefloze lettertypes beter leesbaar op een computerscherm. Lettertypes met schreef zijn dan weer beter leesbaar op print.
We raden je ook aan geen té kleine font-sizes te gebruiken, gebruik liever wat meer ruimte en een groter font dan alles op elkaar te plakken met een te kleine font-size. De ideale font-size voor een paragraaf is 12pt, alhoewel we met de huidige resoluties af aan het stevenen zijn naar 13pt.

Tips voor betere typografie:

• Gebruik exclusieve fonts als aandachtstrekker (gebruik met mate).
• Ga niet te laag in font-size, zeker niet voor belangrijke elementen.
• Opteer zoals eerder vermeld voor voldoende lijnhoogte.
• Gebruik bold tekst om bepaalde highlights te leggen.

7. Een contrastrijk kleurenpalet

Een juist kleurenpalet kan je website voorzien van heel wat sfeer. Het kan een design maken of kraken en als designer is het essentieel dat je daar wat oog voor hebt. Vermijd zeker een saai geheel door slechts in één enkele tint te werken. Voorzie details van alternatieve kleuren om het geheel wat te breken. Trek de aandacht door met de intensiteit van kleuren te spelen, verzadig de kleuren voor minder belangrijke elementen.
Met de volgende uitspraak van Marc Chagall (1887 – 1985): “All colors are the friends of their neighbours and the lovers of their opposites.”, kunnen we de perfecte kleurencombinatie samenstellen voor onze interface. Uiteraard kan je ook op makkelijkere manieren een leuk kleurenprofiel uitkiezen, neem daarom zeker eens een kijkje op Adobe Kuler of op mijn persoonlijke favoriet: Colourlovers.

Tips voor een spetterend kleurenpalet:

• Gebruik verwante of tegenoverstaande kleuren (met Marc Chagall in het achterhoofd).
• Stel een kleurenprofiel samen vooraleer je start, je kan er ook eentje kiezen op Adobe Kuler of Colourlovers.
• Accentueer of verzadig naargelang belangrijkheid.
• Vermijd een kleurboekdesign. Eveneens mag het geen nog te kleuren lijntekening worden.
• Gebruik een toepasselijk kleurenpalet (Geen rood voor een website over ijsblokjes…).

8. Creatieve aanpak door inspiratie

Vooraleer je start is het belangrijk om wat inspiratie op te doen, ga actief op zoek naar websites met een mooie interface, bestudeer kritisch en houd er rekening mee dat een goede interface ook gebruiksvriendelijk moet zijn. Websites zoals CSSmania of Dribbble kunnen een prima bron voor inspiratie zijn.
Heb je geen inspiratie of krijg je even niets uit je Photoshop getoverd? Las dan een korte pauze in en ontspan, je zal zien dat het hierna veel beter zal gaan.

Tips voor creatieve inspiratie:

• Doe ideeën op van andere designers via bepaalde CSS galerijen of design community’s.
• Las (korte) pauzes in wanneer je inspiratieloos bent.
• Artikel: Waar haalt een webdesigner inspiratie?

9. Pixelperfecte details

Wees niet gemakzuchtig en steek wat extra tijd in de details. Een subtiele inset, een zachte schaduw, een leuke afronding, een reflectie of een ezelsoor? Laat bepaalde elementen uitspringen door met de voorgaande opties te spelen en verwen de bezoeker met dat tikkeltje extra. Let wel dat de detailmanie je niet te pakken krijgt, want trop is vaak te veel.

10. Intuïtief ontwerp

Een website ontwerpen is een erg menselijk proces, voor en door internetgebruikers. Een interface moet dus in eerste instantie erg intuïtief werken om geslaagd te zijn. Sta open voor externe suggesties en stuur bij waar nodig.

Stel dat deze blogpost een interface is, hebben jullie dan zelf ook nog handige tips om hem te verbeteren? Aarzel niet om een berichtje na te laten.