Design for Developers - Speaker Deck

Slide 1

Slide 1 text

Design for developers 1

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

3 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 “scientiﬁc” way of approaching things like alignment, even though many designers will tell you it’s something you should “feel”.

Slide 4

Slide 4 text

4 Some slides only contain a few words or images so the slides don’t 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.

Slide 5

Slide 5 text

Introduction & design theory Practical tips and tricks Practical tips and tricks, cont. Q&A: throughout - - - - 1 2 3 4 5

Slide 6

Slide 6 text

Introduction 6

Slide 7

Slide 7 text

My name is Johan Wolf or @wolfr_ on the internet 7

Slide 8

Slide 8 text

I run a little freelance design studio Wolf’s Little Store 8

Slide 9

Slide 9 text

I read stuff all day 9

Slide 10

Slide 10 text

I like to play video games 10

Slide 11

Slide 11 text

I love to write 11

Slide 12

Slide 12 text

Slide 13

Slide 13 text

13 So this is my company’s website, ( http:// wolfslittlestore.be/ ) as you can see it’s 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.

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

It’s not about the “WOW!” 15

Slide 16

Slide 16 text

16 I don’t really care too much for interactive presentations or branded games. While they have their right to exist as promotional material, it’s not the kind of work I want to spend my life doing.

Slide 17

Slide 17 text

It’s about creating a great product 17

Slide 18

Slide 18 text

It’s about creating a great product 18 Take something that blows and make it better. That’s probably what the people at Dyson were thinking when they applied their vacuum knowledge® to hand dryers. Product of the year for me.

Slide 19

Slide 19 text

Avoiding this... 19

Slide 20

Slide 20 text

You’ve got the power 20

Slide 21

Slide 21 text

You’ve got the power 21 I think everyone has the power to make a good product because it’s 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. That’s what I’m gong to do in this talk.

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

What is a good interface? 23

Slide 24

Slide 24 text

It depends. 24

Slide 25

Slide 25 text

Examples of desirable qualities Fast Easy to use Accessible Fun 25 When thinking about interfaces, and what you’re going to make, you make a list of desirable qualities we want our interface to have.

Slide 26

Slide 26 text

Fast (app performance) Fast (time to task completion) Fast 26 Maybe we want our interface to be fast — in terms of performance — or we want it to be fast in terms of task completion.

Slide 27

Slide 27 text

Easy to use Productivity 27 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.

Slide 28

Slide 28 text

Accessible Considerations Build accessible apps because it’s the right thing to do (morally) 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

Slide 29

Slide 29 text

29 Let’s take this interface for example. I haven’t ever used it to be honest, but this us Lotus 123, the competitor to Excel back in the days of MS DOS.

Slide 30

Slide 30 text

Not easy to use/learn Fast (performance) Inaccessible Fast task completion 30

Slide 31

Slide 31 text

Not easy to use/learn Fast (performance) Inaccessible Fast task completion 31 If we list our desirable qualities and compare them with the program we have here, we might come to the conclusion that it’s 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, it’s probably blazing fast on current computers, and since it’s all keyboard based I can only guess the time to task completion is also pretty good.

Slide 32

Slide 32 text

Example: POS system 32 Let’s 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.

Slide 33

Slide 33 text

Would you want this... Fast? Fun Easy to use 33

Slide 34

Slide 34 text

...this... 34

Slide 35

Slide 35 text

Or this? 35

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

37 There’s a Belgian supermarket, Colruyt, that tests everything, optimizes everything, and I think they thought long and hard about their register/cashier system too. It’s not very modern, but employees know how to work the system in an efﬁcient manner because they are trained to do so and the software enables them to be fast.

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Business... 39 The appropriate interface helps with the business side of things of course. Wikipedia says Colruyt has a cool €475 million proﬁt in book year 2009-2010.

Slide 40

Slide 40 text

(I hate shopping there) 40 Unfortunately the experience of shopping there is not really what I want, I’d rather pay a bit more and don’t feel like I’m shopping around in a prison. But that might just be me.

Slide 41

Slide 41 text

41 Why did I put this theory part in the presentation? I want everyone to think about what they’re building and for who they’re 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. I’m very frustrated making this 150+ slides presentation in Keynote because there is no automation whatsoever. I can’t align things automatically, I have to copy paste this note thing from slide to slide manually.

Slide 42

Slide 42 text

Some assumptions 42

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

• 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) You’re a developer so: 44

