Designing Your App

Designing
your app
Diana Mounter
@broccolini

View Slide

I’m not from here

View Slide

UI
Visual
Interaction
User Experience
I do
DESIGN

View Slide

I design things at Snapguide

View Slide

STAR TREK
COFFEE
POTATOES
We can be friends if you like
THE COLOR
RED

View Slide

Why do you need to know
about design?

View Slide

Is a person going to use the
app you’re making?
NO
Pretend to listen and look
interested so I don’t feel bad
LISTEN
YES

View Slide

Design is about
solving problems

View Slide

GOALS
PEOPLE
USE CASES
PRINCIPLES
A good place to start

View Slide

A good place to start
GOALS Why are you building this?
PEOPLE Who is it for?
USE CASES How are they going to use it?
PRINCIPLES What is important about this app?

View Slide

Cloud of Music
The project

View Slide

GOALS
PEOPLE
USE CASES
PRINCIPLES
A site for people to share music
Music makers and lovers
Upload/listen/share music
Personal, professional, sexy, social
The project

View Slide

Research

View Slide

Sketch

View Slide

User flows
User flows

View Slide

Wireframes
Helps separate
thinking about the
layout and
architecture from
the visual aesthetics.
wubdub273
Bob Marley
Jamaica
5 | 68
IMAGE
wubdub273
Bob Marley
Share
IMAGE
wubdub273
Live @ Th
Share
| Stream | Explore

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

Spacing &
Alignment

View Slide

Favorites
Comments
Tracks
wubdub273
Bob Marley
Jamaica
IMAGE
wubdub273
Share 306 17 116
| |
House
IMAGE
wubdub273
Share 414 23 169
| |
Reggae
IMAGE
wubdub273
Share 198 20 101
| |
Dubstep
Hi wubdub273!
LOGO
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

Favorites
Comments
Tracks
wubdub273
Bob Marley
Jamaica
IMAGE
wubdub273
Share 306 17 116
| |
House
IMAGE
wubdub273
Share 414 23 169
| |
Reggae
IMAGE
wubdub273
Share 198 20 101
| |
Dubstep
Hi wubdub273!
LOGO
That’s a lot of
buttons.
5 | 68
Following Share
wubdub.net

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
Typography
Typography

View Slide

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

View Slide

google.com/webfonts

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
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

Text in a box
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.
Sometimes you want to put text in a box

View Slide

Text in a box
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.
Give it some padding

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
Let’s create some
space & hierarchy.

View Slide

Useful tools for wireframing
• Keynote + keynote kunfu = awesome
• Fireworks: has symbols, great for large projects
• Illustrator: if you like to plan out big flows on one page
• Omnigraffle: if you lurve flow charts
• Sketch: more for design but good all round tool (& cheap)

View Slide

VISUAL
DESIGN

View Slide

COLOR
Be careful how you use color.
It can be distracting.

View Slide

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

View Slide

CONTRAST
CONTRAST

View Slide

Dribbble.com
Colourlovers.com

View Slide

Let’s add some color
and contrast

View Slide

IMAGE
wubdub273
Share 306 17 116
| |
House
IMAGE
wubdub273
Share 414 23 169
| |
Reggae
IMAGE
wubdub273
Share 198 20 101
| |
Dubstep
wubdub273
Stream Explore 
Search for artists and music
wubdub273
Bob Marley
Jamaica
5 | 68
Following Share
wubdub.net

View Slide

Someone has probably already
designed the icon you need
If you want to do design new ones, check what icons
people are used to seeing on other apps.

View Slide

TheNounProject.com
Pictos

View Slide

Design with real content
If you can’t, grab content off similar sites.
And there are some good placeholder content resources
to use too, but make sure you test with real content
before you ship it.

View Slide

rikeripsum.com
lorempixel.com

View Slide

Interaction

View Slide

Some other useful things...

View Slide

Important area in between
Not safe Safe

View Slide

Things will go wrong.
=
Give useful feedback!

View Slide

Get people using it
... sooner rather than later.

View Slide

You won’t get it right the
first time
Don’t be disheartened, keep iterating.

View Slide

Now you just have to build it ;)

View Slide

Designing Your App

Designing Your App

Diana

More Decks by Diana

Other Decks in Design

Featured

Transcript