Een inleiding tot animatie in webdesign
Animatie is niet alleen meer voor tekenfilms. Van bewegende beelden op volledig scherm tot kleine zweefeffecten, overal komen animaties tevoorschijn. Animatie is trendy, leuk en gebruiksvriendelijk.
En de obstakels voor het gebruik van animatie beginnen te vallen. Met de meeste gebruikers op snelle verbindingen en het gemak om iets te creëren, van eenvoudige bewegingen of een gekke gif tot enkele minuten actie, zijn animaties praktische en nuttige webontwerptools geworden.
Verken Envato Elements
Basisbeginselen van animatie
Animatie vindt plaats wanneer iets dat in stilstaande of tweedimensionale vorm is gemaakt, 'tot leven wordt gewekt' en lijkt te bewegen op een manier die natuurwetten volgt. Het is de manier waarop een stripfiguur over het scherm loopt of hoe een app-pictogram stuitert als een bal terwijl deze op het bureaublad van je Mac wordt geladen.
Een van de woorden die bijna synoniem is aan animatie is Disney. Begin jaren tachtig schreven twee van de beste animators van het bedrijf een boek met de 12 principes van animatie. De "Illusion of Life: Disney Animation" van Frank Thomas en Ollie Johnston biedt nog steeds het raamwerk voor animatie.
- Squash en stretch
- Anticipatie
- Enscenering
- Straight Ahead Action en Pose to Pose
- Volg door en overlappende actie
- Slow In en Slow Out
- Boog
- Secundaire actie
- Timing
- Overdrijving
- Solide tekening
- In beroep gaan
Webanimaties worden vaak opgeslagen als GIF, CSS, SVG, WebGL of video. Ze kunnen van alles zijn, van een eenvoudige onderstreping die wordt weergegeven wanneer u de muis over een woord beweegt tot een video op volledig scherm of een achtergrondafbeelding. Zoals bij elke andere ontwerptechniek, kunnen animaties subtiel zijn of kunnen ze moeilijk te vermijden zijn.
Opkomende trend van 2017
Animatie in webdesign is iets waar we elke dag mee beginnen. De sleutel tot animatie als ontwerptrend is matiging. Kleine, eenvoudige animaties zijn boeiend en interessant; de gebruiker denkt er misschien helemaal niet aan dat het een animatie is. Grootschalige animaties kunnen een interessant visueel zijn dat u naar het ontwerp trekt. Maar als je te veel verschillende bewegende effecten gaat vermengen, kan dit een complete chaos veroorzaken.
Wat animatie trendy maakt, is realisme. In het huidige ontwerplandschap met zoveel platte en minimale stijlontwerpen, hebben gebruikers meer aanwijzingen nodig om te vertellen wat ze moeten doen. Eenvoudige stukjes animatie kunnen de gebruiker begeleiden zonder de esthetiek te veranderen. Het helpt bij het toevoegen van instructie en volgorde om schema's te ontwerpen die visueel te eenvoudig zijn om gebruikers voldoende richting te geven. In dit geval creëert animatie een gelukkig medium tussen uitgeklede eenvoud en bruikbaarheid.
De andere bijdragende factor aan deze trend is toegang tot tools aan de achterkant en gebruikersuiteinden van het ontwerp. Voor meer gecompliceerde animaties heb je Flash niet meer nodig. (En als je nog aan het bouwen bent in Flash, is het tijd om te stoppen.) Het kan op een aantal andere manieren worden bereikt. De animaties van vandaag lopen niet vast op websites of webservers, waardoor de effecten snel kunnen worden geladen voor gebruikers en met supersnelle internettoegangsanimaties niet overslaan of vast komen te zitten halverwege de evenementencyclus.
Grote versus kleine animaties
Als het gaat om animaties voor het web, valt het in twee even gemakkelijk te begrijpen categorieën: groot en klein. (Je kunt waarschijnlijk raden hoe deze eruit zien.)
Grote animaties zijn degenen die een schaal hebben. Vaak in de vorm van een video met een looptijd, vullen grootschalige animaties een aanzienlijk deel van het scherm op en zijn kenmerkend voor een korte film. Deze animaties dienen als brandpunt in het algehele ontwerp. Gebruikers hoeven vaak geen actie uit te voeren om de animatie in beweging te zien. Als je goed kijkt op de Studio Meta-site, zoomt elk van de grote afbeeldingen in terwijl je de kopie leest.
Kleine animaties zijn de kleine stukjes en beetjes die je ontdekt wanneer je begint te communiceren met een website. Deze divots kunnen de vorm hebben van zweeftoestanden, kleine stukjes versiering of handleidingen of hulpmiddelen voor bruikbaarheid. Kleine animaties zijn een accent dat bijdraagt aan de algehele esthetiek, maar het is onwaarschijnlijk dat het de focus van het ontwerp zal zijn. Op de site van Henry Brown is de simpele animatie dat als je goed kijkt, de ogen in de illustratie echt knipperen.
Wanneer moet u animatie gebruiken?
Het probleem met elke trend, inclusief deze, is weten wanneer je deze moet gebruiken. Animatie kan een geweldig trucje zijn voor uw ontwerptoolkit, maar is niet voor elk project geschikt. Animatie moet soepel en naadloos zijn, niet springerig of mechanisch. Het moet een doel dienen voor de gebruiker en de inhoud niet in de weg zitten.
De belangrijkste reden om animatie te gebruiken is om de bruikbaarheid te vergroten. Eenvoudige animaties kunnen geweldige hulpmiddelen zijn om mensen te helpen begrijpen welke knoppen ze moeten klikken of waar ze naartoe moeten in de kaart van een website. Veel ontwerpers die complexe scrolleffecten gebruiken, combineren een eenvoudige animatie met een gebruikershulpmiddel om te scrollen of te klikken. (Dit omvat alles van een eenvoudig stuiterend pictogram of woorden die verschijnen als een woord 'scroll naar beneden'.)
Bruikbaarheid komt in een paar vormen:
- Communicatiefunctie of hoe een website te gebruiken
- Toon verandering, zoals het correct invullen van een formulier of het markeren dat op een element kan worden geklikt
- Creëer een flow of leid gebruikers naar een call-to-action
De tweede reden om animatie te gebruiken is een esthetische. Animatie kan een geweldige 'versiering' zijn. Soms is het doel van een geanimeerd element puur visueel en dat is een acceptabel gebruik. Deze decoratieve animatie kan helpen bij het vertellen van een verhaal of het creëren van een emotionele verbinding tussen de interface en de gebruiker. Het doel van een animatie kan zijn om visuele interesse te wekken en een gebruiker gedurende langere tijd betrokken te houden bij uw site.
Bedenk bij het maken van een puur visuele animatie wat de bedoeling is. Denk na over de verbinding die u wilt dat een gebruiker heeft. Moet het leuk of verrassend zijn? Is het een beetje unieke inhoud die is ontworpen om te delen? Zelfs een puur beeld moet een doel hebben.
Middelen
Klaar om te beginnen met animeren? Hier zijn een paar bronnen voor verder lezen en hulpmiddelen om u op weg te helpen.
- De video Illusion of Life toont elk van de 12 principes op een manier die gemakkelijk te begrijpen is.
- "Webanimatie op het werk" van A List Apart is een geweldige bron over wat animatie doet werken.
- De "Beginner's introductie tot CSS-animatie" laat zien hoe je een vierkant in een cirkel verandert met behulp van CSS-eigenschappen.
- Elastische geanimeerde SVG-elementen is een zelfstudie over het integreren en animeren van een SVG-component.
- De presentatie van Art of UI Animations door Mark Geyer gebruikt animatie om de concepten uit te leggen.
- "15 Top HTML5-tools om geavanceerde animaties mee te maken" is een geweldige stap op het volgende niveau en een lijst met tools als je de basis al kent.
- De Survival Kit van de Animator leert basisprincipes die van toepassing zijn op alle vormen van animatie.
Gevolgtrekking
Als het gaat om animatie, is de vuistregel: goede animatie zal de gebruikerservaring verbeteren. Dit kan in de vorm van een emotionele connectie - zoals een leuke, positieve ervaring - of door een site gebruiksvriendelijker te maken.
Animatie is een leuke techniek die voor veel verschillende toepassingen veel standaarder is geworden. Als je op zoek bent naar inspiratie, lees dan zeker dit artikel door en klik op de links naar de visuele voorbeelden, bezoek de sites en speel met de geanimeerde functies daarin. Veel plezier!