Slide 45

Slide 45 text

Web developer, Windows software developer, Java, Ruby or iOS fanatic: Good interface = same principles 45

Slide 46

Slide 46 text

Web developers have a bit of an edge: CSS 46

Slide 47

Slide 47 text

Web developers have a bit of an edge: CSS Shareable design 47

Slide 48

Slide 48 text

48 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 to get lost. I took me years to become productive in Photoshop and I understand why people are advocating designing in the browser.

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

50 You don’t have to learn Photoshop (or any graphics program for that matter) to deliver a proper software design. As I said before it’s 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.

Slide 51

Slide 51 text

Practical tips & tricks 51 Now... on to the real meat of the presentation. The practical tips and tricks. What you’ve been waiting for I guess!

Slide 52

Slide 52 text

Typography Alignment Light & shadow - - - A B C Practical tips & tricks (1) 52 I divided this up in sections, ﬁrst up are typography, alignment and light and shadow. These are the most important parts.

Slide 53

Slide 53 text

Typography 53

Slide 54

Slide 54 text

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:

Slide 55

Slide 55 text

Verdana Lucida Grande (Fallback: Lucida Sans Unicode) The quick brown fox jumps over the lazy dog 55 The quick brown fox jumps over the lazy dog

Slide 56

Slide 56 text

Droid Sans Segoe UI 56 The quick brown fox jumps over the lazy dog 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 you’re doing Microsoft software.

Slide 57

Slide 57 text

Why these fonts? Specifically designed for UI: compare Verdana to Times: which will be more legible at small sizes? Verdana at 36px Times at 36px If you’re interested in typography at all, and you want to know more why this is like it is, try http://typophile.com/node/12028

Slide 58

Slide 58 text

Why these fonts? Hinted at low sizes 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 Cameron’s Avatar

Slide 59

Slide 59 text

Gill Sans 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 culpa qui ofﬁcia deserunt mollit anim id est laborum. 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 ofﬁcia deserunt mollit anim id est laborum. 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 officia deserunt mollit anim id est laborum. Impact 59 Some fonts have their roots in print, they are wonderful if used for the right purposes. Gill Sans is a great typeface with British roots, Palatino could be perfect for a book, and Impact, wel...

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Verdana Gill Sans 1 i I L 1 i I L Why some fonts are better for interfaces than others 61 Here’s the same character string in Verdana and Gill Sans. As you can Excel set in Gill Sans might give some problems: what if you need cell I1, you would read it as II

Slide 62

Slide 62 text

zero versus “o”: difference can be critical 62 A crossed zero can make the difference between a font that works for ﬁnancial applications and one that doesn’t. 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 . It’s a very economical typeface perfect for spreadsheets.

Slide 63

Slide 63 text

Font sizes 63

Slide 64

Slide 64 text

Relative readability 64 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?

Slide 65

Slide 65 text

Font sizes • When in doubt, make it larger, especially if it’s 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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

What is wrong with this picture? 67

Slide 68

Slide 68 text

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 scientiﬁc 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

Slide 69

Slide 69 text

Why is my type so boring? 69

Slide 70

Slide 70 text

