Part of the Mobile Communications Resource Center, this is one of several presentations created by Sara Quinn for The Knight Center and shared with Ball State University's College of Communication, Information and Media. All rights are reserved.

1. Designing for
a small screen
Design Consultant and Researcher
Sara Quinn
e-mail: saraquinnmedia@gmail.com
Twitter: @saraquinn
727.366.0128
D E S I G N I N G F O R M O B I L E

2. Nothing makes people reach
for the “close tab” button faster
than a cluttered screen.

4. Keep it simple.

7. Keep it simple

8. Keep it simple

9. Too many
choices
Keep it simple

10. Keep it simple
Proportion
and scale
would be
out of
whack

11. Keep it simple
Type and
images
would
be too
small

12. Refine,
focus,
distill
Keep it simple

13. Refine,
focus,
distill
Keep it simple

14. Keep it simple

15. Keep it simple
Design for
the given
space

16. Use white space

17. Use white space
It draws
the eye.

18. Use it to
guide the
user.
Use white space

19. Use white space
Use it to
guide the
user.

27. Too much!

28. Find focus.

29. Design for fingers

30. Design for fingers
Click targets should be a
minimum of 30-40 pixels.

33. At least
30-40
pixels.

34. Use white space

35. Use white space

36. Use white space
Lessen the
frustration
of clicking on
the wrong thing
by accident.

37. Design for fingers
Can you navigate
with one thumb?

38. Design for fingers
Best mobile
design works fine
with one hand.

39. Design for fingers
Avoid pinching
to zoom.

42. Focus content

45. Find focus.

46. Using white space
Keeping it simple
Designing for fingers
Focusing content

47. Using white space
Keeping it simple
Designing for fingers
Focusing content

48. Using white space
Keeping it simple
Designing for fingers
Focusing content

49. Using white space
Keeping it simple
Designing for fingers
Focusing content

50. Keep font choices simple
Size + space = readability
Immersive, longform reading
Single column, scrolling
N E X T V I D E O : T Y P O G R A P H Y A N D G R I D
Responsive design

51. Keep font choices simple
Size + space = readability
Immersive, longform reading
Single column, scrolling
N E X T V I D E O : T Y P O G R A P H Y A N D G R I D
Responsive design

52. Keep font choices simple
Size + space = readability
Immersive, longform reading
Single column, scrolling
N E X T V I D E O : T Y P O G R A P H Y A N D G R I D
Responsive design

53. Keep font choices simple
Size + space = readability
Immersive, longform reading
Single column, scrolling
N E X T V I D E O : T Y P O G R A P H Y A N D G R I D
Responsive design

54. Keep font choices simple
Size + space = readability
Immersive, longform reading
Single column, scrolling
N E X T V I D E O : T Y P O G R A P H Y A N D G R I D
Responsive design

55. Design Consultant and Researcher
Sara Quinn
e-mail: saraquinnmedia@gmail.com
Twitter: @saraquinn
727.366.0128