Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing your app

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)

Simon Rand

February 09, 2013
Tweet

More Decks by Simon Rand

Other Decks in Design

Transcript

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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.
  7. 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
  8. 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
  9. Helvetica Stick with the classics... Georgia, Times New Roman, serif

    Arial, sans-serif Monaco, Times New Roman, monospace
  10. 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
  11. 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
  12. 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.
  13. 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
  14. Research is sometimes a good tool, but don’t get caught

    up in trying to look like something else
  15. <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">
  16. .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; }
  17. ..just always think about what you would like and makes

    the most sense to you and you’ll be grand.