Design

Design

Tot op de pixel nauwkeurig

We zijn gespecialiseerd in het maken van maatwerk websites en applicaties. Ieder goede website of app maken we op basis van een goed doordacht ontwerp. Eerst inventariseren we welke functies en pagina’s we gaan maken en vervolgens schetsen we dit uit in functionele wireframes. Het grafisch ontwerp is de laatste stap voordat we gaan ontwikkelen. Dit ontwerp sluit naadloos aan op de huisstijl en wordt tot op de pixel nauwkeurig opgeleverd.

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!


Wat maakt uiteindelijk een webdesign goed?

De onderdelen die in dit artikel staan zijn ingrediënten voor een ontwerp dat er professioneel uitziet. Het betekent niet dat je ontwerp automatisch goed is. Een goed ontwerp betekent niet per se dat je de perfecte kleur of het mooiste lettertype gebruikt. Het is pas goed wanneer alle factoren samen een prettige ervaring vormen voor de bezoeker. Een goed ontwerp hangt dus af van gebruiksvriendelijkheid, nut, interactie, een goed uitgedachte stijl, fotografie en andere beeldmerken. In een goed design staat de eindgebruiker altijd centraal.


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.


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.


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.


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.


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.


Een goed ontwerp voor jouw merk?

Top! We helpen je met alle liefde, zodat we samen kunnen kijken hoe we je merk beter kunnen positioneren. Ook helpen we je dan direct met meer conversie! Wat wil je nog meer?

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