Designing your app

Bd9f846d0d3073fe0b0922bcf874ef63?s=47 Simon Rand
February 09, 2013

Designing your app

Presented at Rails Girls Dublin February 9th 2013

(special thanks to Diana Mounter @broccolini for allowing me to include some of her slides from her Rails Girls SF talk of the same name - https://speakerdeck.com/broccolini/designing-your-app)

Bd9f846d0d3073fe0b0922bcf874ef63?s=128

Simon Rand

February 09, 2013
Tweet

Transcript

  1. Designing your app Rails Girls Dublin, February 2013 @simonrand

  2. @simonrand Director @iorum (web & mobile developers) Designer Developer

  3. None
  4. None
  5. None
  6. None
  7. As an entreprenuer/ founder/doer.. Design will help your idea be

    a success
  8. As a developer.. Design will help you build your idea

  9. ..but before you build, design is about making sense of

    things
  10. Types of design IA (information architecture) UI (user interface) UX

    (user experience) Visual (aesthetic)
  11. It's the same process for every project you work on

  12. Information Architecture IA

  13. Leave your computer..

  14. None
  15. Goal: To make an app for ideas

  16. Features: List existing ideas View an idea Add a new

    idea Edit existing ideas
  17. (Site/app/whatever) Map: List of ideas View idea New idea Edit

    idea
  18. New idea flow Click new idea link Fill out form

    Show idea page Show success message Form ok Return to form to fix Show error message(s) Form not ok
  19. New idea text wireframe: Standard elements: Logo Nav bar Unique

    elements: Page title: New idea Error message(s) (if required) New idea form: - Name - Description - Picture - Submit button
  20. Go back to your computer if you like..

  21. Visual Wireframe

  22. Wireframing tools: balsamiq Keynote/PowerPoint Omnigraffle Illustrator/Fireworks/Photoshop..

  23. No styling!

  24. You’ve been doing a bit of UI & UX design

    as you address the IA
  25. You can keep refining, but you have enough to start

    building
  26. Visual Design

  27. Not just about making things pretty (it is a bit)

  28. Also about refining UI & UX

  29. Do it with further wireframes/ mockups or in the browser

    (more on that in a bit)
  30. Three key aspects

  31. Grids (thanks @broccolini)

  32. 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
  33. 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
  34. 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
  35. 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.
  36. 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
  37.  Your profile Your likes Your sets Your groups Find

    friends Settings Log Out
  38. 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
  39. Typography (thanks again @broccolini)

  40. Helvetica Stick with the classics... Georgia, Times New Roman, serif

    Arial, sans-serif Monaco, Times New Roman, monospace
  41. 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
  42. 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
  43. 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.
  44. Colour (thanks again @broccolini)

  45. Meaningful color Success Information Warning http://twitter.github.com/bootstrap

  46. ..but always keep colours simple!

  47. Dribbble.com Colourlovers.com

  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. Research is sometimes a good tool, but don’t get caught

    up in trying to look like something else
  50. Realising your design

  51. <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css"> <link href="/assets/application-b394c8d50b585f173f7b9cf910f64126.css" media="screen" rel="stylesheet" type="text/css" /> <script

    src="/assets/application-a552e1db33b8be6a42eedf1261916f3c.js" type="text/ javascript"></script> <meta content="authenticity_token" name="csrf-param" /> <meta content="VdZVxUZ/RIJlMeEftuQuSVLMgOZFJqDsKqenDBeeOSg=" name="csrf-token" /> <style type="text/css"> body { padding-top: 60px; } </style> </head> <body> <div class="topbar"> <div class="fill"> <div class="container"> <a class="brand" href="/">RailsIdeas</a> <ul class="nav"> <li><a href="/">Ideas</a></li> <li><a href="/ideas/new">New idea</a></li> </ul> </div> </div> </div> <div class="container"> <div class="content"> <h1>Listing ideas</h1> <div class="row ideas"> <div class="span4"> <img alt="291941_144323735661191_136157603144471_236822_1917680331_n" src="https:// railsideas.s3.amazonaws.com/uploads/idea/picture/ 6/291941_144323735661191_136157603144471_236822_1917680331_n.jpg" width="220" /> <h4><a href="/ideas/6">Rubies are for</a></h4> Rails Girls </div> <div class="span4"> <img alt="313675_144323708994527_136157603144471_236821_1798382324_n" src="https:// railsideas.s3.amazonaws.com/uploads/idea/picture/ 7/313675_144323708994527_136157603144471_236821_1798382324_n.jpg" width="220" /> <h4><a href="/ideas/7">Love to make is for</a></h4> Rails Girls </div> <div class="span4"> <img alt="314932_144323672327864_136157603144471_236819_2087181925_n" src="https:// railsideas.s3.amazonaws.com/uploads/idea/picture/ 8/314932_144323672327864_136157603144471_236819_2087181925_n.jpg" width="220" /> <h4><a href="/ideas/8">Get excited and make things</a></h4> </div> <div class="span4">
  52. Cascading Style Sheets (CSS)

  53. .container:before, .container:after { display: table; content: ""; zoom: 1; *display:

    inline; } .container:after { clear: both; } .container-fluid { position: relative; min-width: 940px; padding-left: 20px; padding-right: 20px; zoom: 1; } .container-fluid:before, .container-fluid:after { display: table; content: ""; zoom: 1; *display: inline; } .container-fluid:after { clear: both; } .container-fluid > .sidebar { float: left; width: 220px; } .container-fluid > .content { margin-left: 240px; } a { color: #0069d6; text-decoration: none; line-height: inherit; font-weight: inherit; } a:hover { color: #00438a; text-decoration: underline; }
  54. ..and you get

  55. Don’t worry, use Bootstrap

  56. <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css" />

  57. ..get all this

  58. ..but you can always change things..

  59. Don’t ever let visual design get in the way.

  60. You can always change something that looks bad but works.

  61. Something that works badly is a bigger problem.

  62. ..just always think about what you would like and makes

    the most sense to you and you’ll be grand.
  63. p.s. coders who can design are rare and very sought

    after