Slide 1

Slide 1 text

Designing your app Rails Girls Dublin, February 2013 @simonrand

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

As an entreprenuer/ founder/doer.. Design will help your idea be a success

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Types of design IA (information architecture) UI (user interface) UX (user experience) Visual (aesthetic)

Slide 11

Slide 11 text

It's the same process for every project you work on

Slide 12

Slide 12 text

Information Architecture IA

Slide 13

Slide 13 text

Leave your computer..

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Goal: To make an app for ideas

Slide 16

Slide 16 text

Features: List existing ideas View an idea Add a new idea Edit existing ideas

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Go back to your computer if you like..

Slide 21

Slide 21 text

Visual Wireframe

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

No styling!

Slide 24

Slide 24 text

You’ve been doing a bit of UI & UX design as you address the IA

Slide 25

Slide 25 text

You can keep refining, but you have enough to start building

Slide 26

Slide 26 text

Visual Design

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Also about refining UI & UX

Slide 29

Slide 29 text

Do it with further wireframes/ mockups or in the browser (more on that in a bit)

Slide 30

Slide 30 text

Three key aspects

Slide 31

Slide 31 text

Grids (thanks @broccolini)

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

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.

Slide 36

Slide 36 text

Slide 37

Slide 37 text

 Your proﬁle Your likes Your sets Your groups Find friends Settings Log Out

Slide 38

Slide 38 text

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 proﬁle Your likes Your sets Your groups Find friends Settings Log Out

Slide 39

Slide 39 text

Typography (thanks again @broccolini)

Slide 40

Slide 40 text

Helvetica Stick with the classics... Georgia, Times New Roman, serif Arial, sans-serif Monaco, Times New Roman, monospace

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Slide 43

Slide 43 text

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.

Slide 44

Slide 44 text

Colour (thanks again @broccolini)

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

..but always keep colours simple!

Slide 47

Slide 47 text

Dribbble.com Colourlovers.com

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Research is sometimes a good tool, but don’t get caught up in trying to look like something else

Slide 50

Slide 50 text

Realising your design

Slide 51

Slide 51 text

body { padding-top: 60px; }

RailsIdeas

Ideas
New idea

Listing ideas

291941_144323735661191_136157603144471_236822_1917680331_n

Rubies are for

Rails Girls

313675_144323708994527_136157603144471_236821_1798382324_n

Love to make is for

Rails Girls

314932_144323672327864_136157603144471_236819_2087181925_n

Get excited and make things

Slide 52

Slide 52 text

Cascading Style Sheets (CSS)

Slide 53

Slide 53 text

.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; }

Slide 54

Slide 54 text

..and you get

Slide 55

Slide 55 text

Don’t worry, use Bootstrap

Slide 56

Slide 56 text

Slide 57

Slide 57 text

..get all this

Slide 58

Slide 58 text

..but you can always change things..

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

You can always change something that looks bad but works.

Slide 61

Slide 61 text

Something that works badly is a bigger problem.

Slide 62

Slide 62 text

..just always think about what you would like and makes the most sense to you and you’ll be grand.

Slide 63

Slide 63 text

p.s. coders who can design are rare and very sought after