Ga je zelf aan de slag met het ontwerpen van een website? Wil je je huidig webontwerp verbeteren? Lees dan zeker dit artikel, waarbij ik dieper inga op 10 UI/UX webdesign tips, die jouw webontwerp radicaal zal verbeteren.  Ben je nieuw in webdesign? Lees dan eerst het artikel : “Website ontwerpen in 6 stappen”.

UI staat voor User Interface, ofwel gebruikersomgeving. Dit kan bijvoorbeeld de gebruikersomgeving van een website, maar ook van een mobiele applicatie zijn natuurlijk. 

Niet alleen het ontwerp, maar net het goed functioneren van alle elementen in de interface zijn voor een UI designer van groot belang. Het uiteindelijke doel van (UI) User Interface design is om tot een betere gebruikerservaring te komen. Daar waar UX zich richt op de totale gebruikerservaring, ligt bij UI de focus specifiek op de interface. Hieronder wordt er dan ook dieper ingegaan op 10 webdesign tips, die jouw UI/UX ontwerpen radicaal zullen verbeteren.

Tip 1: De 60-30-10 Regel voor kleuren in een ontwerp.

Laat we beginnen met kleur als één van de eerste webdesign tips. Deze vrij gemakkelijke regel deelt de kleuren in jouw ontwerp op in 3 delen.

• 60% = De achtergrondkleur. Dez achtergrondkleur neemt het grootste deel op van jouw ontwerp en is meestal een vrij neutrale kleur. Bv. een tint van een basiskleur zoals wit, grijs of zwart.
• 30% = de complementaire kleur. Hiermee probeer je contrast te scheppen, zodat headlines, titels en tekst leesbaar wordt.
• 10% = De accentkleur. Hiermee leg je focus op de belangrijkste elementen zoals knoppen (buttons) of andere soorten call to actions.

Hier kiezen we voor een voorbeeld met een achtergrondkleur in wit/grijs met daarbij een contrasterende donkere blauwe kleur en als accent een frisse en felle groene kleur. Maar dit kan ook net andersom bijvoorbeeld.

Je ziet deze regel praktisch in onderstaand voorbeeld. Hierbij werd gekozen om de 60% aan de achtergrondkleur toe te wijzen, de 30% aan de tekstkleur en de 10% aan de kleur van de knop. Zoals je kan zien, kan je nog steeds spelen met kleur. In voorbeeld A namen we een tint van wit/grijs als achtergrond kleur, en we draaiden de kleuren om in stijl B.

Op deze manier creëer je rust en duidelijkheid in je ontwerp, wat duidelijk een verschil maakt in stijl A en B in tegenstelling tot het voorbeeld aan de rechterzijde.

Tip 2: Gebruik geen Puur Zwart en Wit

