Upload File

sex-up your apps using animations & prototype

  • Home
  • Design
  • Sex-up your Apps using animations & prototype
84
© Lunabee 2015 Sex up your Apps with Animations and Prototypes

Upload: thefamily

Post on 16-Jul-2015

395 views

Category:

Design


3 download

Report

Tags:

TRANSCRIPT

Page 1: Sex-up your Apps using animations & prototype

© Lunabee 2015

Sex up your Apps

with Animations and Prototypes

Page 2: Sex-up your Apps using animations & prototype

© Lunabee 2015

30%It’s tough to create an App

Page 3: Sex-up your Apps using animations & prototype

© Lunabee 2015

Lunabee

Page 4: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 5: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 6: Sex-up your Apps using animations & prototype

© Lunabee 2015

What makes a great interface

Page 7: Sex-up your Apps using animations & prototype

© Lunabee 2015

Respond to interactions, as quickly as possiblefrequently

Respond in an expected way

1. Natural

Page 8: Sex-up your Apps using animations & prototype

© Lunabee 2015

Static interfaces suck

Page 9: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 10: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 11: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 12: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 13: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 14: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 15: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 16: Sex-up your Apps using animations & prototype

© Lunabee 2015

Respond in an expected way

Page 17: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 18: Sex-up your Apps using animations & prototype

© Lunabee 2015

Sometimes, it gets more serious…

Page 19: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 20: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 21: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 22: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 23: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 24: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 25: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 26: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 27: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 28: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 29: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 30: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 31: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 32: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 33: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 34: Sex-up your Apps using animations & prototype

© Lunabee 2015

TableView

Page 35: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 36: Sex-up your Apps using animations & prototype

© Lunabee 2015

Not natural Bof

Recommended Recommended

Easing

Page 37: Sex-up your Apps using animations & prototype

© Lunabee 2015

1. Natural• Responsive • Behave as we expect • Alive

Page 38: Sex-up your Apps using animations & prototype

© Lunabee 2015

2. FlexibleRespect user’s “free will”

Page 39: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 40: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 41: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 42: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 43: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 44: Sex-up your Apps using animations & prototype

© Lunabee 2015

10 000 views / days

Page 45: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 46: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 47: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 48: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 49: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 50: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 51: Sex-up your Apps using animations & prototype

© Lunabee 2015

• Don’t be (too) intrusive • Allow customisation

2. Flexible

Page 52: Sex-up your Apps using animations & prototype

© Lunabee 2015

Straight to the point. Clear and simple.

3. Focus

Page 53: Sex-up your Apps using animations & prototype

© Lunabee 2015

Pareto’s principle

80 / 20

Page 54: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 55: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 56: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 57: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 58: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 59: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 60: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 61: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 62: Sex-up your Apps using animations & prototype

© Lunabee 2015

2. Flexible

3. Focus

1. Natural

Page 63: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 64: Sex-up your Apps using animations & prototype

© Lunabee 2015

Prototyping

Page 65: Sex-up your Apps using animations & prototype

© Lunabee 2015

What’s a prototype?

Anything that can “fake” your App

Page 66: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 67: Sex-up your Apps using animations & prototype

© Lunabee 2015

Reasons for prototyping

1.Test your ideas Quickly implement them & save time and money.

2.Get new ideas When showing your prototype to future users.

Page 68: Sex-up your Apps using animations & prototype

© Lunabee 2015

User’s tests1. Do you know how to ____________?

2. Is it natural to ____________?

3. How can we make this better?

Don’t argue or defend

Page 69: Sex-up your Apps using animations & prototype

© Lunabee 2015http://www.cooper.com/prototyping-tools

Page 70: Sex-up your Apps using animations & prototype

© Lunabee 2015

Check interface consistency

Are the concepts clear, simple, intuitive?

Page 71: Sex-up your Apps using animations & prototype

© Lunabee 2015

Prepare screens

Sujets Discussions Ajouter un sujet

Page 72: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 73: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 74: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 75: Sex-up your Apps using animations & prototype

© Lunabee 2015

Page 76: Sex-up your Apps using animations & prototype

© Lunabee 2015

Demo

http://invis.io/962B8ATFN
Page 77: Sex-up your Apps using animations & prototype

© Lunabee 2015

Do everything else with Keynote

Page 78: Sex-up your Apps using animations & prototype

© Lunabee 2015

Test your “custom” animations

Page 79: Sex-up your Apps using animations & prototype

© Lunabee 2015

Prepare your screens for InVision

Page 80: Sex-up your Apps using animations & prototype

© Lunabee 2015

Demo

Page 81: Sex-up your Apps using animations & prototype

© Lunabee 2015

About “code-enable” prototyping tools

Xcode

Page 82: Sex-up your Apps using animations & prototype

© Lunabee 2015

Summary

1. Static interfaces suck

Good interfaces are natural, flexible and focused

2. Animations should be right

3. Prototyping is easy & save a lot of time and money

Page 83: Sex-up your Apps using animations & prototype

© Lunabee 2015

ContactOlivier Berni

[email protected]

@olivier_berni

www.lunabee.com

mailto:[email protected]
http://www.lunabee.com
Page 84: Sex-up your Apps using animations & prototype

© Lunabee 2015

Thanks!


2D Animations

Project Animations

3 animations

Interactive Animations

Emily’s Animations!

RangeView animations

Simple Animations

CLIMAT, l’expo à 360° · prototype exceptionnel du Solar Impulse 1, • au fil des rencontres, ateliers et animations proposés à des classes d’élèves ou au grand public

Css Animations

Name Event Date Name Event Date 1 Effets danimation Conseils pour créer des : Animations de fin Animations de fin Animations dévolution Animations dévolution

Aardman Animations

Dm11 – Flash Creating Animations Animations CREATING

Prototype Prototype

Flash Animations

Mechanics Animations

My animations

Qml Animations

ARTISTES ANIMATIONS - agence-p2gevent.com · Base : basse, batterie, guitare, clavier, 2 chanteuses, 1 chanteur leader Plongeon dans les années disco de Boogie Wonderland à Sex

PROTOTYPE - ddbunlimited.comprototype prototype prototype prototype prototype prototype prototype prototype prototype prototype prototype prototype f e g h f e g h scale: 1:12 4. 4.875

Repurpose 2D Character Animations for a VR Environment ...eprints.bournemouth.ac.uk/30673/1/Repurpose 2D... · have developed a prototype of the system, and extensive tests with a

Sorties Animations

Android Animations

Animations graphiques

3D Animations

Animations Muse

animations biodiver'lycees

Musical & animations

Nicole’s Animations

Tarif des séjours - Ville de Clisson · du lac de la Tricherie Environnement Environnement Environnement Environnement Animations Animations Animations Animations A 15km de Parthenay,

Chapter 4 Creating Animations. Chapter 4 Lessons 1.Create motion tween animations 2.Create classic tween animations 3.Create frame-by-frame animations

Web Animations

Powtoon Animations

Css3 animations

Animations Animationen

Brochure animations