Een goed webdesign in Groningen (laten) maken?

26 september 2017 Auteur: Tjerk Jansma - Designer bij TPF.NU

En hoe werkt dat nu? Een website laten maken?

Een webdesign start met een uitgewerkt concept

Mocht je de drang hebben om onderscheidend te zijn en een volledige maatwerk website te krijgen. Neem dan ook de tijd om een goed ontwerp te maken. Met een klein beetje extra tijd is je website af. Dan kloppen alle ruimtes en leesbaarheid en creëer je een optimale gebruikerservaring. Het zorgt voor een stevige fundering voor het project en kan het verschil maken tussen een goed of een geweldig resultaat. Voordat we aan het webdesign beginnen, gaan we in gesprek met jou, onze opdrachtgever, om uit te zoeken wat precies de doelen en wensen zijn. Wanneer we vervolgens een strategie hebben ontwikkeld, maken we de start met het webdesign en dat begint bij een prototype.


Het uitwerken van een prototype ten behoeve van het webontwerp

Voor nu mogen we de mooi opgemaakte tekst, zorgvuldig geselecteerde kleuren en beeldmateriaal links laten liggen. In deze fase is het voor de web ontwerper namelijk de uitdaging om de strategie te vertalen naar een functioneel en gebruiksvriendelijk prototype.

Een prototype kan op verschillende manieren gemaakt worden, bijvoorbeeld een ‘paper prototype’. De naam verklapt eigenlijk al wat het is: een functioneel prototype dat op papier getekend wordt. Dit is een razendsnelle manier om de functionaliteit van je website te testen en te verbeteren. Verder is het gemakkelijk om het prototype te wijzigen, waardoor je ter plekke aanpassingen aan je ontwerp kan maken, ook samen met je gebruikers of opdrachtgever. Je hoeft niet goed te kunnen tekenen om een paper prototype te maken, ruwe schetsen zorgen er juist dat je snel je ontwerp kan perfectioneren.

Het maken van een interactief prototype is een manier die we bij onze eigen projecten vaak toepassen. Hiervoor gebruiken we Axure, een programma waarmee de werking van een echte website gesimuleerd kan worden, zonder code te schrijven. Een interactief prototype bestaat uit alle nodige pagina’s, die vervolgens aan elkaar gekoppeld worden zodat de gebruiker erop kan klikken en kan navigeren. Een prototype komt op deze manier vrij dicht bij de werkelijkheid, wat een voordeel kan zijn ten opzichte van een paper prototype.

In Axure is het zelfs mogelijk uiteindelijk het uiteindelijke design weer terug te laten komen zodat de gebruiker de applicatie kan testen. Wanneer je veel gebruikers verwacht is een uitgebreide testfase wenselijk om de gebruiker direct bij de lancering van het product een prettige ervaring te geven. Een ontevreden gebruiker keert namelijk niet snel terug.


En dan: webontwerp ofwel webdesign

Wanneer het prototype goed getest en geaccepteerd is, wordt het tijd om het webdesign mooi te maken. Bij het maken van een grafisch web design staan de identiteit van je merk en doelen van de klant voorop. De bestaande visuele identiteit van de opdrachtgever speelt ook een rol in het nieuwe ontwerp. Past de bestaande identiteit bijvoorbeeld nog wel in deze tijd? En straalt het uit naar de doelgroep wat het zou moeten uitstralen. Wanneer we deze informatie hebben, kan een begin gemaakt worden met het vaststellen van een kleurenpalet, typografie, het maken van logo’s, fotografie en andere beeldmerken. Uiteindelijk komen we tot een samenhangend webdesign dat de doelgroep aanspreekt en activeert. Dit design zal moeten leiden tot een prettige website waar doelen en conversies behaald kunnen worden.


Kleurgebruik

Eén van de belangrijkste onderdelen van een webdesign is de kleur. De kleur is bepalend voor de eerste indruk die je bezoekers krijgen, dus het is erg belangrijk om goed na te denken over wat je ontwerp moet uitstralen. Kies je bijvoorbeeld rood als hoofdkleur, dan straal je enthousiasme uit en de felle warme kleur zorgt ervoor dat je opvalt. Neem je blauw daarentegen, dan zal je ontwerp meer rust en vertrouwen uitstralen. Zo zijn er voor iedere kleur toepassingen en voordelen die bij verschillende websites van pas kunnen komen.

