Designing Your App

An introduction to design for the SF Rails Girls workshop.

Transcript

1. Designing your app Diana Mounter @broccolini
2. I’m not from here
3. UI Visual Interaction User Experience I do DESIGN
4. I design things at Snapguide
5. STAR TREK COFFEE POTATOES We can be friends if you like THE COLOR RED
6. Why do you need to know about design?
7. Is a person going to use the app you’re making? NO Pretend to listen and look interested so I don’t feel bad LISTEN YES
8. Design is about solving problems
9. Design is about solving problems
10. GOALS PEOPLE USE CASES PRINCIPLES A good place to start
11. A good place to start GOALS Why are you building this? PEOPLE Who is it for? USE CASES How are they going to use it? PRINCIPLES What is important about this app?
12. Cloud of  Music The project
13. GOALS PEOPLE USE CASES PRINCIPLES A site for people to share music Music makers and lovers Upload/listen/share music Personal, professional, sexy, social The project
14. Research
15. Sketch
16. User flows User flows
17. Wireframes Helps separate thinking about the layout and architecture from the visual aesthetics. wubdub273 Bob Marley Jamaica 5 | 68 IMAGE wubdub273 Bob Marley Share IMAGE wubdub273 Live @ Th Share | Stream | Explore
18. Favorites Comments Tracks wubdub273 Bob Marley Jamaica IMAGE wubdub273 Bob Marley - Chillout Mix Share 306 17 116 | | House IMAGE wubdub273 Live @ The Red Wine Sessions, SF Share 414 23 169 | | Reggae IMAGE wubdub273 Bob Marley Vs Marvin Gaye Mix Share 198 20 101 | | Dubstep Dashboard You Tracks People Groups Upload & Share Hi wubdub273! LOGO | Settings | Inbox | Logout 5 | 68 Following Share wubdub.net
19. Spacing & Alignment
20. Favorites Comments Tracks wubdub273 Bob Marley Jamaica IMAGE wubdub273 Bob Marley - Chillout Mix Share 306 17 116 | | House IMAGE wubdub273 Live @ The Red Wine Sessions, SF Share 414 23 169 | | Reggae IMAGE wubdub273 Bob Marley Vs Marvin Gaye Mix Share 198 20 101 | | Dubstep Dashboard You Tracks People Groups Upload & Share Hi wubdub273! LOGO | Settings | Inbox | Logout 5 | 68 Following Share wubdub.net
21. Favorites Comments Tracks wubdub273 Bob Marley Jamaica IMAGE wubdub273 Bob Marley - Chillout Mix Share 306 17 116 | | House IMAGE wubdub273 Live @ The Red Wine Sessions, SF Share 414 23 169 | | Reggae IMAGE wubdub273 Bob Marley Vs Marvin Gaye Mix Share 198 20 101 | | Dubstep Dashboard You Tracks People Groups Upload & Share Hi wubdub273! LOGO | Settings | Inbox | Logout 5 | 68 Following Share wubdub.net
22. Favorites Comments Tracks wubdub273 Bob Marley Jamaica IMAGE wubdub273 Bob Marley - Chillout Mix Share 306 17 116 | | House IMAGE wubdub273 Live @ The Red Wine Sessions, SF Share 414 23 169 | | Reggae IMAGE wubdub273 Bob Marley Vs Marvin Gaye Mix Share 198 20 101 | | Dubstep Dashboard You Tracks People Groups Upload & Share Hi wubdub273! LOGO | Settings | Inbox | Logout 5 | 68 Following Share wubdub.net
23. A lot of people will ask you to add things like buttons and links and features to the design, but what you need is to think about is taking things away.
24. Favorites Comments Tracks wubdub273 Bob Marley Jamaica IMAGE wubdub273 Bob Marley - Chillout Mix Share 306 17 116 | | House IMAGE wubdub273 Live @ The Red Wine Sessions, SF Share 414 23 169 | | Reggae IMAGE wubdub273 Bob Marley Vs Marvin Gaye Mix Share 198 20 101 | | Dubstep Dashboard You Tracks People Groups Upload & Share Hi wubdub273! LOGO | Settings | Inbox | Logout That’s a lot of buttons. 5 | 68 Following Share wubdub.net
25.  Your profile Your likes Your sets Your groups Find friends Settings Log Out
26. wubdub273 Bob Marley Jamaica 5 | 68 Following Share wubdub.net IMAGE wubdub273 Bob Marley - Chillout Mix Share 306 17 116 | | House IMAGE wubdub273 Live @ The Red Wine Sessions, SF Share 414 23 169 | | Reggae IMAGE wubdub273 Bob Marley Vs Marvin Gaye Mix Share 198 20 101 | | Dubstep wubdub273 Berlin Dance Party - Fall 2012 Techno | Stream | Explore  Your profile Your likes Your sets Your groups Find friends Settings Log Out
27. wubdub273 Bob Marley Jamaica 5 | 68 Following Share wubdub.net IMAGE wubdub273 Bob Marley - Chillout Mix Share 306 17 116 | | House IMAGE wubdub273 Live @ The Red Wine Sessions, SF Share 414 23 169 | | Reggae IMAGE wubdub273 Bob Marley Vs Marvin Gaye Mix Share 198 20 101 | | Dubstep wubdub273 Berlin Dance Party - Fall 2012 Techno | Stream | Explore 
28. Typography Typography Typography
29. Helvetica Stick with the classics... Georgia, Times New Roman, serif Arial, sans-serif Monaco, Times New Roman, monospace
30. google.com/webfonts
31. Heading Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Sub Heading Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Create clear hierarchy with heading font sizes
32. Heading Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Sub Heading Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Increase the line height to increase readability
33. Make sure the paragraph width isn’t too wide Heading Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Sub Heading Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
34. Text in a box Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Sometimes you want to put text in a box
35. Text in a box Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Give it some padding
36. wubdub273 Bob Marley Jamaica 5 | 68 Following Share wubdub.net IMAGE wubdub273 Bob Marley - Chillout Mix Share 306 17 116 | | House IMAGE wubdub273 Live @ The Red Wine Sessions, SF Share 414 23 169 | | Reggae IMAGE wubdub273 Bob Marley Vs Marvin Gaye Mix Share 198 20 101 | | Dubstep wubdub273 Berlin Dance Party - Fall 2012 Techno | Stream | Explore  Let’s create some space & hierarchy.
37. wubdub273 Bob Marley Jamaica 5 | 68 Following Share wubdub.net IMAGE wubdub273 Bob Marley - Chillout Mix Share 306 17 116 | | House IMAGE wubdub273 Live @ The Red Wine Sessions, SF Share 414 23 169 | | Reggae IMAGE wubdub273 Bob Marley Vs Marvin Gaye Mix Share 198 20 101 | | Dubstep wubdub273 Berlin Dance Party - Fall 2012 Techno | Stream | Explore 
38. Useful tools for wireframing • Keynote + keynote kunfu = awesome • Fireworks: has symbols, great for large projects • Illustrator: if you like to plan out big flows on one page • Omnigraffle: if you lurve flow charts • Sketch: more for design but good all round tool (& cheap)
39. VISUAL DESIGN
40. COLOR Be careful how you use color. It can be distracting.
41. Meaningful color Success Information Warning http://twitter.github.com/bootstrap
42. CONTRAST CONTRAST
43. CONTRAST CONTRAST
44. Dribbble.com Colourlovers.com
45. wubdub273 Bob Marley Jamaica 5 | 68 Following Share wubdub.net IMAGE wubdub273 Bob Marley - Chillout Mix Share 306 17 116 | | House IMAGE wubdub273 Live @ The Red Wine Sessions, SF Share 414 23 169 | | Reggae IMAGE wubdub273 Bob Marley Vs Marvin Gaye Mix Share 198 20 101 | | Dubstep wubdub273 Berlin Dance Party - Fall 2012 Techno | Stream | Explore 
46. Let’s add some color and contrast
47. IMAGE wubdub273 Bob Marley - Chillout Mix Share 306 17 116 | | House IMAGE wubdub273 Live @ The Red Wine Sessions, SF Share 414 23 169 | | Reggae IMAGE wubdub273 Bob Marley Vs Marvin Gaye Mix Share 198 20 101 | | Dubstep wubdub273 Berlin Dance Party - Fall 2012 Techno | Stream | Explore  wubdub273 Bob Marley Jamaica 5 | 68 Following Share wubdub.net
48. IMAGE wubdub273 Bob Marley - Chillout Mix Share 306 17 116 | | House IMAGE wubdub273 Live @ The Red Wine Sessions, SF Share 414 23 169 | | Reggae IMAGE wubdub273 Bob Marley Vs Marvin Gaye Mix Share 198 20 101 | | Dubstep wubdub273 Berlin Dance Party - Fall 2012 Techno Stream Explore  Search for artists and music wubdub273 Bob Marley Jamaica 5 | 68 Following Share wubdub.net
49. Someone has probably already designed the icon you need If you want to do design new ones, check what icons people are used to seeing on other apps.
50. TheNounProject.com Pictos
51. Design with real content If you can’t, grab content off similar sites. And there are some good placeholder content resources to use too, but make sure you test with real content before you ship it.
52. rikeripsum.com lorempixel.com
53. wubdub273 Bob Marley Jamaica 5 | 68 Following Share wubdub.net wubdub273 Bob Marley - Chillout Mix Share 306 17 116 | | House wubdub273 Live @ The Red Wine Sessions, SF 414 23 169 | | Reggae wubdub273 Bob Marley Vs Marvin Gaye Mix 198 20 101 | | Dubstep Stream Explore wubdub273 Berlin Dance Party - Fall 2012 Techno Share Share  Search for artists and music
54. Interaction
55. wubdub273 Bob Marley Jamaica 5 | 68 Following Share wubdub.net wubdub273 Bob Marley - Chillout Mix Share 306 17 116 | | House wubdub273 Live @ The Red Wine Sessions, SF 414 23 169 | | Reggae wubdub273 Bob Marley Vs Marvin Gaye Mix 198 20 101 | | Dubstep Stream Explore wubdub273 Berlin Dance Party - Fall 2012 Techno Share Share  Search for artists and music
56. Some other useful things...
57. Important area in between Not safe Safe
58. Things will go wrong. = Give useful feedback!
59. Get people using it ... sooner rather than later.
60. You won’t get it right the first time Don’t be disheartened, keep iterating.
61. Now you just have to build it ;)