A walkthrough of my design process for mobile devices.

1. Mobile Thirst, Design talk
2013.03.01

2. © MOBIENTO
OUTLINE
2

3. © MOBIENTO 3
VS

4. © MOBIENTO
1. Give better design feedback
2. Start recording your own design process
3. Work closer with your client/agency
4. Understand why we do what we do
PURPOSE

5. © MOBIENTO
IDESIGN,THEREFOREI• Consult
• Animate
• Talk to developers
• Make grids
• Go to meetings
• Scribble
• Export assets
• Color pixels
• Conceptualize
• Assure quality
• Respond to e-mails
What I do
5

6. © MOBIENTO
RECORDING
6

7. © MOBIENTO
My Process
7
Inspiration
& Information
Scribbling
Making
the Grid
Hierarchy
& Typography
Grayscale
Colors Animation Sell it Finish

8. © MOBIENTO
1.INSPIRATION
&INFORMATION
8

9. © MOBIENTO
WHERETOLOOK
9

10. © MOBIENTO 10

11. © MOBIENTO
GUIDELINES
11

12. © MOBIENTO 12

13. © MOBIENTO
STRATEGICINSIGHTS
13

14. © MOBIENTO
MAKEA
MOODBOARD
14

15. © MOBIENTO 15

16. © MOBIENTO
TAKEAWAY• Brand Essence
• General design direction
• Platform specific restrictions
• Competitor analysis
Inspiration & Information
16

17. © MOBIENTO
2.SCRIBBLING
17

18. © MOBIENTO
PEN&PAPER
(LOFI)
18

19. © MOBIENTO 19

20. © MOBIENTO
ILLUSTRATOR
(HIFI)
20

21. © MOBIENTO 21

22. © MOBIENTO
TAKEAWAY• Idea process startup
• Understand what you are making
• Quickly explore possibilities
Scribbling
22

23. © MOBIENTO
3.THEGRID
23

24. © MOBIENTO
HISTORY
24

25. © MOBIENTO 25

26. © MOBIENTO
MOBILEGRID
(8X11)
26

27. © MOBIENTO 27

28. © MOBIENTO 28

29. © MOBIENTO 29

30. © MOBIENTO 30

31. © MOBIENTO
TAKEAWAY• Rules for how content is presented
• Based on screen/device resolution
• Based on preferred leading (line height)
The Grid
31

32. © MOBIENTO
4.HIERARCHY
&TYPOGRAPHY
32

33. © MOBIENTO
HIERARCHY
33
1 2 3 4

34. © MOBIENTO 34

35. © MOBIENTO
“Good typography is
about visualising
language through the
arrangement,
composition and
choice of type.”
“Good typography is
about visualising
language through the
arrangement,
composition and
choice of type.”TYPOGRAPHY
35

36. © MOBIENTO 36
“Good typography is
about visualising
language through the
arrangement,
composition and
choice of type.”
“Good typography is
about visualising
language through the
arrangement,
composition and
choice of type.”

37. © MOBIENTO 37

38. © MOBIENTO 38

39. © MOBIENTO 39

40. © MOBIENTO
TAKEAWAY• What content to highlight
• Create structure
• Guiding the user
• Create the right setting
Hierarchy & Typography
40

41. © MOBIENTO
5.GRAYSCALE
41

42. © MOBIENTO
STARTWITHTHE
MOSTCOMPLEXVIEW
42

43. © MOBIENTO
GETTHE
DIMENSIONSRIGHT
43

44. © MOBIENTO 44

45. © MOBIENTO
TAKEAWAY• How to simplify
• Testing dimensions
• Replacing standard components
• Identifying problem areas
Grayscale
45

46. © MOBIENTO
6.COLORS
46

47. © MOBIENTO 47

48. © MOBIENTO 48

49. © MOBIENTO
WHATDOI
NEEDTOHIGHLIGHT?
49

50. © MOBIENTO 50

51. © MOBIENTO
BUTTONS/TAPSTATES
51

52. © MOBIENTO 52

53. © MOBIENTO 53

