Welke styling fouten zijn funest voor je website?

Welke styling fouten zijn funest voor je website?

We willen graag dat een website er “mooi” uitziet. Alleen laten we wel wezen, “mooi” is natuurlijk erg subjectief. Wat ik mooi vind, vind jij misschien wel helemaal niet mooi.

Als webdesigner kijk je dan ook vaak verder dan het uiterlijk van een website en ga je veel meer in op de functionaliteiten van een website. Ondanks dat “functionaliteit” helemaal niet sexy klinkt, is het wel een mooie basis om van daaruit naar een “mooie” website toe te werken.

De laatste jaren ben ik veel verschillende websites tegen gekomen, die er op het oog goed uitzien, maar totaal niet functioneren. Denk aan knoppen die niet doorgelinkt zijn of een mooi gestylde website op desktop, maar totaal niet responsive op mobiel. Dit kan en mag natuurlijk niet meer, maar gebeurt helaas nog veels te vaak.

Ook zie ik websites die wel heel functioneel zijn, maar waar cruciale styling fouten zijn gemaakt. Hieronder vind je een aantal die je beter kunt vermijden.

Gebruik van schreeuwerige kleuren.

Met een mooi kleurenpalet is niets mis mee, zelf ben ik fan van het gebruik van kleuren mits deze in harmonie zijn. En met harmonie bedoel ik, in dezelfde kleurtonen of het juiste contrast van de kleuren.

Tegenwoordig zie ik vaak te veel kleuren bij elkaar op een website,  die dan ook nog eens vaak met elkaar vloeken. En als ik spreek over vloekende kleuren, denk dan aan fel rood met felroze samen in een blok of groen en blauw samen zonder een extra kleur die het afbreekt. Ik zou eindeloos kunnen doorgaan over voorbeelden hoe het niet moet, maar ik ga je vertellen hoe je wel op de beste kleurencombinatie komt. Het is namelijk niet makkelijk om de kleuren vooraf te bepalen voor je website, maar met de onderstaande tip wordt het een stuk makkelijker en leuker.

Maak gebruik van Coolors.co.

Ik zweer bij dit programma om van te voren te kunnen zien hoe kleuren bij elkaar komen. Coolors.co heeft een kleuren generator en is geheel gratis te gebruiken. Het fijne van deze generator is, dat wanneer je 1 kleur ziet die je mooi vind, kun je deze “vast” zetten en met de spatiebalk gaat het programma verder met kleuren vinden.

Je kunt de kleuren schuiven om te zien hoe kleuren naast elkaar staan. Het fijne is dat elke kleur direct wordt weergegeven in de juiste hexa code. Deze code kun je instellen in je website en doorgeven aan je designer.

Meer dan 3 kleuren gebruiken op je website.

Ik snap het, het is niet makkelijk om te kiezen tussen de kleuren je nu echt mooi vind, zeker als je aan de slag gaat met coolors.co
Daar zie je de mooiste kleuren combinaties voorbij komen en keuzestress is makkelijk gecreëerd op deze manier. Maar hoe verleidelijk het ook is, gebruik niet meer dan 3 kleuren op je website. Als er een vierde kleur bij komt zorg er dan voor dat dit een grijstint is.

Hoe kies je het beste je kleuren uit? 

Kies 1 hoofdkleur, deze kun je plaatsen in achtergrond vlakken om bijvoorbeeld de Call to Action(CTA) beter uit te laten komen.
Kies 1 accent kleur, deze kun je gebruiken voor je knoppen op je website.
Kies 1 thema kleur, dit is de kleur die je instelt voor je links en het oplichten van tekst, bijvoorbeeld in het menu.
En je kunt een grijs tint kiezen om speling in de website te krijgen in blokken.

Gebruik van slechte afbeeldingen.

Oef, als iets een doorn in het oog is, zijn het wel afbeeldingen die niet geoptimaliseerd zijn. Afbeeldingen waarvan je letterlijk de structuur van de pixels in kunt zien of een te grote afbeelding ter begeleiding van je tekst.

Deze styling fout is makkelijk te voorkomen door het gebruiken van een programma zoals Canva. Je kunt Canva zien als een compleet Adobe Photoshop pakket, zonder dat je daar een extra cursus voor nodig voor hebt om er gebruik van te maken. Wat ook een fijne bijkomstigheid is, is dat de kosten aanzienlijk lager liggen dan Adobe. (€108,- euro p.j. in plaats van €839,88,-  p.j.)

Daarnaast heeft Canva een bibliotheek vol met templates die je naar eigen hand kunt designen en je op deze manier heel gemakkelijk en eenvoudig je eigen brand materiaal kunt maken voor jouw praktijk. Canva heeft verschillende formaten al voor je klaar staan, denk aan Instagram bericht, facebook bericht, maar ook voor als je folders wilt laten afdrukken.

