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
   

   View Slide

2. Hello.
   Chris Arvin
   Design
   Dan Lew
   Dev
   We work on the Expedia app.
   We work on the Expedia app.
   

   View Slide

3. Hello.
   Chris Arvin
   Design
   Dan Lew
   Dev
   We work on the Expedia app.
   We work on the Expedia app.
   

   View Slide

4. Hello.
   Chris Arvin
   Design
   Dan Lew
   Dev
   We work on the Expedia app.
   We work on the Expedia app.
   BUILD
   GREAT APPS
   

   View Slide

5. Hello.
   Chris Arvin
   Design
   Dan Lew
   Dev
   We work on the Expedia app.
   We work on the Expedia app.
   RICH VISUALS
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

9. SAMPLE APP: MOVIES
   

   View Slide

10. SAMPLE APP: MOVIES
    

    View Slide

11. SAMPLE APP: MOVIES
    

    View Slide

12. DEFAULT HOLO
    CUSTOMIZED UI
    VS
    Focus on imagery
    Branded action bar
    Using card metaphors
    

    View Slide

13. Build on how Android looks, feels and works.
    

    View Slide

14. Build on how Android looks, feels and works.
    

    View Slide

15. DEFAULT HOLO
    CUSTOMIZED UI
    VS
    Fun to play with
    Builds off user’s prior
    Android experience
    

    View Slide

16. DEFAULT HOLO
    CUSTOMIZED UI
    VS
    Fun to play with
    Builds off user’s prior
    Android experience
    

    View Slide

17. Android apps move.
    So should your mockups.
    

    View Slide

18. PROTOTYPING TOOLS
    

    View Slide

19. View Slide

20. HOLY SHIT
    HOW AM I GOING TO
    MAKE THIS?
    

    View Slide

21. UNDERSTANDING
    THE DESIGN
    

    View Slide

22. Interesting UI = more development.
    Think a few steps ahead.
    Work on the big stuff first.
    

    View Slide

23. ViewPager Fun
    Using ViewPager.Decor
    

    View Slide

24. Animation Performance
    Translation animations
    Views start at full width
    

    View Slide

25. What’s going to be a challenge?
    What can we make easier?
    What do we have to cut entirely?
    

    View Slide

26. Rounded Corners
    .9.png Overlay 9-patch
    

    View Slide

27. Sliding Indicator
    Cut entirely
    

    View Slide

28. DEFAULT HOLO
    CUSTOMIZED UI
    VS
    MOVE THIS
    TWO PIXELS
    TO THE LEFT
    UI POLISH
    

    View Slide

29. Before After
    

    View Slide

30. Communicate in dp – not pixels
    Adjust from what’s already in the app
    Mark directly on a screenshot
    

    View Slide

31. Marking up screenshots for developers
    “Make fonts 2dp smaller”
    “Add 4dp padding”
    

    View Slide

32. Hello.
    Chris Arvin
    Design
    Dan Lew
    Dev
    We work on the Expedia app.
    Examples in the Expedia app
    

    View Slide

33. Movies source: goo.gl/XCyLWl
    Dan Lew: @danlew42
    Chris Arvin: @meinhyperspeed
    

    View Slide