Font services • Use Typekit ($50/yr for low trafﬁc 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

Slide 71

Slide 71 text

71 All efforts to optimize for performance on my own Wolf’s Little Store website were kind of cancelled out by using 2 fonts from an external web provider. If you care about performance at all, don’t use @font-face.

Slide 72

Slide 72 text

Line height makes all the difference: 1.5 line height 1.0 line height 72

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

Alignment 74

Slide 75

Slide 75 text

How to align things?! 75

Slide 76

Slide 76 text

How to align things?! 76 Much has been written about the dark art of aligning things: there’s 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.

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

Law of proximity 78

Slide 79

Slide 79 text

The law of proximity – Spatial or temporal proximity of elements may induce the mind to perceive a collective or totality. Wikipedia The law of proximity 79

Slide 80

Slide 80 text

The law of proximity 80

Slide 81

Slide 81 text

The law of proximity 81 As you can see, the left circles form a group, on the right side there’s 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?

Slide 82

Slide 82 text

The law of proximity 82 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 it’s hard to ﬁnd out who wrote which comment.

Slide 83

Slide 83 text

The law of proximity 83 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.

Slide 84

Slide 84 text

I keep returning to the number 6 84

Slide 85

Slide 85 text

85 Base font size: 12 Base line height (x1.5) = 18px Reading font size: 16 Base line height (x1.5) = 24px 3x6 4x6 2x6

Slide 86

Slide 86 text

86 Major elements spacing 6px as our “unit” 6 units Regular spacing 4 units Minor spacing 2 units

Slide 87

Slide 87 text

87 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, ...

Slide 88

Slide 88 text

88 Start off with a grid, I used an online grid calculator (here: http://www.29digital.net/ grid/ ) and deﬁned my column and gutter widths so are multiples of 6.

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

91 I add some elements to the interface...

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

98 Look, the spacing between elements is not arbitrary, it’s all a multiple of 6, and the reason I made my paragraph 4 columns wide ties into the line length reasoning as discussed earlier. It’s a ruleset that makes sense.

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

100 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 that later).

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

102 We have a design that looks passable without much designing really: we applied some guidelines, that’s it. I’m not saying it looks like the bomb, but we have a solid base to work upon here.

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

104 This might be a bit more clear.

Slide 105

Slide 105 text

105 Keep returning to the number 6

Slide 106

Slide 106 text

106 Use space appropriately

Slide 107

Slide 107 text

Use space appropriately 107 This is the Netﬂix iPad app, I’m 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.

Slide 108

Slide 108 text

108 Use space appropriately Compare with something like the iPhoto design for iPad that makes appropriate use of the space. Big fan of the designer www.mikematas.com

Slide 109

Slide 109 text

Light & shadow 109

Slide 110

Slide 110 text

Use shadows and gradients as a tool, not as decoration Shadows and gradients rule #1: 110

Slide 111

Slide 111 text

Think of real life 111

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

In real life... • Shadows are never pure black (radiosity) • Objects higher than other objects cast a shadow on the lower object • Some surfaces are reﬂective and some are not • When we press a button it lowers • Light is cast from a direction 113

Slide 114

Slide 114 text

Shadows are never pure black 114 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). It’s kinda hard to see but all the little details together often make a design great instead of just good.

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

Window shadow 116 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 they’re seeing.

Slide 117

Slide 117 text

Recipe for a good button! Light to dark gradient Clear verb Clear lines 117 Try to think of light as coming from a certain direction. The most natural direction is from the top (e.g. the sun). Thus, a light coming in from the top would make the top part of a button lighter, and the bottom part darker. This is why your gradient runs from light to dark, not just because you thought it looks nice.

Slide 118

Slide 118 text

Recipe for a good button! Distinctive active state Inner shadows work for “pressed” look 118 It’s not realistic to change the color of a button when you press it but it does help to reinforce which button was clicked. In real life the button would probably lower a bit thus creating an inner shadow.

Slide 119

Slide 119 text

Don’t just flip the gradient direction! Light direction Light direction 119 Just ﬂipping the gradient direction is the equivalent of the environment light changing direction when you hover over/click a button, this makes zero sense. It’s also way too subtle.

Slide 120

Slide 120 text

Most interfaces: think of light coming in from a 120° angle Text inputs have shadows on the top and left Modal boxes cast a 120° drop shadow (more shadow on bottom and right), be subtle 120

Slide 121

Slide 121 text

Practical tips & tricks (2) 121

Slide 122

Slide 122 text

Color Icons Reusable design - - - A B C Practical tips & tricks (2) 122 Next up are three parts, the ﬁrst about color, then icons, and to end reusable design.

Slide 123

Slide 123 text

Color 123

Slide 124

Slide 124 text

Ways to pick colors 124

Slide 125

Slide 125 text

125

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

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

Slide 128

Slide 128 text

Easy coloring: 3 values 128

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

131

Slide 132

Slide 132 text

132

Slide 133

Slide 133 text

133

Slide 134

Slide 134 text

134

Slide 135

Slide 135 text

135

Slide 136

Slide 136 text

136

Slide 137

Slide 137 text

137

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

139 Campaign Monitor does a good job at blending colors.

Slide 140

Slide 140 text

140 There’s 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, they’re all variations on the same color.

Slide 141

Slide 141 text

141 For example, here’s the page title, instead of just using white they used a tint of blue, blending properly with the background color. This looks better.

Slide 142

Slide 142 text

142 I don’t use too much color to make a point about simplicity. (I also don’t have this 6th sense for colors that some designers seem to have)

Slide 143