Puur zwart (#000000) en puur wit (#FFFFFF) zijn zeer contrasterende kleuren. Zeker als je ze in combinatie gebruikt met elkaar. Maar let erop dat dit ook kan zorgen voor een overload aan contrast in je ontwerp waarbij je bezoekers (onbewust) snel afhaken doordat deze teveel contrast geven. Gebruik daarom liever een lichte afwijking of tint van één van deze kleuren. Dit geeft meer rust terwijl er toch genoeg contrast blijft om alles goed te kunnen blijven lezen.

Zie hieronder het voorbeeld en oordeel zelf welk ontwerp het meeste rust uitstraalt.

Uiteraard (zoals alle regels) zijn er specifieke redenen om toch af te wijken van deze regel en puur zwart of wit te gebruiken.

Tip 3: Uitlijning van tekst : Links ipv gecentreerd

In veel webontwerpen wordt content (tekst, foto’s en infoboxes zoals hieronder) centraal in 2, 3 of 4 kolommen op een webpagina weergegeven. Hierbij wordt dan vaak gekozen voor gecentreerde tekst aangezien de kolommen ook centraal op de webpagina staan. Maar zoals je kan zien is gecentreerde tekst veel moeilijker en vermoeiender om te lezen. Probeer dan ook zo vaak mogelijk de uitlijning te gebruiken die gangbaar is voor je bezoekers (links voor Westerse gebruikers).

Tip 4: Limiteer je tot 2 verschillende lettertypes (typeface)

Jouw boodschap breng je naast foto’s met titels,  tekst, buttons en call to actions. Zorg voor consistentie in het ontwerp door je te limiteren tot 2 verschillende lettertypes (font faces). Variaties op 1 lettertypes kan uiteraard wel (bv in html font-weight).  Te veel verschillende lettertypes zorgen ervoor dat jouw boodschap niet duidelijk is en jouw bezoekers niet in één oogopslag de structuur van jouw website begrijpen.

Tip 5: Gebruik consequente lettertype groottes

Naast de verschillende lettertypes spring je best ook bedacht om met consequente lettertype groottes (fontsizes). Zorg dat je lettertypes niet alleen goed leesbaar zijn (niet te klein of te groot), maar zorg ook voor consequente verschillen in titel en tekst. Zo is je ontwerp duidelijk en overzichtelijk.

Tip 6: Gebruik witruimte om je ontwerp te laten ademen.

Ontwerpen moeten kunnen ademen. Probeer hiervoor gebruik te maken van witruimte (whitespace of negative space) om je boodschap duidelijker te maken. In dit voorbeeld gebruiken we witruimte om marges en padding toe te voegen in ons ontwerp, waarbij de boodschap overzichtelijker wordt en de bezoeker duidelijk een titel, tekst en dan bijhorende knop kan onderscheiden. Witruimte of negatieve ruimte is kleurgebonden, en hoeft dus niet perse wit te zijn. Hiervoor gebruik je doorgaans jouw gekozen achtergrondkleur.

De noodzaak aan het consistent gebruik van witruimte wordt zeer belangrijk in minimalistisch ontwerp. Klik hier voor een “Handleiding minimalisme in webdesign“.

Tip 7: Zorg voor visuele hiërarchie

Na het toevoegen van witruimte moet je zorgen dat er hiërarchie ontstaat tussen de verschillende elementen. Dit kan je doen door kleurverschillen, maar ook verschillen in lettertypes (grootte/dikte). Probeer hier consequent in te zijn, en duidelijk voorrang te geven aan de verschillende elementen zodat alles overzichtelijk blijft. Voor overzichtelijke ontwerpen kan je ook verder lezen op “12 Tips voor een beter website ontwerp“.

Tip 8: Gebruik consistente afstanden in marges en padding.

Zorg voor rust in je ontwerp door consistente afstanden tussen je elementen te gebruiken. Doe je dit niet, ziet je ontwerp er snel slordig en onoverzichtelijk uit. In onderstaand voorbeeld zie je duidelijk een verschil en is het beste ontwerp, datgene waarbij de afstanden horizontaal en verticaal hetzelfde zijn.

Tip 9: Gebruik een design systeem zoals het 8 pixel grid

Om nog iets verder in te gaan in consistente afstanden, kan je ook gebruik maken van een design systeem. Je wil immers niet altijd overal dezelfde afstand tussen je titel, tekst, foto’s en knoppen. Maar toch wil je dat deze afstanden zich consistent tov elkaar verhouden. 

Hierbij is een populair systeem het 8 pixel grid.

In dit design systeem ga je afstanden (padding, marges, maar ook lettertypegroottes etc) opdelen vanuit veelvouden van 8. Dus je kan afstanden gebruiken van 8 pixels, 16 pixels, 32 pixels, 64 pixels etc. Ongeacht dat deze afstanden toch verschillend zijn, zullen ze een consistent geheel vormen als ze goed gebruikt worden. Zie in onderstaand voorbeeld hoe we dit toepassen op de infoboxes. 

Lees hier verder alles over het 8 pixel grid design system.

Tip 10: Patroonherhaling – Wees consistent in je ontwerp

Bezoekers gaan op jouw website meteen op zoek naar de info die zij zoeken. Hierbij willen ze meteen een overzicht en duidelijke structuur van hoe jouw ontwerp in elkaar zit. Gebruik je teveel verschillende elementen, en zijn deze elementen te verschillend tov elkaar, dan is het risico groot dat je bezoekers snel zullen afhaken en elders hun info opzoeken. Zorg daarom tot een consitent ontwerp door gebruik te maken van patroonherhaling. Zorg voor herhaling van gekende elementen (titels, designobjecten, ..) om zo een structuur aan jouw bezoeker aan te bieden.

Voor meer webdesign tips kan je ook terecht in het artikel : Website ontwerpen in 6 stappen

Wil je nog meer webdesign tips?

Probeer snel deze regels uit op jouw (web)design project! Wil je verder lezen of nog meer webdesign tips, kan je terecht bij “de Worfkflow van website ontwikkeling in 10 stappen” of kijk op de homepagina om een professionele website te laten maken.

Uitgelichte foto en infobox foto vanuit unsplash – https://unsplash.com/@charlesdeluvio & https://unsplash.com/@lvnatikk