Professional Documents
Culture Documents
1
I would like to give some context to this
presentation. These slides are from a 2 hour
presentation called Design for Developers.
2
The goal of Design for Developers is to teach
interface design as a set of rules: there are
some good default values for a lot of design
decisions that you should remember, there is a
scientific way of approaching things like
alignment, even though many designers will tell
you its something you should feel.
3
Some slides only contain a few words or
images so the slides dont distract from what
is being said. Since you are probably viewing
this online, I reworked the entire presentation
and added these sticky notes to add what I
talked about when displaying the slide. They
look like this.
4
1 Introduction & design theory -
2 Practical tips and tricks -
3 Practical tips and tricks, cont. -
4 Q&A: throughout -
5
Introduction
6
My name is Johan
Wolf or @wolfr_ on the internet
7
I run a little freelance
design studio
9
I like to play video games
10
I love to write
11
12
So this is my companys website, ( http://
wolfslittlestore.be/ ) as you can see its
mostly about interface design. Under work
you can see I do a lot of stuff; webdesign,
logos, HTML & CSS, design for iOS. But all of
it comes down to designing interfaces.
13
The kind of design I do is interface design...
14
Its not about the WOW!
15
I dont really care too much for interactive
presentations or branded games. While they
have their right to exist as promotional
material, its not the kind of work I want to
spend my life doing.
16
Its about creating a great product
17
Its about creating a great product
18
Avoiding this...
19
Youve got the power
20
Youve got the power
21
Theory
Lets start with some theory on what makes a
good interface.
22
What is a good
interface?
23
It depends.
24
Examples of desirable qualities
Fun Accessible
When thinking about interfaces, and what
youre going to make, you make a list of
desirable qualities we want our interface to
have.
25
Fast
Fast (app performance)
26
Easy to use Productivity
If we make our application easy to use, that
might just hurt productivity (e.g. no advanced
mode, lack of shortcuts, wizards for
everything). Even though I like to design interfaces for the
general public I have a special love for
advanced modes and ways to get your task
done ASAP even if it requires some training/
learning.
27
Considerations
Build accessible apps
because its the right
thing to do (morally)
Accessible
Does anyone in the
intended audience
have a disability?
e.g. cockpit software
for F16 pilots
Do we have the dev
resources to focus on
accessibility?
28
Lets take this interface for example. I havent
ever used it to be honest, but this us Lotus
123, the competitor to Excel back in the days
of MS DOS.
29
Not easy to use/learn Inaccessible
32
Would you want 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 here... since the employees in our
imaginary shop all get trained do we really
want to use the slick Easy to use system
when maybe we want the system that
enables us to do our task as fast as
possible?
36
Theres a Belgian supermarket, Colruyt, that
tests everything, optimizes everything, and I
think they thought long and hard about their
register/cashier system too. Its not very
modern, but employees know how to work
the system in an efficient manner because
they are trained to do so and the software
enables them to be fast.
37
Would you rather bit F5 + F8 to serve a
customer or go through a wizard with next/
previous options?
38
Business...
39
(I hate shopping there)
40
Why did I put this theory part in the presentation? I want everyone to think
about what theyre building and for who theyre building it.
Even though kids are growing up with computers these days, the current
generation of software is becoming flat and less usable to expert users.
While I <3 Apple software a lot of what they do feels dumbed down. Im very
frustrated making this 150+ slides presentation in Keynote because there is
no automation whatsoever. I cant align things automatically, I have to copy
paste this note thing from slide to slide manually.
41
Some assumptions
42
Goals
You want your designs to look passable
without the intervention of a dedicated
(expensive) designer
You want to be able to create web
applications on your own, or with a team of
developers only
With a little time and some tricks this is not
hard to do, especially for web applications
43
Youre a developer so:
You use your IDE and never ever open
Photoshop or Illustrator unless you have to
You write scripts to solve problems
You love your terminal and database schemes,
not so much your ruler and color palettes (if you
have them)
44
Web developer,
Windows software developer,
Java, Ruby or iOS fanatic:
Good interface =
same principles
45
Web developers have a bit of an edge:
CSS
46
Web developers have a bit of an edge:
47
Who in the audience has ever tried to learn Photoshop?
Its big and vast... theres many tools and palettes and its easy to get lost.
48
Text
I feel at home here, I know what to do, I have the shortcuts in my fingers, I
know what all the tools and palettes do.
49
You dont have to learn Photoshop (or any graphics program for that matter)
to deliver a proper software design. As I said before its a matter of
knowledge and applying this knowledge. As a web developer you have an
extra edge in a sense that you can apply design frameworks easily thanks to
the power of HTML (structure) and CSS (presentation) whereas sharing the
design of one Java app with another is not convenient, if even possible.
50
Practical tips & tricks
Now... on to the real meat of the
presentation. The practical tips and
tricks. What youve been waiting for I
guess!
51
Practical tips & tricks (1)
A Typography -
B Alignment -
C Light & shadow -
I divided this up in sections, first up are typography, alignment and light and
shadow. These are the most important parts.
52
Typography
53
Readability
55
Droid Sans comes with Android and is also optimized for small size display;
Segoe UI is the font used in Windows Phone 7 and parts of the new
Windows I think. Solid choice if youre doing Microsoft software.
Segoe UI
56
Why these fonts?
Specifically designed for UI: compare
Verdana to Times: which will be more
legible at small sizes?
Palatino
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
Some
culpa qui officia deserunt mollit anim id est laborum. fonts have their roots
in print, they are wonderful if
used for the right purposes.
Gill
elit,Sans is a great typeface
Impact
Lorem ipsum dolor sit amet, consectetur adipisicing sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim with British
ad minim roots,
veniam, Palatino
quis nostrud
could consequat.
exercitation ullamco laboris nisi ut aliquip ex ea commodo be perfect Duisfor
auteairure
book,
dolor in reprehenderit in voluptate velit esse cillumand
doloreImpact, wel...
eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
59
Impact ... probably good if you want
to make an IMPACT.
60
Why some fonts are better for interfaces than others
Verdana
1iIL
Gill Sans
1iIL
Heres the same character
string in Verdana and Gill As you can Excel set in Gill Sans might
Sans. give some problems: what if you need cell
I1, you would read it as II
61
zero versus o: difference can be critical
A crossed zero can make the difference between a font that works for financial applications and one that
doesnt. Maybe you want to display a serial number that has both O and 0 (zero) in it. This i from a blog post
about Axel by my favorite typographer, Erik Spiekermann. http://www.fontshop.be/details.php?entry=386 . Its
a very economical typeface perfect for spreadsheets.
62
Font sizes
63
Relative readability
This is a pretty well known picture among designers, it displays the relative readability between a book and a
blog post on a screen set in 16px. Basically we all use type sizes that are way too low. 16px works for reading.
Why not use this browser default instead of making the text tiny?
64
Font sizes
65
Font sizes
66
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 printing reasons, but also a
scientific reason: it's harder to read a text when
lines are too long
Rule of thumb: paragraphs should never be
longer than 60 characters, so limit them in
width
68
Why is my type
so boring?
69
Font services
Use Typekit ($50/yr for low traffic sites)
Use Webtype if you have money ($40/yr/
typeface)
There are very little fonts in Google web fonts
currently that are worth using
Use with caution (performance, quality of
fonts)
Good design is not free in general
70
All efforts to optimize for performance on my own Wolfs Little
Store website were kind of cancelled out by using 2 fonts from an
external web provider. If you care about performance at all, dont
use @font-face.
71
Line height makes all the difference:
73
Alignment
74
How to align things?!
75
How to align things?!
76
Alignment
77
Law of proximity
78
The law of proximity
Wikipedia
79
The law of proximity
80
The law of proximity
81
The law of proximity
82
The law of proximity
83
I keep returning
to the number
6
84
Base font size: Base line height (x1.5)
2x6
12 = 18px 3x6
16 = 24px 4x6
85
6px as our unit
86
Example
87
Start off with a grid, I used an online grid
calculator (here: http://www.29digital.net/
grid/ ) and defined my column and gutter
widths so are multiples of 6.
88
Heres that same grid visualized. I used
Photoshop but you might as well do it in
HTML/CSS if youre used to that.
89
As you can see, if we think of 6 as our
unit, there are 4 units between columns,
and each column is 16 units wide.
90
I add some elements to the interface...
91
...a header area, a content area...
92
The height of content area if flexible, for
the header I used a multiple of 6 again.
93
For the spacing between the areas I used
a multiple of 6 again. Its easy, just keep
returning to the number 6.
94
I add some text, this is from Moby Dick
(book in the public domain). Now, it still
looks like **** so lets do something about
that.
95
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, its all a multiple of 6, and
the reason I made my paragraph 4
columns wide ties into the line length
reasoning as discussed earlier. Its a
ruleset that makes sense.
98
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 dont need
to display it all the time now. I go to my
standard colors (more on that later).
100
I keep on designing... again keeping 6 in
the back of my head. For example, the
padding in the comments is 12px, and
the line height of the navigation items is
24px.
101
We have a design that looks passable
without much designing really: we applied
some guidelines, thats it.
102
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
107
Use space appropriately
108
Light & shadow
109
Shadows and gradients rule #1:
110
Think of real life
111
Take a second to look at this photo
and look at the reflections, 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 lower object
Some surfaces are reflective and some are
not
When we press a button it lowers
Light is cast from a direction
113
Shadows are never pure black
The first box looks kinda like what you would see in a common developer
design. Try to soften it a bit more by using a greyish tint (middle), I like to
make my shadows a bit blueish grey (third box). Its kinda hard to see but
all the little details together often make a design great instead of just good.
114
Drop Shadows will ruin your design if you
don't do it right. Things should be right up
against their surface which means using a
1-3px Drop Shadow size. And 0-3px
distance. This isn't WordArt.
115
Window shadow
The window shadow on Mac OSX is a bit overdone but it does make a
good example that you should think of objects on top (windows, modals)
to be physically on top and thus cast a shadow. This helps with the
metaphor and helps people understand what theyre seeing.
116
Recipe for a good button!
117
Recipe for a good button!
118
Dont just flip the gradient direction!
Light
direction
119
Most interfaces: think of light coming in
from a 120 angle
120
Practical tips & tricks (2)
121
Practical tips & tricks (2)
A Color -
B Icons -
C Reusable design -
Next up are three parts, the first about color, then icons, and to end reusable
design.
122
Color
123
Ways to pick colors
124
125
Hues app for Mac is pretty
cool, and its 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 its a good idea
to think about blending them a bit for a more
natural and considered design.
130
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 pure grey or
black.
138
Campaign Monitor does a
good job at blending colors.
139
Theres a green background, dark green for the
heading, some softer green for the text, and
then a clear button. All work very well together,
of course, theyre all variations on the same
color.
140
For example, heres the page title, instead of
just using white they used a tint of blue,
blending properly with the background color.
This looks better.
141
I dont use too much color to make a point
about simplicity.
142
Im not the only designer just resorting to
B&W, heres http://www.subtraction.com/ by
internet famous Khoi Vinh.
143
Kuler might be a good tool for color but I
dont really work with too many palettes in
interface design, I mostly stick to what I
know that works already (white/grey/black +
accent colors + standard message colors,
e.g. red for error and green for success)
144
I dont have a sixth sense for color, I can
apply the color theory I know, but mostly UI
design doesnt need a lot of color, so I
wouldnt worry too much about it either.
145
Fake harmony
146
This is Campaign Monitor again, here they use a
shade of dark grey with a blueish tint instead of
just dark grey on a white background. I often do
this too, it looks prettier and adds some life to a
page. (you can apply the same logic to buttons,
backgrounds, etc.;
147
148
149
150
Contrast Not everyone has an Apple Cinema
display: most people have a cheap
computer with a crappy screen. If you
#EEE (very light grey) is evil, use a light grey like #EEE then theres
151
Icons
152
Icons Not so much to say about icons,
theyre an essential part in the
interface to easily recognize actions
and parts without having to think too
much.
153
FamFamFam (www.famfamfam.com)
is a free set, often used, Im kind of
tired of seeing it all over the place.
154
Even multi million dollar companies
get away with still using FamFamFam.
155
Collect good things in your personal library
156
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://fico.lensco.be/
159
Icon rule #1:
160
Example 1
161
Ambiguity
162
Text + icon when in doubt
163
Reusable design
164
Just like you create functions to reuse
in code, you should have a design
library with elements you can reuse
(Web devs have it easy thanks to CSS)
165
Bootstrap from Twitter is possibly the best
looking design framework Ive seen: http://
twitter.github.com/bootstrap/
166
A lot of the knowledge mentioned in this
presentation is applied perfectly in Bootstrap.
167
This site for example was coded up with
Bootstrap in one evening by a developer with few
visual skills. Looks passable, even good to me!
168
jQuery Mobile recently released 1.0, if youre
doing something thats mobile only, this might be
a good framework candidate.
I played around with the beta and they do a lot of
things right by default.
169
Theres frameworks out there for responsive
design too, http://goldengridsystem.com/
170
Avoid frameworks that look dated. Not every
framework is good.
171
Extras
172
Dont remove outlines!
http://webexpedition18.com/articles/useful-css-snippets/
173
Be consistent
174
Dont 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.
177
If you want to become a smarter person read every single book
and article mentioned on the following slide.
178
Web resources
http://flyosity.com/tutorial/crafting-subtle-realistic-user-interfaces.php http://twitter.github.com/bootstrap/
http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/ http://jquerymobile.com/
http://www.uie.com/articles/three_hund_million_button http://goldengridsystem.com/
http://blogs.msdn.com/b/jensenh/archive/2008/03/12/the-story-of-the-ribbon.aspx http://subtlepatterns.com/
http://www.asktog.com/columns/076AppleFlatlandPart2.html
http://www.mikematas.com/
http://www.asktog.com/columns/075AppleFlatlandPart1.html
http://pictos.drewwilson.com/
http://picons.me/
http://fico.lensco.be/
179
Hire me.
If you like what youre seeing, I can apply my
knowledge to your application too, or give this
presentation for your company. Get in touch:
mail@wolfslittlestore.be
180
Follow me on Twitter
Heres the link:
http://twitter.com/wolfr_
181
Subscribe to the blog:
Heres the link:
http://wolfslittlestore.be/journal/
RSS:
http://feeds.feedburner.com/Wolfslittlestore
182
Thank you for your attention!
183