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

Elements of Mobile Design

568c90462309bc3d01a32cb42d2c6b06?s=47 Jonas Lekevicius
September 16, 2013

Elements of Mobile Design

High level overview of problems and solutions in mobile app design. Presented at Vinted Demo Day.

568c90462309bc3d01a32cb42d2c6b06?s=128

Jonas Lekevicius

September 16, 2013
Tweet

More Decks by Jonas Lekevicius

Other Decks in Design

Transcript

  1. Elements of Mobile Design For Vinted Demo Day by Jonas

    Lekevicius
  2. Hi, my name is Jonas.

  3. Vinted iOS app designer.

  4. Talk about what mobile design is.

  5. Apps != Websites.

  6. Forces.

  7. g

  8. None
  9. None
  10. Forces in Smartphones.

  11. None
  12. Small,

  13. Small, Manipulated directly,

  14. Small, Manipulated directly, Used everywhere,

  15. Small, Manipulated directly, Used everywhere, Apps are native to OS.

  16. Mobile Design Principles and Differences

  17. No space for persistent navigation, branding, side elements.

  18. None
  19. Branding through colors, typography, UI elements.

  20. Only real brand visibility: icon and splash screen.

  21. Limited navigation options: back, gesture-based menu.

  22. On Android there is system back button.

  23. Focused screens: nothing unnecessary.

  24. Limited number of actions in each situation.

  25. Priorities: show an action, or put it in overflow menu?

  26. No :hover.

  27. Visible controls, succinct explanations.

  28. Finger-friendly tap targets.

  29. Limited maximum number of items per screen - even less

    with keyboard.
  30. Obstruction of view.

  31. By hand or keyboard.

  32. Easy, fast inputs.

  33. Not everything can fit into one screen, but everything can

    be easy to understand.
  34. OS-specific design.

  35. None
  36. Helvetica Roboto

  37. Helvetica Avenir Roboto

  38. None
  39. Mobile design patterns.

  40. Chat bubbles from sides, input field in the bottom, above

    the keyboard.
  41. Assumption about little computer literacy.

  42. Screen sizes.

  43. Delight vs Features.

  44. Little space Branding through UI Few actions per screen Visible

    UI elements Large UI elements Obstruction of view OS-specific design Mobile design patterns Friendly to new users Perfectly fitting the screen Delightful UI execution
  45. The End