Onderscheid jouw website met SVG-animaties

Wil jij jouw bedrijf op een unieke manier onderscheiden van je concurrent? Dat kan! Bijvoorbeeld door een opvallende huisstijl of duidelijke boodschap. Maar het kan ook anders: gebruik SVG-animaties. Wat is een SVG-animatie en waarom wil je dit op je website? Dat vertel ik graag.

SVG staat voor ‘scalable vector graphics’. Wikipedia beschrijft een SVG ook wel als:

“een op XML gebaseerd bestandsformaat voor statische en dynamische vectorafbeeldingen.”

Klinkt als een hoop abracadabra, maar het komt op het volgende neer: SVG’s zijn afbeeldingen die aan te passen zijn aan elke (beeldscherm)grootte zonder dat de kwaliteit ervan verloren gaat. Dit betekent dat een afbeelding altijd scherp blijft, hoe groot of hoe klein je hem ook maakt. SVG-animaties zijn SVG-afbeeldingen die voor een deel geanimeerd zijn. Een element uit de afbeelding is bewegend gemaakt.

Ten eerste zijn SVG-animaties relatief nieuw en innovatief. Je ziet ze nog niet veel op websites terugkomen. Een kans voor jou om je website door middel van SVG-animaties te onderscheiden van je concurrent. Bovendien trekt een animatie de aandacht van de bezoeker en triggert het hem of haar om een bepaalde handeling uit voeren. Daarom wordt een SVG-animatie ook vaak gekoppeld aan een call-to-action, bijvoorbeeld voor het downloaden van een brochure of om contact op te nemen met je bedrijf. Als laatste zien SVG-animaties er niet alleen leuk uit, maar ze geven ook een twist aan de ervaring van bijvoorbeeld jouw logo, de iconen en knoppen op je website.

Ga met je muis over de iconen heen om de animatie te zien.

SVG-animaties komen in veel verschillende vormen voor, bijvoorbeeld in de vorm van bewegende iconen. Wij gebruiken er een aantal op onze website, zoals het telefoontje dat rinkelt, het potlood dat een lijntje tekent en de statistieken die omhoog bewegen. Daarnaast kun je een bewegend element toevoegen aan jouw bedrijfslogo als je erop klikt of met je muis erover heen beweegt. Probeer het maar eens bij ons logo!

Bovendien kun je volledige rijen laten animeren of er juist voor kiezen om alleen wat speciale elementen toe te voegen aan de knoppen op jouw website. Zorg bij het kiezen van één of meerdere SVG-animaties altijd dat ze passen bij jouw huisstijl en het doel waarvoor de animatie dient. Let er wel op dat de bewegende elementen niet afleiden van jouw boodschap.

Denk je nu: “ik wil ook SVG-animaties op mijn website” en weet je niet zo goed hoe je dit moet aanpakken? Dan ben je bij ons aan het juiste adres! Wij kunnen jou adviseren over de mogelijkheden van SVG-animaties en deze ook voor je ontwerpen, animeren en integreren op je website. Kom gerust langs om te brainstormen met een kop koffie erbij. Wil je graag op de hoogte blijven van andere trends en ontwikkelingen? Volg ons dan op LinkedIn of schrijf je in voor onze tweemaandelijkse nieuwsbrief.