Hi, I’m Sander Spolspoel from Swörl
VIDEO ANIMATION OF USER INTERFACES
You have a great idea for a startup: deliver fresh meals. Never been done before.
But you’ll be cooking by the front door. You need a video to explain that.
THE FOLLOWING MONTAGE SHOWS WHAT THESE ANIMATIONS
USUALLY LOOK LIKE.
60% OF THE WORK IS ANIMATING WEB OR APP INTERFACES.
Never use screenshots. Redraw every interface.
TIME & SPACE ARE NO LUXURIES
These screens are all shown in 7 seconds.
You have 1,5 seconds per screen.
This is a website to show in an animation.
Pretty small on a mobile device.
Even smaller in portrait mode (popular)
The redrawn version focusses on the essence.
When watched smaller, more is retained.
And it takes less brainpower / sec
THE ART OF SHRINKING A UI
UI
SPEEDVS BEAUTY
Rule 1 for shrinking UIs
You have another startup: a taxi service to rescue you from a forrest.
What will the trees look like?
This is less functional, more emotional.
The one on the right is even less functional and even more evocative.
An animation needs both: functional design and emotion.
Complexity and emotion in the back, functional interface in the front.
Domain is available, if you like.
TEXTKILL ALL
Rule 2 for shrinking UIs
You can’t NOT read text in an image.
So when text is shown, it’s small and intended to read.
your eye usually follows almost all text
CONVENTIONSMAX OUT THE
Top left logo, top menu bar, content you know: conventions ensure quick understanding.
Site with complex navigations,
are best not duplicated in animation.
We leave out the interface & focus on content.
COLORGUIDES THE EYE
The girl stand out because of color contrast.
Buttons stand out. The mug on the right was a mistake.
I like the Kuler site to generate swatches based on style guides.
Color in the background can unite scenes
to create a mental space.
if your identity has few colours and you use them as accents...
you’re left with Mr. Grey.
if there’s only 1 color, we take it away to reintroduce it as an accent.
MS Word is mainly blue with orange accents.
ICONS& METAPHORS
This is my job: replacing text with images.
That’s an easy icon.
this represents “creative professionals”
Forget what you think something looks like
Look better.
I changed a characters head.
What makes this body female?
Head Chest Shoes tummy
And caveman back.
What color are people of color really?
More pink than you think.
Simple icon.
Combining simple icons instead of making a complex one.
visualising the opposite makes it funny
Create your own metaphors
By using repetition
Google image can inspire for complex icons / terms
Google image can inspire for complex icons / terms
GRAPHTRIM THE
What can you throw away?
“the Biggest Part” is a very simple pie chart
OUTZOOM
A storyboard allow consistency checks (colors, metaphors,...)
Recommended
