Designing Your App

2d84f9cec8c91449388bfb2b8078ef28?s=47 Diana
January 26, 2013

Designing Your App

An introduction to design for the SF Rails Girls workshop.

2d84f9cec8c91449388bfb2b8078ef28?s=128

Diana

January 26, 2013
Tweet

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 ;)