ux design for video animations
TRANSCRIPT
![Page 1: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/1.jpg)
Hi, I’m Sander Spolspoel from Swörl
![Page 2: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/2.jpg)
VIDEO ANIMATION OF USER INTERFACES
![Page 3: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/3.jpg)
You have a great idea for a startup: deliver fresh meals. Never been done before.
![Page 4: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/4.jpg)
But you’ll be cooking by the front door. You need a video to explain that.
![Page 5: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/5.jpg)
THE FOLLOWING MONTAGE SHOWS WHAT THESE ANIMATIONS
USUALLY LOOK LIKE.
![Page 6: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/6.jpg)
![Page 7: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/7.jpg)
60% OF THE WORK IS ANIMATING WEB OR APP INTERFACES.
![Page 8: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/8.jpg)
Never use screenshots. Redraw every interface.
![Page 9: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/9.jpg)
TIME & SPACE ARE NO LUXURIES
![Page 10: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/10.jpg)
![Page 11: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/11.jpg)
These screens are all shown in 7 seconds.
![Page 12: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/12.jpg)
You have 1,5 seconds per screen.
![Page 13: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/13.jpg)
This is a website to show in an animation.
![Page 14: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/14.jpg)
Pretty small on a mobile device.
![Page 15: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/15.jpg)
Even smaller in portrait mode (popular)
![Page 16: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/16.jpg)
The redrawn version focusses on the essence.
![Page 17: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/17.jpg)
When watched smaller, more is retained.
![Page 18: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/18.jpg)
And it takes less brainpower / sec
![Page 19: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/19.jpg)
THE ART OF SHRINKING A UI
UI
![Page 20: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/20.jpg)
SPEEDVS BEAUTY
Rule 1 for shrinking UIs
![Page 21: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/21.jpg)
You have another startup: a taxi service to rescue you from a forrest.
![Page 22: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/22.jpg)
What will the trees look like?
![Page 23: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/23.jpg)
This is less functional, more emotional.
![Page 24: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/24.jpg)
The one on the right is even less functional and even more evocative.
![Page 25: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/25.jpg)
An animation needs both: functional design and emotion.
![Page 26: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/26.jpg)
Complexity and emotion in the back, functional interface in the front.
![Page 27: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/27.jpg)
Domain is available, if you like.
![Page 28: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/28.jpg)
TEXTKILL ALL
Rule 2 for shrinking UIs
![Page 29: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/29.jpg)
![Page 30: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/30.jpg)
You can’t NOT read text in an image.
![Page 31: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/31.jpg)
![Page 32: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/32.jpg)
So when text is shown, it’s small and intended to read.
![Page 33: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/33.jpg)
your eye usually follows almost all text
![Page 34: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/34.jpg)
CONVENTIONSMAX OUT THE
![Page 35: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/35.jpg)
Top left logo, top menu bar, content you know: conventions ensure quick understanding.
![Page 36: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/36.jpg)
Site with complex navigations,
are best not duplicated in animation.
![Page 37: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/37.jpg)
We leave out the interface & focus on content.
![Page 38: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/38.jpg)
COLORGUIDES THE EYE
![Page 39: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/39.jpg)
The girl stand out because of color contrast.
![Page 40: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/40.jpg)
Buttons stand out. The mug on the right was a mistake.
![Page 41: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/41.jpg)
I like the Kuler site to generate swatches based on style guides.
![Page 42: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/42.jpg)
Color in the background can unite scenes
to create a mental space.
![Page 43: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/43.jpg)
if your identity has few colours and you use them as accents...
![Page 44: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/44.jpg)
you’re left with Mr. Grey.
![Page 45: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/45.jpg)
if there’s only 1 color, we take it away to reintroduce it as an accent.
![Page 46: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/46.jpg)
![Page 47: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/47.jpg)
MS Word is mainly blue with orange accents.
![Page 48: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/48.jpg)
ICONS& METAPHORS
![Page 49: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/49.jpg)
This is my job: replacing text with images.
![Page 50: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/50.jpg)
That’s an easy icon.
![Page 51: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/51.jpg)
this represents “creative professionals”
![Page 52: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/52.jpg)
Forget what you think something looks like
Look better.
![Page 53: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/53.jpg)
I changed a characters head.
What makes this body female?
![Page 54: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/54.jpg)
Head Chest Shoes tummy
![Page 55: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/55.jpg)
And caveman back.
![Page 56: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/56.jpg)
What color are people of color really?
![Page 57: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/57.jpg)
More pink than you think.
![Page 58: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/58.jpg)
Simple icon.
![Page 59: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/59.jpg)
Combining simple icons instead of making a complex one.
![Page 60: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/60.jpg)
visualising the opposite makes it funny
![Page 61: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/61.jpg)
Create your own metaphors
![Page 62: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/62.jpg)
By using repetition
![Page 63: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/63.jpg)
![Page 64: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/64.jpg)
![Page 65: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/65.jpg)
Google image can inspire for complex icons / terms
![Page 66: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/66.jpg)
Google image can inspire for complex icons / terms
![Page 67: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/67.jpg)
GRAPHTRIM THE
![Page 68: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/68.jpg)
What can you throw away?
![Page 69: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/69.jpg)
![Page 70: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/70.jpg)
“the Biggest Part” is a very simple pie chart
![Page 71: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/71.jpg)
OUTZOOM
![Page 72: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/72.jpg)
A storyboard allow consistency checks (colors, metaphors,...)
![Page 73: UX design for video animations](https://reader034.vdocuments.mx/reader034/viewer/2022052606/587fa9851a28ab825e8b79f7/html5/thumbnails/73.jpg)