Академический Документы
Профессиональный Документы
Культура Документы
I would like to give some context to this presentation. These slides are from a 2 hour presentation called Design for Developers.
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 scientic way of approaching things like alignment, even though many designers will tell you its something you should feel.
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.
1 2 3 4
Introduction & design theory Practical tips and tricks Practical tips and tricks, cont. Q&A: throughout
Introduction
My name is Johan
Wolf or @wolfr_ on the internet
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
14
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
17
Take something that blows and make it better. Thats probably what the people at Dyson were thinking when they applied their vacuum knowledge to hand dryers. Product of the year for me.
18
Avoiding this...
19
20
I think everyone has the power to make a good product because its more about knowledge and applying that knowledge instead of having strong visual skills. I believe we can extract a lot of rules from common design knowledge. Thats what Im gong to do in this talk.
21
Theory
Lets start with some theory on what makes a good interface.
22
23
It depends.
24
Fast Fun
25
26
Easy to use
If we make our application easy to use, that might just hurt productivity (e.g. no advanced mode, lack of shortcuts, wizards for everything).
Productivity
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 Accessible
Build accessible apps because its the right thing to do (morally) Does anyone in the intended audience have a disability? 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
If we list our desirable qualities and compare them with the program we have here, we might come to the conclusion that its not easy to learn, not accessible (to persons with sight or hearing disability for example; there is no VoiceOver like on Mac, there is no multitasking to run something like JAWS in the background. On the positive side, its probably blazing fast on current computers, and since its all keyboard based I can only guess the time to task completion is also pretty good.
Lets expand on this example with another example, a Point of Sale system. A POS system is used at a register, when you go to a shop and buy something basically.
32
Fun
Easy to use
33
Fast?
...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 efcient 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...
The appropriate interface helps with the business side of things of course. Wikipedia says Colruyt has a cool 475 million prot in book year 2009-2010.
39
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 at 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
44
CSS
46
CSS
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.
I took me years to become productive in Photoshop and I understand why people are advocating designing in the browser.
48
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.
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
51
I divided this up in sections, rst up are typography, alignment and light and shadow. These are the most important parts.
52
Typography
53
Readability
Generally you want a readable typeface, in interface design you want a very readable typeface that works in small sizes This leaves you with very little choice on the web:
The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
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.
56
If youre interested in typography at all, and you want to know more why this is like it is, try http://typophile.com/node/12028
The two fonts at the bottom will not be named... hint: one is universally hated by designers and the other caused a stir when it was used as the subtitle for James Camerons Avatar
Gill Sans
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 culpa qui ofcia deserunt mollit anim id est laborum.
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
Impact
fonts have their roots in print, they are wonderful if used for the right purposes. Gill Sans is a great typeface Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor with British roots, Palatino incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud could be perfect aute irure exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duisfor a book, and Impact, wel... dolor in reprehenderit in voluptate velit esse cillum dolore 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
1iIL 1iIL
As you can Excel set in Gill Sans might give some problems: what if you need cell I1, you would read it as II 61
A crossed zero can make the difference between a font that works for nancial 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
When in doubt, make it larger, especially if its for reading (any long form content in paragraph form) All texts on the web that are meant to be read should be at least 14px big!
65
Font sizes
You can go smaller in interface depending on your font, e.g. if you use Lucida Grande or Verdana you could go for 11, 12 or 13px.
66
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 scientic 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
69
Font services
Use Typekit ($50/yr for low trafc 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
72
Line height
I keep returning to these same values: Use a line-height of 1.1 for headings Use a line-height of 1.5 for paragraphs
73
Alignment
74
75
Much has been written about the dark art of aligning things: theres whole books about aligning and grid systems, mostly dealing with paper sizes and proportions. I want to show you 3 things that might make you better at aligning without having to overthink it.
76
Alignment
Law of proximity (gestalt) Screen interface design: work with the number 6. 6, 12, 18, 36... (example) Grid design example Use space appropriately
77
Law of proximity
78
The law of proximity Spatial or temporal proximity of elements may induce the mind to perceive a collective or totality.
Wikipedia
79
80
As you can see, the left circles form a group, on the right side theres 3 groups, all of this is done by spacing between elements only. Why is this so important and what does it have to do with UI design?
81
The law of proximity says that elements that are closer together will be perceived as a group. Since the spacing is even between every comment here its hard to nd out who wrote which comment.
82
Compare this to a design where there is clear spacing between the comments. The author is on top (as per convention) and the avatar reinforces who is talking.
83
6
84
12 = 18px
Reading font size: Base line height (x1.5)
16 = 24px
85
4x6
6px
Regular spacing Minor spacing
as our unit
86
Example
This part of the presentation is about how I keep returning to the number 6 for aligning and spacing UI elements. It makes sense: all the numbers we use for our defaults (1.5 line height, 16px font size for reading, etc.) form multiples of 6 when used in simple calculations: 12, 18, 24, 36, ...
87
Start off with a grid, I used an online grid calculator (here: http://www.29digital.net/ grid/ ) and dened 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
91
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. 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. Im not saying it looks like the bomb, but we have a solid base to work upon here.
102
I use this strategy all the time, look at my site, all the spacing is based on 6...
103
104
6
105
106
This is the Netix iPad app, Im all for proper whitespace, but this is just not an appropriate design for the iPad. You have all this space, why not use it e.g. to display the lm posters too?
It looks like they just stretched out the existing iPhone app. This is a common problem with most Android tablet software these days.
107
Compare with something like the iPhoto design for iPad that makes appropriate use of the space. Big fan of the designer www.mikematas.com 108
109
111
Take a second to look at this photo and look at the reections, 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 reective and some are not When we press a button it lowers Light is cast from a direction
113
The rst 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. Mike Rundle, yosity.com
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
Clear verb
Clear lines
117
Light direction
Light direction
119
Modal boxes cast a 120 drop shadow (more shadow on bottom and right), be subtle
120
121
Next up are three parts, the rst about color, then icons, and to end reusable design.
122
Color
123
124
125
126
127
128
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
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 also dont have this 6th sense for colors that some designers seem to have)
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
A way to fake color harmony in a kind of engineered way. See the video at http:// methodandcraft.com/videos/creating-harmoniouscolor-schemes
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
#EEE (very light grey) is evil, use at least #D5D5D5 (grey)
Not everyone has an Apple Cinema display: most people have a cheap computer with a crappy screen. If you use a light grey like #EEE then theres a huge chance only part of your audience is going to see it. Pro tip: Test your designs on your mothers computer. You can even see the difference in screen quality between a Macbook and an iMac. The Macbook has much worse contrast, especially if the screen angle is not optimal.
151
Icons
152
Icons
Invest in a good icon set
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.
Pixel icons are ideal for web applications FamFamFam will only get you so far
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.
(I think they should hire an icon designer and redo their visual design a bit... the product is great though and thats what matters in the end.)
155
I went freelance in January. Must have spent over 800 on icons this year. I consider it an investment, since drawing custom icons for every project would be a disservice to my clients with so many good sets out there.
156
157
158
Something relatively new: @font-face icon fonts. Try Fico, by Belgian designer Lennar Schoors. http://co.lensco.be/
159
Only use an icon when it's well known, otherwise use text, or text + icon
160
Example 1
What does this mean? Its pretty clear... we know this from trafc, we know the exclamation mark, it means warning.
161
Ambiguity
This one is a little tricky. The right button below means add, and I can see that the toggle switches between a grid and a last view, but what about the loop icon? Does it mean zoom? Does it mean view details?
Multiple meanings are a common icon problem, this can be resolved by using labels.
162
The top two icons (refresh and add) are pretty clear and dont need a label
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
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
170
171
Extras
172
http://webexpedition18.com/articles/useful-css-snippets/ 173
Be consistent
174
175
176
So, this presentation is coming to an end. As we walked through typography, alignment, light & shadow, color, icon usage and reusable design I hope you learned something new that you can apply to your work to make it better. Theres certain parts of designing that we can make into guidelines and rules of thumb. Applying these rules will make your design better and in many cases good enough. Nothing beats a dedicated designer though!
177
If you want to become a smarter person read every single book and article mentioned on the following slide.
178
Web resources
http://yosity.com/tutorial/crafting-subtle-realistic-user-interfaces.php http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/ http://www.uie.com/articles/three_hund_million_button http://blogs.msdn.com/b/jensenh/archive/2008/03/12/the-story-of-the-ribbon.aspx http://www.asktog.com/columns/076AppleFlatlandPart2.html http://www.asktog.com/columns/075AppleFlatlandPart1.html http://twitter.github.com/bootstrap/ http://jquerymobile.com/ http://goldengridsystem.com/ http://subtlepatterns.com/ http://www.mikematas.com/ http://pictos.drewwilson.com/ http://picons.me/ http://co.lensco.be/
Books
Defensive Design for the Web: How to improve error messages, help, forms, and other crisis points by Jason Fried & Matthew Linderman Designing Web Usability by Jakob Nielsen Dont make me think! by Steve Krug
Designing the obvious by Robert Hoekman Jr. Designing for interaction by Dan Saffer Getting Real by 37signals http:// gettingreal.37signals.com/
The Elements of Typographic Style by Robert Bringhurst Detail in Typography by Jost Hochuli
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
182
183