The MindNode 3 app icon design process

I gave a talk about the design process of the MindNode 3 icon at the CocoaHeads Vienna meeting on September 12th 2013. The presentation shows the evolution of the icon from it’s iOS 6 themed version that MindNode 2 used to an iOS 7 themed version, including some of the hiccups that happened along the way.

If you want to know more about MindNode, you can find more information over at http://mindnode.com

Transcript

1. MindNode iOS 7 Icon Design Process
2. iOS 7 is out! • “Wow, that’s … different.” • “We need to redo everything!” • “Awesome!” • “…” • “… Now what?”
3. Initial design direction “Let’s try to keep the Familiarity & Concepts”
4. The starting point:
   MindNode Touch 2.x
5. Iconic elements:
   Colors
6. • 2 Colors • Strong Contrast • Recognizable even
 at low resolution Iconic elements:
   Colors
7. Iconic elements:
   Shape
8. Iconic elements:
   Shape • Unique • Strong contrast
 The total area taken up by the main shape balances well with the background • Strong concept
 Ideas “grow and branch out”
9. The MindNode Leaf Currently used • Webpage • In-App Icons • Promotional Materials
10. The MindNode Leaf Used online and in marketing material
11. Lazy Designer Solution “I’ll just make pretty gradients!”
12. “No Good.”
13. Problems • The Leaf feels “old” • Doesn’t fit within iOS7’s Grid or Style • A new design language is planned for MN—big departure from old visuals
14. Trying to keep it familiar Quick Mockups using the MindNode Icon Colors (and what went wrong)
15. Approach • Main priority are Color and Shape • Iterations should be quick • Still conservative when it comes to the actual icon concept
 Trying to keep as much of the ideas (colors, shapes) from the old icon as possible • Not yet focusing on details
16. 3D Leaves • Cool in theory • Not iOS 7’s Style • Problematic to “get right” • Takes time to get a dynamic, non-rigid look
17. Illustrated Leaves • Not clearly a leaf • Bad contrasts, forms blend together • Colors familiar, but without much personality
18. Illustrated Leaves • Not clearly leaves • Doesn’t look organic • No “idea growth” component • But shapes are cleaner
19. Illustrated Leaves • Looks more like a leaf • Boring • Colors still feel heavy, unlike iOS 7
20. We’ve got a problem The iterations feel too rigid and boring when trying too keep too much of the old icon
21. Approach • Drop the dark background color • Go back to a more detailed illustration of leaves
 The abstractions aren’t working well • Be open to using different main colors
 iOS 7 is colorful—we should be, too
22. Illustrated Leaves • Too comic-y • Could be seen as a tree, but the forms are really too unclear • Yay gradients, boo single leaf
23. Illustrated Leaves • Lighter and friendlier in terms of colors • Still boring • A single leaf doesn’t represent “ideas” well—only growth
24. Illustrated Leaves • Multiple shapes allow for more colors and gradients • Still light and friendly, more iOS 7-like • Too abstract, no “growth” component
25. Rebooting the Icon Since iOS 7 is a radical departure from previous iOS visuals, why not be radical, too?
26. What we learned so far • White background feels fresh • Bright gradients fit well with iOS 7 • Old color scheme doesn’t work well with iOS 7 • The work on the icon was random, which that was good, because:
27. Randomizing the Designs • Helped us figure out what doesn’t work • Helped us test directions with shapes and colors, which in turn • Helped us get a better feel for what MindNode should represent, which allowed us to • Define a concept checklist
28. The Concept Checklist • A mindmap starts with a single idea • Ideas can grow and branch out • Ideas can overlap • Ideas are different
29. Working through the Checklist • Single point of origin • Leaves grow and branch out • Leaves overlap • Leaves differ from one another
 Color and Size
30. Problem? • Shape does not feel dynamic • Colors are a big departure from the current palette • Shape feels a bit small
31. MORE Dynamic! • Shape is too complicated • Too many colors • Hard to recognize • Looks more like a flower than leaves
32. …less dynamic • Shape starts to feel “right” • Less colorful, but colors are too similar
 Which makes it harder to distinguish between the shapes
33. Now with iOS 7 gradients! • Using strong colors helps us separate the shapes • Now shape and colors feel like a good fit • Finally!
34. Finalizing the design There’s a german word for it: Reinzeichnung!
35. Drawing within the grid A few of the sheets used to finalize the design
36. Drawing within the grid A few of the sheets used to finalize the design
37. Drawing within the grid A few of the sheets used to finalize the design
38. Wait, you draw at the end?! Yes :) Because: • The main goal was to find a visual language that fits iOS 7 and MindNode • After the language is found, we can pick the right words (shapes) for our ideas
 We picked a combination of C and D of the second shown sheet
39. Say Hello to MindNode 3
40. Thank you.
41. Samo Korošec APOCH WORKS apoch.io samo@apoch.io dribbble.com/apochworks For further questions: For more information about apoch works: