Design for developers

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Design for developers

1

I would like to give some context to this
presentation. These slides are from a 2 hour
presentation called Design for Deve...

The goal of Design for Developers is to teach
interface design as a set of rules: there are
some good default values for a...

Some slides only contain a few words or
images so the slides don’t distract from what
is being said. Since you are probabl...

1 Introduction & design theory -
2 Practical tips and tricks -
3 Practical tips and tricks, cont. -...

Introduction

6

My name is Johan
Wolf or @wolfr_ on the internet

7

I run a little freelance
design studio

Wolf’s Little Store
8

I read stuff all day

9

I like to play video games

10

I love to write

11

So this is my company’s website, ( http://
wolfslittlestore.be/ ) as you can see it’s
mostly about interface des...

The kind of design I do is interface design...

14

It’s not about the “WOW!”

15

I don’t really care too much for interactive
presentations or branded games. While they
have their right to exis...

It’s about creating a great product

17

It’s about creating a great product

Take something that blows and make it
be...

Avoiding this...

19

You’ve got the power

20

You’ve got the power

I think everyone has the power to make a
good product because it’s mo...

Theory
Let’s start with some theory on what makes a
good interface.

22

What is a good
interface?

23

It depends.

24

Examples of desirable qualities

Fast Easy to use

Fun Accessible
Whe...

Fast
Fast (app performance)

Fast (time to task completion)

Maybe we want our interface to be...

Easy to use Productivity
If we make our application easy to use, that
might...

Considerations
Build accessible apps
bec...

Let’s take this interface for example. I haven’t
ever used it to be honest, but this us Lotus
123, the competito...

Not easy to use/learn Inaccessible

Fast (performance) Fast task completion
30

If we list our desirable qualities and compare
them with the program we have here, we
...

Let’s expand on this example with another
example, a Point of Sale system. A POS
system is use...

Would you want this...

Fun Easy to use Fast?
33

...this...

34

Or this?

35

The opposition between making an
application easy to use vs. making it so you
can complete your task quickly becomes
clear...

There’s a Belgian supermarket, Colruyt, that
tests everything, optimizes everything, and I
think they thought long and har...

Would you rather bit F5 + F8 to serve a
customer or go through a wizard with next/
previous options?

...

Business...

The appropriate interface helps with the
business side of things of course. Wikipedia
...

(I hate shopping there)

Unfortunately the experience of shopping
there is not really what...

Why did I put this theory part in the presentation? I want everyone to think
about what they’re building and for who they’...

Some assumptions

42

Goals
• You want your designs to look passable
without the intervention of a dedicated
(expensive) designer
• You ...

You’re a developer so:
• You use your IDE and never ever open
Photoshop or Illustrator unless you have to
• You write sc...

Web developer,
Windows software developer,
Java, Ruby or iOS fanatic:

Good interface =
same princ...

Web developers have a bit of an edge:

CSS
46

Web developers have a bit of an edge:

CSS Shareable design

47

Who in the audience has ever tried to learn Photoshop?
It’s big and vast... there’s many tools and palettes and it’s easy ...

Text

I feel at home here, I know what to do, I have the shortcuts in my ﬁngers, I
know what all the tools and palettes do...

You don’t have to learn Photoshop (or any graphics program for that matter)
to deliver a proper software design. As I said...

Practical tips & tricks
Now... on to the real meat of the
presentation. The practical tips...

Practical tips & tricks (1)
A Typography -...

Typography

53

Readability

• Generally you want a readable typeface, in
interface design you want a very readable
typeface that work...

Verdana The quick brown fox jumps
over the lazy dog

Lucida Gr...

Droid Sans comes with Android and is also optimized for small size display;
Segoe UI is the font used in Window...

Why these fonts?
Specifically designed for UI: compare
Verdana to Times: which will be more
legible at small sizes?

Verd...

Why these fonts?
Hinted at low sizes

The two fonts at the bottom
will not ...

Gill Sans
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididu...

Impact ... probably good if you want
to make an IMPACT.

60

Why some fonts are better for interfaces than others

Verdana
1iIL
Gill Sans
...

zero versus “o”: difference can be critical

A crossed zero can make the difference between a font that works for ﬁnanc...

Font sizes

63

Relative readability

This is a pretty well known picture among designers, it displays the relative readability between...

Font sizes

• When in doubt, make it larger, especially if it’s
for reading (any long form content in
paragraph form)
...

Font sizes

• You can go smaller in interface depending
on your font, e.g. if you use Lucida Grande
or Verdana you ...

What is wrong with this picture?

67

Reading length
• There's a reason newspapers are set in
columns, that books are not wider than they
are... practical p...

Why is my type
so boring?

69

Font services
• Use Typekit ($50/yr for low trafﬁc sites)
• Use Webtype if you have money ($40/yr/
typeface)
• There are...

All efforts to optimize for performance on my own Wolf’s Little
Store website were kind of cancelled out by using 2 fonts ...

Line height makes all the difference:

1.5 line height 72 1.0 line height

Line height

• I keep returning to these same values:
• Use a line-height of 1.1 for headings
• Use a line-height of 1...

Alignment

74

How to align things?!

75

How to align things?!

Much has been written about the dark art
of aligning things: there’s whole books
about aligning ...

Alignment

• Law of proximity (gestalt)
• Screen interface design: work with the number 6. 6,
12, 18, 36... (example)
...

Law of proximity

78

The law of proximity

The law of proximity – Spatial or
temporal proximity of elements may
induce the mind to perceive ...

The law of proximity

80

The law of proximity

As you can see, the left circles form a
group, on the right side there’s 3 groups,
all of this is...

The law of proximity

The law of proximity says that elements
that are closer together ...

The law of proximity

Compare this to a design where there is
clear spacing between the...

I keep returning
to the number

6
84

Base font size: Base line height (x1.5)

2x6
12 = 18px 3x6

Readi...

6px as our “unit”

Major elements spacing 6 units
Regular spacing 4 units
Minor spacing ...

Example

This part of the presentation is about how
I keep returning to the number 6 for
...

Start off with a grid, I used an online grid
calculator (here: http://www.29digital.net/
grid/ ) and deﬁned my c...

Here’s that same grid visualized. I used
Photoshop but you might as well do it in
HTML/CSS if you’re used to tha...

As you can see, if we think of 6 as our
unit, there are 4 units between columns,
and each column is 16 units wid...

I add some elements to the interface...

91

...a header area, a content area...

92

The height of content area if ﬂexible, for
the header I used a multiple of 6 again.

93

For the spacing between the areas I used
a multiple of 6 again. It’s easy, just keep
returning to the number 6.
...

I add some text, this is from Moby Dick
(book in the public domain). Now, it still
looks like **** so let’s do s...

I set the font to 16px since this is my
default for reading, then add spacing
between the paragraphs.

96

I add a heading which has a font size of
24px, once again tying into the number 6

97

Look, the spacing between elements is
not arbitrary, it’s all a multiple of 6, and
the reason I made my paragrap...

I move the text to the middle since I want
to add a navigation etc. to the website.

99

