Elements of Mobile Design

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

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
10. Forces in Smartphones.
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.
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.
36. Helvetica Roboto
37. Helvetica Avenir Roboto
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