Designing Your App

Presentation on design principles by Simon Rand

Transcript

1. Designing your app Rails Girls Dublin, February 2013 @simonrand
2. @simonrand Director @iorum (web & mobile developers) Designer Developer
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..
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