Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cross-device, Cross-platform: Mobile Design Tutorial

Secret Lab
July 20, 2015

Cross-device, Cross-platform: Mobile Design Tutorial

OSCON 2015

Secret Lab

July 20, 2015

More Decks by Secret Lab

Other Decks in Design


  1. Mobile Design Tutorial with a Title 
 Invented By An

    Marketing Department Totally Not an Android Tutorial in Disguise™ #tinketytonk
  2. unique challenges of mobile devices rules for mobile app developers

    wireframes usability and look What’s the plan? Mobile Design + Parting Thoughts Mobile Computing and Interaction Existing with other Apps and Devices Building Apps and Testing Apps
  3. What does a house moving app need? Introduce yourself to

    the person next to you, and discuss…
  4. Social TODO lists Scheduling tasks with friends Finding people to

    help out Finding nearby tasks to help out with
  5. Find location on map Show list of friends Publishes task

    to friends CANCEL SAVE TITLE WHERE WHEN WHO Collect Boxes 29 NE Broadway 20 July at 2:39PM Paris B-A; Bob Condo... Ask for helpers dit Task 21 Move Piano with Josh and Paris 22 Jul 1PM Map View My Tasks My Tasks TODAY TOMORROW Collect Boxes 2:30PM Paris Bob Needs more helpers! Move Piano 1:00PM Paris Josh Go to map view Scrolls off the page Shown if you're still asking for help Let Me Help! SOON Collect Boxes 2:30PM Help Chris! Assemble Desk 3:00PM Help Dave! LATER Move Piano Tuesday 1PM Disassemble Ke...Wednesday 1PM Go to map view Scrolls off the bottom Click entry to go to details page Compact view for later tasks
  6. 1. Figure out what’s in the app 2. Design how

    the app’s laid out 3. Figure out how it fits together 4. See how it will work
  7. Humans are arrogant. They’ll expect other people to anticipate what

    they want, 
 and give it to them the moment they want it.
  8. Humans are easily bored. If something takes longer than a

    couple of seconds, 
 they’re not interested.
  9. Controls at the top of the screen: Replaces what you’re

    looking at Controls at the bottom of the screen: Modifies you’re looking at
  10. Controls at the top of the screen: Back button; URL

    field; new button Controls at the bottom of the screen: Check in button; keyboard
  11. Features are what the app can do “Seeing what task

    are left to do” “I want to manage my move” Goals are what the user can do
  12. 1. Take a feature list. 2. Pick the three most

    important. 3. Argue why they’re the most important.
  13. Debrief. Adding tasks that make up my move Seeing which

    tasks I have completed Adding tasks to my personal calendar Seeing which tasks I have to do today Adding tasks to my personal calendar Asking my friends if they can help
  14. Toolbars The most important things go here Split or single?

    Overflow Menu: Always, sometimes, or never?
  15. MAP Jane Smith Raoul McGuinness 12:30 PM: Move Piano Some

    other task goes here Map showing friend locations List of friends showing task names Tap name to show details on the task they want done?
  16. 1. Improve the task list screen 2. Design the new

    task and map screens ( 10 minutes )
  17. •Enchant me •Simplify my life •Make me amazing “Creative Vision”

  18. “A material metaphor is the unifying theory of a rationalized

    space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.” http://www.google.com/design/
  19. “Doug Fir James Mercer cashew cheese Pearl District it's raining

    again. Also beers late-night happy hours fixed gear Holocene bridgetown; smoked ham ice cream Voodoo Donuts bicycle rights brewvana bubble tea fifth quadrant muesli.” http://www.google.com/design/
  20. “Our goal is to have people leave our website as

    quickly as possible.” http://www.google.com/about/company/ philosophy/
  21. Philosophies iOS Android Actual People Deference Make Me Amazing Um

    Clarity Simplify My Life WTF Depth Enchant Me Huh?
  22. Simple geometric fundamental shapes Slight shading to imply volume Very

    subtle shadowing to create depth Icons rely on silhouettes
  23. “In material design, every pixel drawn by an application resides

    on a sheet of paper.” http://www.google.com/design/spec/layout/layout-principles.html
  24. `

  25. Lag equals death. 76% of people who hate their phones

    do so because apps aren’t responsive enough. This statistic is made up.
  26. Things that can change: Screen size Speed of CPU /

    GPU Available memory Storage space Network speed Everything ✔ ✔ ✔ ✔ ✔ ✔