Slide 143 text

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

Slide 144

Slide 144 text

144 Kuler might be a good tool for color but I don’t 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)

Slide 145

Slide 145 text

145 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 lot of color, so I wouldn’t worry too much about it either.

Slide 146

Slide 146 text

146 Fake harmony A way to fake color harmony in a kind of engineered way. See the video at http:// methodandcraft.com/videos/creating-harmonious- color-schemes

Slide 147

Slide 147 text

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

Slide 148

Slide 148 text

148

Slide 149

Slide 149 text

149

Slide 150

Slide 150 text

150

Slide 151

Slide 151 text

Contrast #EEE (very light grey) is evil, use at least #D5D5D5 (grey) What they see What you think they see 151 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 there’s a huge chance only part of your audience is going to see it. Pro tip: Test your designs on your mother’s 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.

Slide 152

Slide 152 text

Icons 152

Slide 153

Slide 153 text

Icons • Invest in a good icon set • Pixel icons are ideal for web applications • FamFamFam will only get you so far 153 Not so much to say about icons, they’re an essential part in the interface to easily recognize actions and parts without having to think too much.

Slide 154

Slide 154 text

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

Slide 155

Slide 155 text

155 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 that’s what matters in the end.)

Slide 156

Slide 156 text

156 Collect good things in your personal library 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.

Slide 157

Slide 157 text

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

Slide 158

Slide 158 text

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

Slide 159

Slide 159 text

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

Slide 160

Slide 160 text

Only use an icon when it's well known, otherwise use text, or text + icon Icon rule #1: 160

Slide 161

Slide 161 text

Example 1 161 What does this mean? It’s pretty clear... we know this from trafﬁc, we know the exclamation mark, it means “warning”.

Slide 162

Slide 162 text

Ambiguity 162 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.

Slide 163

Slide 163 text

Text + icon when in doubt 163 When in doubt, use text + icon, like here. The top two icons (refresh and add) are pretty clear and don’t need a label

Slide 164

Slide 164 text

Reusable design 164

Slide 165

Slide 165 text

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

Slide 166

Slide 166 text

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

Slide 167

Slide 167 text

167 A lot of the knowledge mentioned in this presentation is applied perfectly in Bootstrap. Hooray for http://www.markdotto.com/ !

Slide 168

Slide 168 text

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

Slide 169

Slide 169 text

169 jQuery Mobile recently released 1.0, if you’re doing something that’s 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.

Slide 170

Slide 170 text

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

Slide 171

Slide 171 text

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

Slide 172

Slide 172 text

Extras 172

Slide 173

Slide 173 text

Don’t remove outlines! http://webexpedition18.com/articles/useful-css-snippets/ 173

Slide 174

Slide 174 text

Be consistent 174

Slide 175

Slide 175 text

Don’t put everything on the same screen 175

Slide 176

Slide 176 text

176 Text is interface/Tone can make all the difference

Slide 177

Slide 177 text

177 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. There’s 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!

Slide 178

Slide 178 text

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

Slide 179

Slide 179 text

http://ﬂyosity.com/tutorial/crafting-subtle-realistic-user-interfaces.php Web resources http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/ 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 Don’t 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/ Designing the obvious by Robert Hoekman Jr. http://www.uie.com/articles/three_hund_million_button The Elements of Typographic Style by Robert Bringhurst Detail in Typography by Jost Hochuli http://blogs.msdn.com/b/jensenh/archive/2008/03/12/the-story-of-the-ribbon.aspx 179 http://subtlepatterns.com/ http://goldengridsystem.com/ http://jquerymobile.com/ http://twitter.github.com/bootstrap/ http://www.mikematas.com/ http://pictos.drewwilson.com/ http://picons.me/ http://ﬁco.lensco.be/ http://www.asktog.com/columns/076AppleFlatlandPart2.html http://www.asktog.com/columns/075AppleFlatlandPart1.html

Slide 180

Slide 180 text

Hire me. 180 If you like what you’re seeing, I can apply my knowledge to your application too, or give this presentation for your company. Get in touch: mail@wolfslittestore.be

Slide 181

Slide 181 text

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

Slide 182

Slide 182 text

Subscribe to the blog: 182 Here’s the link: http://wolfslittlestore.be/journal/ RSS: http://feeds.feedburner.com/Wolfslittlestore

Slide 183

Slide 183 text

Thank you for your attention! 183