Animaties die je website tot leven brengen
Met animatie en motion design geef je een website beweging, karakter en nét wat meer aandacht. Denk aan een subtiele beweging, een geanimeerd logo, een illustratie die tot leven komt of een opvallende visuele introductie.
Animatie kan ook functioneel zijn. Het kan de aandacht naar belangrijke informatie leiden, iets uitleggen of een product en merk op een aantrekkelijke manier presenteren.
Van een kleine webanimatie tot een complete bewegende illustratie: ik kijk naar wat past bij de stijl van je website én naar snelheid en gebruiksgemak.
Heb je een idee voor een animatie of voor een website? Laat me weten wat je in gedachten hebt, dan bespreken we de mogelijkheden.
Animatie preloader | Bon Appetit
Animatie logo | Miss Scarlett
Animatie preloader | Kopje Koffie
Animatie preloader | Dirigent
In mijn tijd had je geen tijd
I MISS YOU
Gerard | HTML5 Video
Animatie: Sander de Groot. Software: Illustrator, After Effects
Superman | HTML5 Video
Animatie: Sander de Groot. Software: Illustrator, After Effects
Alien | HTML5 Video
Animatie: Sander de Groot. Software: Illustrator, After Effects
Ei | HTML5 Video
Animatie: Sander de Groot. Software: Illustrator, After Effects
Een sterke eerste indruk
De eerste seconden op een website zijn waardevol. Met een unieke animatie, illustratie of visuele introductie geef je direct karakter aan je merk en trek je de aandacht.
Niet als traditionele preloader om wachttijd te verbergen, maar als creatieve opening die je verhaal en identiteit versterkt.
Heb je een idee, logo, product of karakter dat tot leven mag komen? Dan denk ik graag mee over een passende introductie voor je website.
Moderne browsers maken steeds meer mogelijk op het gebied van animatie, video en interactieve effecten. Met een actuele browser profiteer je bovendien van betere snelheid, veiligheid en ondersteuning van moderne webtechnieken.
Regelmatig updaten zorgt er dus voor dat websites niet alleen veiliger, maar ook beter worden weergegeven.
Animatie kan heel subtiel zijn: tekst die soepel in beeld verschijnt, een logo dat tot leven komt of een kleine beweging die de aandacht precies naar de juiste plek trekt. Maar ook uitgebreidere logo-animaties, infographics en illustraties zijn mogelijk.
Voor animaties op websites zijn verschillende moderne technieken beschikbaar, zoals CSS, JavaScript, SVG en video. Welke techniek het beste is, hangt af van de animatie en het doel. Daarbij let ik niet alleen op het visuele effect, maar ook op snelheid, scherpte en bestandsgrootte.
Met CSS en JavaScript kunnen elementen direct in de browser worden geanimeerd. In combinatie met SVG blijven illustraties en logo’s haarscherp op ieder schermformaat. Voor complexere animaties kan video een goede oplossing zijn. Moderne videoformaten bieden een hoge beeldkwaliteit bij een relatief kleine bestandsgrootte en kunnen bovendien interactief worden gestart en gestopt.
Zo wordt animatie geen los effect, maar een functioneel onderdeel van het ontwerp: om aandacht te trekken, iets duidelijk te maken of een website nét dat beetje extra karakter te geven.