Hoe zorg je er nu voor dat je de juiste afmetingen en pixels gebruikt voor je website? Want dat is de eerste stap die je maakt. Hieronder vind je een overzicht van de juiste formaten. Nu kun je in Canva een nieuw ontwerp maken op basis van de juiste pixel formaten.

Wanneer je een afbeelding hebt geoptimaliseerd is er nog een laatste stap die je MOET nemen, dat is er voor zorgen dat je afbeelding niet te groot (en in dit geval bedoel ik te zwaar) voor je website is. Dit doe je door je afbeelding te comprimeren naar een kleinere afbeelding. Er zijn genoeg programma’s die je daarbij kunnen helpen. Zelf maak ik veel gebruik van compressjpeg.com wat gratis is, maar wanneer je een betaald Canva account hebt, kun je de bestandsgrootte ook gelijk al bij het exporteren van de afbeelding instellen en is het dus niet meer nodig om de afbeelding nog eens te comprimeren.  

Niet consistent zijn in vormen en schaduwgebruik.

Het lijkt maar een klein detail, echter het gebruik van continu verschillende vormen op je website komt heel chaotisch over en je loopt daarbij het risico dat je je bezoeker verliest.
Als je gaat voor een ronde afwerking van je afbeelding, zorg dat dit dan ook weer terug komt in bijvoorbeeld je knoppen. Dit zorgt voor een rustige en consistente uitstraling.

Je kunt deze eigenschappen al direct instellen in je thema instellingen van je Bloomsite Zodat je niet iedere keer weer deze eigenschappen per element hoeft aan te passen.

Wil je toch wat meer speelsheid in je website, werk dan bijvoorbeeld met schaduwen rondom je afbeeldingen of met verdelers. 

Geweldig design op desktop, maar een warboel op mobiel.

Helaas zie ik dit nog steeds vaak gebeuren, dat de desktop versie er strak uitziet, maar zodra ik op mobiel kijk is alles verschoven. Dit is enorm zonde, zeker wanneer je weet dat de meeste bezoekers tegenwoordig op hun mobiel kijken.

Zodra je bezig bent met een pagina vorm te geven, check dan altijd of dit ook responsive is op mobiel. Dit kun je heel makkelijk checken door met je browserscherm te gaan schuiven. Je maakt dus je scherm smaller en automatisch schuift de inhoud van je website mee naar hoe het eruit ziet op mobiel.

In je Bloomsite kun je ook klikken op mobiel of tablet versie om het te zien. Loopt het niet synchroon dan kun je in je Bloomsite per scherm de juiste waardes instellen, zo weet je zeker dat jouw website op elke scherm er goed uitziet.

Lappen tekst.

Soms kom ik terecht op een website en dan heb ik het gevoel dat ik een boek aan het lezen ben. Kortom lappen tekst waar niemand blij van wordt, ook je bezoeker niet. Zorg dat de teksten op je website kort zijn en werk met veel witregels.

Heb je echt een verhaal te vertellen en kom je er echt niet uit met minder woorden? Maak er dan een blog van! Hier kun je helemaal los gaan met je tekst, let hierbij ook op dat je altijd gebruik maakt van witregels en eventueel met afbeeldingen om je verhaal wat kracht bij te zetten.

 Chaotische paginastructuur.

Nu ben ik zelf van nature wat chaotisch, aldus mijn omgeving. Echter, wanneer het gaat om het vormgeven van een webpagina, is een chaotische pagina structuur echt funest voor je bezoekersaantal.  Een chaotische pagina structuur gaat letterlijk van hot naar her en de bezoeker heeft na alle pagina’s te hebben doorlopen nog steeds niet door wat je voor hun kunt betekenen.

Het is dus belangrijk om een goede en chronologische opbouw te hebben, dat betekent vaak dat we af moeten stappen van wat wij zelf willen “geven” aan de bezoeker, maar de focus juist moet liggen op waarom een bezoeker op jouw pagina is en waar zijn/haar behoefte ligt. Dit kun je stap voor stap voor jezelf eerst uitschrijven, maak dus een planning voor je structuur vooraf.

Het is niet altijd makkelijk om het idee wat je in je hoofd hebt, om dit op papier te zetten en in dit geval is het een online versie van je blanco pagina. Vandaar dat wij bij Bloom, Bloomsite hebben ontwikkeld.

In je eigen Bloomsite staan de pagina’s al voor je klaar en hebben wij aan de hand van onze kennis en ervaring met therapeuten al een structuur aangelegd in je pagina’s, die al hebben bewezen dat ze werken. Want naast dat je website er “mooi” uit moet zien, wil je toch ook meer cliënten op deze manier werven?

Bekijk hier wat we voor jou kunnen doen >>>

Ik hoop dat je wat aan de bovenstaande tips hebt. Heb jij zelf geen zin of geen tijd om je Bloomsite vorm te geven? Neem dan contact met ons op voor de mogelijkheden.