Animatie van je app of site
Als jouw business draait rond een app of een website, dan moet een animatie ook duidelijk en overzichtelijk de interface weergeven.
Screenshots zijn moeilijk te bekijken als de video op normale grootte wordt afgespeeld. Als er te veel tekst te zien is, proberen kijkers alles te lezen en ben je de aandacht even kwijt.
Voorbeelden van app en website animaties
Clearfacts
ClearFacts digitaliseert de papierstroom van ondernemers en boekhouders.
Adhese
Adhese advertentieoplossingen voor publishers, waar ook surfers de vruchten van plukken.
Prezly
Video Animatie voor Prezly om dit PR-platform voor marketing teams in de kijker te zetten
Mijn Telenet
Video Animaties voor Telenet om Mijn Telenet en de Support app in de kijker te zetten
Best practices
Swörl heeft een speciale aanpak om apps en websites overzichtelijk te tonen in animaties. Het storyboard bestaat uit illustraties van je app of site die alleen de essentie van de interface overhouden. Animatie en kleurgebruik maken de interacties duidelijker.
Tekst: zo weinig mogelijk
Als er mensen te zien zijn in een animatie video, zullen we eerst naar hen kijken. Naar hun ogen. Maar als we een beeld zonder mensen te zien krijgen, dan kijken we eerst naar de tekst.
Heb je wel eens een Powerpoint slide gemaakt met veel tekst op? Als je die toont, dan leest je publiek eerst alles wat in beeld komt en kijkt dan pas terug naar de presentator. Zo ben je de mensen eventjes helemaal kwijt.
Daarom moet een animatie zo weinig mogelijk tekst bevatten en wordt tekst in de interface van een website of app vervangen door balkjes. Als we woorden wel tonen, dan verdienen ze aandacht: belangrijke menu items of knoppen. Eéntje tegelijk.
Design principes
Principes die gebruikt worden om échte websites en apps gebruiksvriendelijk te maken, zijn ook van toepassing om interfaces te tonen in animaties.
Zo herkennen surfers makkelijk conventies zoals een website met een logo links boven en een horizontale menubalk met één actieve knop. Door de tekst weg te laten en het kleurcontract voldoende groot te maken, herken je in een oogwenk een website.
Ook hardware waar apps en sites op getoond worden, wordt zo eenvoudig mogelijk getekend om niet te veel aandacht te trekken. Een laptop bestaat amper uit 2 grijze vlakken en een cirkel voor de webcam, zodat jouw interface de show kan stelen.