Naast de hoofdkleuren in het ontwerp zijn de steunkleuren belangrijk voor de werking van de website. Wanneer een call-to-action knop bijvoorbeeld moet opvallen, is het verstandig om een kleur te kiezen die sterk contrasteert met de hoofdkleur. Voor overige elementen op de webpagina’s worden vaak steunkleuren gebruikt die de hoofdkleur in het geheel complimenteert. Eén tot drie hoofdkleuren in een ontwerp is een goede richtlijn om rust in het geheel te bewaren.


Typografie

Een tweede onderdeel van het grafisch ontwerp is de typografie. Het valt misschien minder snel op dan de kleur, maar ook de keuze voor een lettertype is bepalend voor de gehele uitstraling van de website. Een schreefloos lettertype zoals Helvetica of Arial oogt strak en modern, terwijl een lettertype met schreef, zoals times, een meer klassieke en serieuze uitstraling heeft. In sommige gevallen kun je alternatieve lettertypen, zoals handgeschreven, gebruiken om een gevoel uit te drukken dat met standaard lettertypen niet goed lukt.

In sommige ontwerpen combineren we meerdere lettertypen, bijvoorbeeld schreefloze titels en leestekst met schreef. Daarbij vermijden we zoveel mogelijk om lettertypen te gebruiken die op elkaar lijken. Verschillende lettertypen die sterk op elkaar lijken kunnen zorgen voor een rommelig geheel, het is dan beter om voor koptekst en leestekst hetzelfde lettertype te kiezen. Per website kiezen we over het algemeen één of twee lettertypen die de identiteit van het bedrijf zo goed mogelijk uitstralen.


Passend beeldmateriaal

In vrijwel iedere website komt beeldmateriaal aan bod. Denk aan bijvoorbeeld foto’s, logo’s, iconen en illustraties. Deze elementen vullen een website aan en maken het interessant voor de bezoeker. Goed beeldmateriaal versterkt de uitstraling van de pagina en kan ervoor zorgen dat de stijl nog beter uitgedragen wordt.

Foto’s spreken mensen sterk aan, vooral wanneer er mensen op staan. Vooral wanneer bezoekers een product moeten aanschaffen kunnen zij verleid worden doordat een persoon er op een foto naar kijkt. Onbewust volgen we, als mensen, de kijkrichting van de persoon op de foto, waardoor het product ook onbewust aantrekkelijker wordt om aan te schaffen. Op deze manier kunnen we bezoekers naar belangrijke plekken op onze website leiden. Eigen beeld creëren en gebruiken in zowel foto, video of animatie draagt bij de algehele ervaring van je merk. Met eigen beeldmateriaal houdt je ook je merkervaring uniek. Stock-afbeeldingen (standaardafbeeldingen) met mensen vaak afstandelijk en Amerikaans. Maak de ervaring persoonlijk!


Grid

Structuur is wat een website overzichtelijk en rustig voor de ogen maakt. Wanneer je website strak uitgelijnd is, kunnen bezoekers de pagina’s gemakkelijk scannen en zien welke elementen bij elkaar horen en welke niet. Een grid zorgt er ook voor dat pagina elementen in een prettige verhouding ingedeeld zijn. Een tekst is bijvoorbeeld niet goed leesbaar wanneer deze over de hele breedte van een pagina ingedeeld is. Twee derde van de pagina is al een veel prettigere verhouding, die de ervaring van het lezen voor de gebruiker sterk verbetert.

Naast het indelen van de website is een grid ook erg handig voor het schalen van de website naar mobiele apparaten. Dit heet responsive. Er zijn een aantal gridsystemen die vanuit zichzelf schalen naar mobiele schermen. Wanneer Bootstrap bijvoorbeeld gebruikt wordt, is het vrij eenvoudig om de pagina elementen te verkleinen.


Deel dit artikel op social media

Klaar om een project te starten?
Wij ook!


*
*
*
Bel ons:050 211 1970
Contactgegevens

Helperpark 292F
9723ZA Groningen

T. 050-2111970
E. info@tpf.nu

Support

+31502111970 @TPF.NU

Het kantoor van TPF is bereikbaar van 9.00 tot 17.00.
Voor supportzaken en dringende ondersteuning in de avond of het weekend kun je bellen op het mobiele nummer van je contactpersoon.

IBAN: NL98RABO0153466065
KVK: 01166569
BTW: NL.8214.93.759.B01


Cookies

De noodzakelijke en statistiek-cookies verzamelen geen persoonsgegevens maar helpen ons de site te verbeteren. Ga je voor een optimaal werkende website inclusief embedded content? Lees meer over cookies

Meer informatie