I know how my grid works so I don’t need
to display it all the time now. I go to my
standard colors (more on t...

I keep on designing... again keeping 6 in
the back of my head. For example, the
padding in the comments is 12p...

We have a design that looks passable
without much designing really: we applied
some guidelines, that’s it.

...

I use this strategy all the time, look at my
site, all the spacing is based on 6...

103

This might be a bit more clear.

104

Keep returning to
the number

6
105

Use space appropriately

106

Use space appropriately

This is the Netﬂix iPad app, I’m all for
proper whitespace...

Use space appropriately

Compare with something like the
iPhoto design for iPad t...

Light & shadow

109

Shadows and gradients rule #1:

Use shadows and
gradients as a tool, not
as decoration

110

Think of real life

111

Take a second to look at this photo
and look at the reﬂections, the knobs,
the shadows being cast.

112

In real life...
• Shadows are never pure black (radiosity)
• Objects higher than other objects cast a
shadow on the lowe...

Shadows are never pure black

The ﬁrst box looks kinda like what you would see in a common “developer
design”. Try to s...

Drop Shadows will ruin your design if you
don't do it right. Things should be right up
against their surface which means u...

Window shadow

The window shadow on Mac OSX is a bit overdone but it does make a
good example that you should think of ...

Recipe for a good button!

Light to dark gradient
Try to think of light as
...

Recipe for a good button!

Distinctive active state
It’s not realistic to chan...

Don’t just flip the gradient direction!

Just ﬂipping the gradient
...

Most interfaces: think of light coming in
from a 120° angle

Text inputs have shadows Modal...

Practical tips & tricks (2)

121

Practical tips & tricks (2)
A Color -
B ...

Color

123

Ways to pick colors

124

125

Hues app for Mac is pretty
cool, and it’s only €2

126

Hues is a good replacement
for the standard digital color
meter.

127

Easy coloring: 3 values

128

I only ever use 3 colors to
start with, to establish some
hierarchy.

129

Blending
If you do work with more color it’s a good idea
to think about blending them a bit for a more
natural an...

131

132

133

134

135

136

137

Try to use a darker version
of the background color as
your text color, this will look
better than just ...

Campaign Monitor does a
good job at blending colors.

139

There’s a green background, dark green for the
heading, some softer green for the text, and
then a clear butto...

For example, here’s the page title, instead of
just using white they used a tint of blue,
blending properly wi...

I don’t use too much color to make a point
about simplicity.

(I also don’t have this 6th sense for colors
...

I’m not the only designer just resorting to
B&W, here’s http://www.subtraction.com/ by
internet famous Khoi Vi...

Kuler might be a good tool for color but I
don’t really work with too many palettes in
interface design, I mos...

I don’t have a sixth sense for color, I can
apply the color theory I know, but mostly UI
design doesn’t need a...

Fake harmony

A way to fake color harmony in a kind of
engineered way. See the video at http://
...

This is Campaign Monitor again, here they use a
shade of dark grey with a blueish tint instead of
just dark gr...

148

149

150

Contrast Not everyone has an Apple Cinema
dis...

Icons

152

Icons Not so much to say about icons,
they’re an essential part in...

FamFamFam (www.famfamfam.com)
is a free set, often used, I’m kind of
tired of seeing it all over the place.

...

Even multi million dollar companies
get away with still using FamFamFam.

(I think ...

Collect good things in your personal library

I went freelance in January. Must have spent over
...

Picons is pretty good: http://picons.me/

157

I like Pictos too, http://pictos.drewwilson.com/

158

Something relatively new: @font-face icon fonts.
Try Fico, by Belgian designer Lennar Schoors.
http://ﬁco.lensco.be/

...

Icon rule #1:

Only use an icon
when it's well known,
otherwise use text, or
text + icon

160

Example 1

What does this mean? It’s pretty clear... we know
this from trafﬁc, we know the exclamatio...

Ambiguity

This one is a little tricky. The right button below
means add, and I can see that the togg...

Text + icon when in doubt

When in doubt, use text + icon, like here.

The top tw...

Reusable design

164

Just like you create functions to reuse
in code, you should have a design
library with elements you can reuse
(W...

Bootstrap from Twitter is possibly the best
looking design framework I’ve seen: http://
twitter.github.com/boo...

A lot of the knowledge mentioned in this
presentation is applied perfectly in Bootstrap.

...

This site for example was coded up with
Bootstrap in one evening by a developer with few
visual skills. Looks passable, ...

jQuery Mobile recently released 1.0, if you’re
doing something that’s mobile only, this might be
a good framework candidat...

There’s frameworks out there for responsive
design too, http://goldengridsystem.com/

170

Avoid frameworks that look dated. Not every
framework is good.

171

Extras

172

Don’t remove outlines!

http://webexpedition18.com/articles/useful-css-snippets/

173

Be consistent

174

Don’t put everything on the same screen

175

Text is interface/Tone can make all the difference

176

So, this presentation is coming to an end.

As we walked through typography, alignment, light & shadow,
color, icon usage ...

If you want to become a smarter person read every single book
and article mentioned on the following slide.

...

Web resources
http://ﬂyosity.com/tutorial/crafting-subtle-realistic-user-interfaces.php http://twitter.github.co...

Hire me.
If you like what you’re seeing, I can apply my
knowledge to your application too, or give this
presentation for y...

Follow me on Twitter
Here’s the link:
http://twitter.com/wolfr_

181

Subscribe to the blog:
Here’s the link:
http://wolfslittlestore.be/journal/

RSS:...

Thank you for your attention!

183

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

iOS design: a case study by Johan Ronsse 91885 views
Designing better user interfaces by Johan Ronsse 65221 views
Good vs. Great Design by Cameron Moll 74363 views
What slide dimensions should you us... by Presentitude 348775 views
UX Design + UI Design: Injecting a ... by Jayan Narayanan 327095 views
The AI Rush by Jean-Baptiste Dumont 1088834 views

View on Slideshare

1 of 183 Ad

View on Slideshare

1 of 183 Ad