Designing Your App

Designing your app
Rails Girls Dublin, February 2013
@simonrand

View Slide

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

View Slide

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

Information Architecture
IA

View Slide

Leave your computer..

View Slide

View Slide

Goal:
To make an app for ideas

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

Go back to your
computer if you like..

View Slide

Visual Wireframe

View Slide

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

View Slide

No styling!

View Slide

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

View Slide

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

View Slide

Visual Design

View Slide

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

View Slide

Also about refining UI & UX

View Slide

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

View Slide

Three key aspects

View Slide

Grids
(thanks @broccolini)

View Slide

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

View Slide

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.

View Slide

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

View Slide

wubdub273
Bob Marley
Jamaica
5 | 68
Following Share
wubdub.net
IMAGE
wubdub273
Share 306 17 116
| |
House
IMAGE
wubdub273
Share 414 23 169
| |
Reggae
IMAGE
wubdub273
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

View Slide

Typography
(thanks again @broccolini)

View Slide

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

View Slide

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
Create clear hierarchy with heading font sizes

View Slide

Heading
Sub Heading
Increase the line height to increase readability

View Slide

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
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
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi zzril delenit
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.

View Slide

Colour
(thanks again @broccolini)

View Slide

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

View Slide

..but always keep
colours simple!

View Slide

Dribbble.com
Colourlovers.com

View Slide

IMAGE
wubdub273
Share 306 17 116
| |
House
IMAGE
wubdub273
Share 414 23 169
| |
Reggae
IMAGE
wubdub273
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

View Slide

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

View Slide

Realising your design

View Slide

rel="stylesheet" type="text/css" />

<br/>body {<br/>padding-top: 60px;<br/>}<br/>

RailsIdeas

Ideas
New idea

Listing ideas

Rubies are for
Rails Girls

Love to make is for
Rails Girls

Get excited and make things

View Slide

Cascading Style Sheets (CSS)

View Slide

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

View Slide

..and you get

View Slide

Don’t worry, use Bootstrap

View Slide

View Slide

..get all this

View Slide

..but you can always
change things..

View Slide

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

View Slide

You can always change
something that looks
bad but works.

View Slide

Something that works badly
is a bigger problem.

View Slide

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

View Slide

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

View Slide

Designing Your App

Designing Your App

Rails Girls Dublin

More Decks by Rails Girls Dublin

Other Decks in Design

Featured

Transcript