Crafting Unique, Delightful Apps

Dan Lew and Chris Arvin talk about how to design and develop interesting apps.

Original Keynote files (with animations): https://db.tt/8XTh7uze

Transcript

1. Hello. Chris Arvin Design Dan Lew Dev
2. Hello. Chris Arvin Design Dan Lew Dev We work on the Expedia app. We work on the Expedia app.
3. Hello. Chris Arvin Design Dan Lew Dev We work on the Expedia app. We work on the Expedia app.
4. Hello. Chris Arvin Design Dan Lew Dev We work on the Expedia app. We work on the Expedia app. BUILD GREAT APPS
5. Hello. Chris Arvin Design Dan Lew Dev We work on the Expedia app. We work on the Expedia app. RICH VISUALS
6. Hello. Chris Arvin Design Dan Lew Dev We work on the Expedia app. We work on the Expedia app. Rich Visuals RICH VISUALS FUN INTERACTIONS
7. Hello. Chris Arvin Design Dan Lew Dev We work on the Expedia app. We work on the Expedia app. Rich Visuals RICH VISUALS FUN INTERACTIONS SMOOTH TRANSITIONS
8. Hello. Chris Arvin Design Dan Lew Dev We work on the Expedia app. We work on the Expedia app. Rich Visuals RICH VISUALS FUN INTERACTIONS SMOOTH TRANSITIONS
9. SAMPLE APP: MOVIES
10. SAMPLE APP: MOVIES
11. SAMPLE APP: MOVIES
12. DEFAULT HOLO CUSTOMIZED UI VS Focus on imagery Branded action bar Using card metaphors
13. Build on how Android looks, feels and works.
14. Build on how Android looks, feels and works.
15. DEFAULT HOLO CUSTOMIZED UI VS Fun to play with Builds off user’s prior Android experience
16. DEFAULT HOLO CUSTOMIZED UI VS Fun to play with Builds off user’s prior Android experience
17. Android apps move. So should your mockups.
18. PROTOTYPING TOOLS
20. HOLY SHIT HOW AM I GOING TO MAKE THIS?
21. UNDERSTANDING THE DESIGN
22. Interesting UI = more development. Think a few steps ahead. Work on the big stuff first.
23. ViewPager Fun Using ViewPager.Decor
24. Animation Performance Translation animations Views start at full width
25. What’s going to be a challenge? What can we make easier? What do we have to cut entirely?
26. Rounded Corners .9.png Overlay 9-patch
27. Sliding Indicator Cut entirely
28. DEFAULT HOLO CUSTOMIZED UI VS MOVE THIS TWO PIXELS TO THE LEFT UI POLISH
29. Before After
30. Communicate in dp – not pixels Adjust from what’s already in the app Mark directly on a screenshot
31. Marking up screenshots for developers “Make fonts 2dp smaller” “Add 4dp padding”
32. Hello. Chris Arvin Design Dan Lew Dev We work on the Expedia app. Examples in the Expedia app
33. Movies source: goo.gl/XCyLWl Dan Lew: @danlew42 Chris Arvin: @meinhyperspeed