martijnavans-blog

[martijnavans-blog]

Eindanimatie met geluid

Als de bovenstaande video niet afspeelt probeer deze link https://youtu.be/15YI6lCGlAc

Definitieve versie van de eindanimatie waar geluid en beelden samenkomen.  Bronvermelding: Kassa https://freesound.org/people/Timbre/sounds/404028/

Button Press https://freesound.org/people/sjnewton/sounds/256566/

Highlight coffee https://freesound.org/people/ChristianAnd/sounds/468852/

Pop https://freesound.org/people/LamaMakesMusic/sounds/411611/

Coffe woosh https://freesound.org/people/SkyernAklea/sounds/430077/

Achtergrondmuziek https://www.bensound.com/royalty-free-music/track/jazzy-frenchy

[martijnavans-blog]

Eindanimatie zonder geluid

Als de bovenstaande video niet afspeelt probeer deze link https://youtu.be/szoPZE4PL-U In deze eindversie heb ik me gefocust op het samenvoegen van alle beelden tot een geheel. Door knoppen groter en te laten worden probeer ik er meer nadruk op te leggen. Dit gebeurd ook bij het kiezen van een koffie. Verder popt de guide character altijd van de dezelfde plek in beeld om het zo voor de gebruiker consistent te houden. De volgende stap is het toevoegen van geluid om het een kloppend geheel te maken.

[martijnavans-blog]

Openingsscherm Animatie en transitie tussen schermen

Ik heb een begin gemaakt met het animeren van de animaties. Ik heb voor de button “begin” een persuasive design toegepast om er zo voor te zorgen dat de gebruiker hier op gaat klikken. De button maakt hiervoor een grow/shrink beweging. 

[martijnavans-blog]

Iteratie op de stijl

Ik heb een iteratie slag gemaakt op de stijl van de schermen. De vorige stijl pasten niet helemaal binnen het concept koffie qua kleur. Verder heb ik een nieuw element toegevoegd boven aan de schermen. Dit is koffie die over het scherm loopt. Deze wordt ook geanimeerd tussen schermen om zo voor een vloeiende, unieke transitie te zorgen. 

Verder heb ik meer schermen uitgewerkt om hier in het vervolg gemakkelijk de animaties op toe te kunnen passen. 

[martijnavans-blog]

Storyboards

Na aanleiding van de feedback die ik heb gekregen op mijn voorgaande werk ben ik storyboards gaan maken. Tijdens het maken van de mockups merkten ik ook dat het  lastig was om het volgende scherm te bepalen en hoe deze animatie er dan uit gaat zien. Het maken van de storyboards geeft hier meer duidelijkheid en houvast in. 

[martijnavans-blog]

Transitie tussen de animaties

Voor de transities tussen de pagina’s heb ik gekozen voor een slide effect. Zo verspringen de pagina’s niet en wordt het een geanimeerd geheel.

[martijnavans-blog]

Bij het gebruik van de animatie wil ik ook achtergrond muziek gebruiken. Dit zorgt ervoor dat de ervaring levendiger wordt. Ik heb daarom gekozen voor Jazzy Frenchy een vrolijk nummer dat bij mijn festival past.

bron: Jazzy Frenchy. Geraadpleegd op 22 mei 2019, van https://www.bensound.com/royalty-free-music/track/jazzy-frenchy

[martijnavans-blog]

Voor het geluid tussen de pagina’s door wil ik een woosh/swipe geluid maken. Dit maakt de animatie krachtiger en duidelijker voor de gebruiker.

bron: WOOSH PROCESSED. Geraadpleegd op 22 mei 2019, van https://freesound.org/people/SkyernAklea/sounds/430077/

[martijnavans-blog]

Ik wil dit klik/plop geluid gebruiken als een gebruiker op een button drukt, dit geeft de gebruiker feedback. Ik vind het geluid goed passen binnen het thema door de wat warme klank.

bron: UI_Plop_Simple. Geraadpleegd op 22 mei 2019, van https://freesound.org/people/LamaMakesMusic/sounds/411611/

[martijnavans-blog]

Animatie openingsscherm

De eerste animatie voor het openingsscherm. De “Begin” button maakt een pulse animatie zodat de gebruiker ziet dat dit hem naar de volgende stap kan brengen.

[martijnavans-blog]

Mockup hoofdmenu

[martijnavans-blog]

Mockup openingsscherm guide character

[martijnavans-blog]

Mockup openingsscherm button

[martijnavans-blog]

Mockup openingsscherm

[martijnavans-blog]

Voor mijn guide character heb ik gekozen voor een koffieboon. De boon heeft verschillende gezichtsuitdrukkingen om het karakter levendiger te maken.

[martijnavans-blog]

Concept: zie afbeelding

Locatie: Koffie Festival