Doe inspiratie op en maak een webdesign moodboard

Maak keuzes in kleuren en lettertypen (fonts). Word bewust van bepaalde onderdelen van een website en hoe deze kunnen werken voor jouw website.

Verzamel wat nodig is voor een webdesign dat past bij jou én jouw ideale klant. Met deze verzameling aan gegevens, kunnen er één of meerdere moodboards gemaakt worden. En ga je goed van start met de ontwikkeling van jouw website!

Maak keuzes in kleuren en lettertypen (fonts). Word bewust van bepaalde onderdelen van een website en hoe deze kunnen werken voor jouw website.

Verzamel wat nodig is voor een webdesign dat past bij jou én jouw ideale klant. Met deze verzameling aan gegevens, kunnen er één of meerdere moodboards gemaakt worden. En ga je goed van start met de ontwikkeling van jouw website!

Inspiratie

Een beetje afkijken en inspiratie opdoen bij andere websites kan geen kwaad. Je komt er zo achter wat jij mooi en leuk vindt voor jouw toekomstige website én wat je absoluut niet zou willen.

Bekijk minstens 3 websites en noteer wat jij goed vindt aan deze websites. Kijk hierbij naar de indeling, kleuren en lettertypes (fonts). Verder kun je kijken naar de volgende onderdelen:

• Menu’s (met of zonder logo, kleuren, zichtbaar tot scrollen of juist zichtbaar houden);
• De homepages: starten met een slider (verlaagt wel de snelheid van een website) of alleen een grote of kleine headerfoto;
• Dynamische onderdelen, wel of niet leuk?;
• Blogoverzicht op je homepage of ook op andere plekken zoals in de footer;
• Welke informatie wil je in de footer?;
• Welke Call to Actions (afbeelding of tekst dat vraagt een bezoeker een bepaalde handeling uit te voeren) spreken je aan?;
• Bekijk ook eventuele review/testimonial pagina’s;
• Wat spreekt je aan op de contactpagina’s? Wel of niet een contactformulier? Een foto van jezelf erbij of niet?;
• De over mij pagina;
• De producten/diensten pagina (salespage);
• De blogpagina’s;
• Iconen;
• De knoppen.

Afbeeldingen

Ga op zoek naar afbeeldingen die jou aanspreken en bij jouw ideale klant passen. Bewaar deze afbeeldingen, deze worden later gebruikt voor de moodboard(s). Hiermee kun je goed kijken welk gevoel je wilt uitstralen met jouw website en daarbij passende kleuren zoeken.

Eigen foto’s zijn super voor jouw website! Laat de bezoeker kennis maken met jou, door afbeeldingen van jezelf te plaatsen. Ook eigen gemaakte foto’s van jouw dienst/product of sfeerfoto’s zijn aan te bevelen. Ze maken jouw website uniek!

Stockfoto’s kunnen natuurlijk ook gebruikt worden. Hier zijn wel een aantal Do’s and Dont’s….

Kleuren

Het beste is om 3 à 4 kleuren te gebruiken voor je website. Meerdere kleuren zouden voor onrust zorgen bij de bezoeker van jouw website.
Heb je al een huisstijl, gebruik dan de kleuren hiervan ook voor jouw website. Je kunt eventueel gebruik maken van de basiskleur van jouw logo en deze inzetten als hoofdkleur op jouw website.

Om bezoekers uit te nodigen om verder te gaan op jouw website (bijvoorbeeld naar jouw product of nieuwsbrief) kun je het beste gebruik maken van een contrasterende kleur. Wit en zwart zijn neutrale kleuren en kunnen altijd gebruikt worden op een website.

Kleur associaties

Het is ook goed om stil te staan bij de betekenis van kleuren en welk gevoel ze een bezoeker kunnen geven.

Wat wil jij uitstralen voor jouw product of dienst?

Om achter een specifieke kleur te komen die jij gevonden hebt op het internet, kun jij deze truc gebruiken.

Ga met je muis op het element (geen afbeeldingen) met de kleur staan en klik je rechtermuisknop in en kies vervolgens onderaan in de lijst voor inspecteren. Er opent nu een scherm onderin en aan de rechterkant kun je scrollen door het scherm om de kleur te vinden die jij mooi vindt. Dit staat omschreven als color, vakje met de kleur zelf en daarachter staat de HEX code (deze start met #).

Kopieer deze code inclusief # en ga naar https://www.color-hex.com/. Hier kun je de code invoeren en meer informatie ophalen, zoals naastliggende tinten, de CYMK-code (deze heb je nodig voor drukwerk) etc.

Fonts

Lettertypes, ook wel fonts genoemd in de webdesign wereld, vormen een belangrijk onderdeel voor jouw website. Er zijn vele lettertypen die bepaalde eigenschappen hebben. Deze eigenschappen kunnen gebruikt worden om ze te kunnen classificeren.

Monospaced font en proportioneel font

Bij monospaced is de ruimte tussen elke letter even groot (zoals Courier) en bij proportionele lettertypen is de afstand tussen letters aangepast om zo een prettig lezend en mooi geheel te krijgen (bijvoorbeeld Times New Roman).

Serif en sans serif

Dit zijn lettertypen met schreef of schreefloos. Met schreef worden de kleine streepjes aan de uiteinden van de letters bedoeld (bijvoorbeeld Century en een voorbeeld van sans serif is Open Sans)

Recht en cursief

Elk lettertypen kan cursief gemaakt worden, maar dit betreft lettertypen die van zichzelf al standaard naar rechts hellen (bijvoorbeeld Monotype Corsiva).

Display en handwriting

Display en handwriting fonts worden gebruikt als je in een korte tekst veel aandacht wilt trekken (een voorbeeld van display font is Abril Fatface en van een handwriting font is Amatic SC).

Voor jouw website heb je een header font (koppen) en een font voor de paragrafen nodig.
Kijk op andere websites welke fonts en combinaties hierin jou aanspreken. Ook leuk om te kijken is op Google Fonts en voor combinaties van header en paragraaf fonts op Pinterest.

Aan de slag!

Je hebt nu een mooie verzameling van gegevens waarmee je 1 of meerdere moodboards kunt maken.

Maak verschillende combinaties en ontdek welke kleuren, afbeeldingen en fonts het beste bij jouw bedrijf en jouw ideale klant passen!