Share
Embed
Slide 1
Slide 1 text
How to survive in a world
without designers ?
Christopher Maneu
UI Engineer, Deezer.com
@cmaneu – maneu.net
Epitech Paris – 19/11/2015
Slide 2
Slide 2 text
It’s hard to assemble a great
design team
It’s hard to let them work
where they shine
I’m a developer, so why do I care?
Slide 3
Slide 3 text
How to create Apps at scale ?
Services
Experiences
Slide 4
Slide 4 text
Idea Architecture UX Visual
Slide 5
Slide 5 text
Idea
Tells you the best way home
Google Maps > Citymapper
Lets you nudge your friends
Facebook Poke > Yo
Shows you the best new apps
Hacker News > Product hunt
https://medium.com/on-coding/the-formula-for-creating-the-next-killer-app-bad2c9d88449
Slide 6
Slide 6 text
Idea
http://insideintercom.io/design-futures-1-creating-systems-not-products/
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Idea–App Concept Canvas
5 Simple Questions
• What will your app do ?
• Who is your app for ?
• Where and when will your app be used ?
• What kind of content will be displayed ?
• How does your app fit in ?
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
Youruser journey
User Story Mapping, Jeff Patton
Slide 11
Slide 11 text
Othersusefultoolsfor ideation
Gamestorming, Dave Gray, Sunni Brown, James Macanufo
• Subject-verbs-objects
• 5 Whys
• Card Sort
• Empathy Map
• Anti-Problem
• Feature Poker – 100$ test
• …
Slide 12
Slide 12 text
Architecture
Slide 13
Slide 13 text
Architecture
Slide 14
Slide 14 text
Architecture –A Common language
http://www.microsoft.com/Language/en-US/Terminology.aspx
Slide 15
Slide 15 text
UX & Interaction
Slide 16
Slide 16 text
UX & Interaction
Slide 17
Slide 17 text
UX & Interaction
Balsamiq mockups
Slide 18
Slide 18 text
UX & Interaction
Slide 19
Slide 19 text
UX & Interaction
Slide 20
Slide 20 text
UX & Interaction
Slide 21
Slide 21 text
UX & Interaction
Slide 22
Slide 22 text
UX & Interaction
Slide 23
Slide 23 text
Prototyping
Slide 24
Slide 24 text
User testing
http://peek.usertesting.com/
Slide 25
Slide 25 text
User testing
http://peek.usertesting.com/
Slide 26
Slide 26 text
Visual design
http://nerds.airbnb.com/inside-airbnb-ios-brand-evolution/
Slide 27
Slide 27 text
Visual design
http://bradfrost.com/blog/post/atomic-web-design/
http://blog.invisionapp.com/atomic-design-principles/
Slide 28
Slide 28 text
Visual design
Basics
Color palette, fonts, icons, layout, …
Slide 29
Slide 29 text
Visual design
Slide 30
Slide 30 text
Visual design
Slide 31
Slide 31 text
High-Logic
FontCreator 8.0
Professional
Slide 32
Slide 32 text
Visual design
Basics
Color palette, fonts, icons, layout, …
Features
Screens, pages, dialogs, …
Slide 33
Slide 33 text
Visual design
Slide 34
Slide 34 text
Visual design
Basics
Color palette, fonts, icons, layout, …
Features
Screens, pages, dialogs, …
Adaptive Design
Web/Mobile/tablet, Windows/Android/iOS, Touch/Voice/Keyboard …
Slide 35
Slide 35 text
Adaptive design
Slide 36
Slide 36 text
Visual design
Basics
Color palette, fonts, icons, layout, …
Features
Screens, pages, dialogs, …
Adaptive Design
Web/Mobile/tablet, Windows/Android/iOS, Touch/Voice/Keyboard …
Edge cases
Didn’t pay, no network, no more disk space, …
Slide 37
Slide 37 text
http://scotthurff.com/
Slide 38
Slide 38 text
Idea Architecture UX Visual
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
Thanks
You should follow me on Twiter @cmaneu
Download the slides on
https://speakerdeck.com/cmaneu