54. © MOBIENTO
TAKEAWAY• Often defined in “Corporate Design Manual”
• Apply learnings and findings from earlier in the process
• Highlight the right things
• Assign button states
• Make rules that are understandable
Colors
54

55. © MOBIENTO
7.ANIMATION
55

56. © MOBIENTO
WHATCANI
SIMPLIFY?
56

57. © MOBIENTO 57

58. © MOBIENTO 58
Incorrect password

59. © MOBIENTO
ABETTER
DISCUSSION
59

60. © MOBIENTO 60

61. © MOBIENTO
TAKEAWAY• Simplification
• Behavior enhancement
• Communicate what is going on
• Support your design decisions
Animation
61

62. © MOBIENTO
8.SELLIT
62

63. © MOBIENTO 63
VERYIMPORTANT

64. © MOBIENTO 64
DESIGNRATIONALE

65. © MOBIENTO
SOFAR...• Brand Essence
• General design direction
• Limitations
• Platform specific opportunities and
limitations
• Competitor analysis
• Idea process startup
• Understand what you are making
• Quickly explore possibilities
• Rules for how content is presented
Design Rationale
65
• Based on screen/device resolution
• Based on preferred leading (line height)
• What content to highlight
• Create structure
• Guiding the user
• Create the right setting
• How to simplify
• Testing dimensions
• Replacing standard components
• Identifying problem areas
• Often defined in “Corporate Design
Manual”
• Apply learnings and findings from earlier in
the process
• Highlight the right things
• Assign button states
• Make rules that are understandable
• Simplification
• Behavior enhancement
• Communicate what is going on
• Support your design decisions

66. © MOBIENTO
SHOWYOUR
RECORDEDPROCESS
66

67. © MOBIENTO 67
Background
Learnings
Scribbles
Learnings
Grid
Learnings
Typography
Learnings
Grayscale
Learnings
Colors
Learnings

68. © MOBIENTO 68

69. © MOBIENTO 69

70. © MOBIENTO 70

71. © MOBIENTO 71

72. © MOBIENTO 72

73. © MOBIENTO 73

74. © MOBIENTO 74

75. © MOBIENTO 75

76. © MOBIENTO 76

77. © MOBIENTO 77

78. © MOBIENTO 78

79. © MOBIENTO 79

80. © MOBIENTO 80

81. © MOBIENTO 81

82. © MOBIENTO 82
USE“PROTOTYPES”

83. © MOBIENTO 83

84. © MOBIENTO
Use “Prototypes”
84

85. © MOBIENTO
TAKEAWAY• Share your recored process
• Display your design in its rightful context
• Don’t assume
Sell it
85

86. © MOBIENTO
9.“FINISH”
86

87. © MOBIENTO
SLICEIT
87

88. © MOBIENTO 88

89. © MOBIENTO 89

90. © MOBIENTO 90

91. © MOBIENTO
SPECIFY
91

92. © MOBIENTO 92

93. © MOBIENTO
TAKEAWAY• Keep working iterative
• Organize neatly
Finish
93

94. © MOBIENTO
10.TIME
94

95. © MOBIENTO
WHENTIMEIS
NOTENOUGH
95

96. © MOBIENTO
My Process
96
Inspiration
& Information
Scribbling
Making
the Grid
Hierarchy
& Typography
Grayscale
Colors Animation Sell it Finish

97. © MOBIENTO
PRIORITIZE
97

98. © MOBIENTO
My Process
98
Inspiration
& Information
Scribbling
Making
the Grid
Hierarchy
& Typography
Grayscale
Colors Animation Sell it Finish

99. © MOBIENTO
Inspiration
& Information
Hierarchy
& Typography
Grayscale
Animation Finish
My Process
99
Scribbling
Making
the Grid
Colors Sell it

100. © MOBIENTO
TAKEAWAY• With time, less steps are needed to work together
• More understanding could lead to longer projects
• Keep recording although time is not sufficient
Time
100

101. © MOBIENTO
mattias.nygard@mobiento.com
@mattiasnygard
Trevlig helg!
Mattias Nygård