Design for developers
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Design for developers

on

  • 192,706 views

These slides are from a 2 hour presentation called Design for Developers. ...

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

Statistics

Views

Total Views
192,706
Views on SlideShare
151,932
Embed Views
40,774

Actions

Likes
719
Downloads
6,597
Comments
34

177 Embeds 40,774

http://graphism.fr 6147
http://www.r-u-experienced.net 5516
http://www.techgig.com 4081
http://blog.cleartrip.com 3593
http://owni.fr 3498
http://wolfslittlestore.be 2879
http://nooshu.com 1671
http://softwareas.com 1628
http://paper.li 939
http://www.praka.sh 836
http://wabisabistartup.com 519
http://jelmerdejong.com 509
http://wls.dev 466
http://wwp.dev 457
http://zorros.be 442
http://seenthis.net 438
http://a0.twimg.com 392
http://passionbean.posterous.com 375
http://sandipagrawal.com 352
http://localhost 346
http://findsignal.com 333
http://blog.passionbean.com 298
http://creativeskills.be 287
http://www.raketablog.ru 260
http://www.scoop.it 259
http://www.conseilsmarketing.com 248
http://hunch.com 233
http://blog.estuans-interius.com 190
http://dev.bundlr.com 178
http://www.nooshu.local 177
http://us-w1.rockmelt.com 167
http://putrofedon.collected.info 165
http://blog.rodolphoarruda.pro.br 163
http://intern.zumkuckuck.com 159
http://almanac.raleighgresham.com 153
http://krzychukula.blogspot.com 119
http://feeds.feedburner.com 101
http://i-breed.typepad.com 100
http://rismandukhan.wordpress.com 99
http://bundlr.com 94
http://www.redditmedia.com 91
http://alouds.ru 84
http://teamblog.freshfinder.ca 77
https://twitter.com 76
http://blog.maheshj.com 65
http://alouds.dev 62
http://10.150.200.57 58
http://octopress.dev 55
http://mkfmn.com 54
http://mfo.yoursmartersite.com.au 53
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 34 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Descriptive and informative presentation.

    Very helpful for the beginner as well as for developer who would like to design. Highly recommend to all who want to start design. Also, you can visit to http://www.synapseindia.com

    you will find relevant result...
    Are you sure you want to
    Your message goes here
    Processing…
  • Web Design, Web Development and SEO Services Noida, Delhi/NCR (India)


    Web It Experts is a Noida, Delhi/NCR (India) based Web designing and website development company. We provide Services for SEO, Website promotion, Software development, Mobile applications, Web hosting services.

    Website redesign services, Software Development Company Noida, Delhi- NCR, India, SEO Company Noida, Delhi- NCR, India, Web Development Noida, Delhi- NCR, India, Website Maintenance Noida, Delhi- NCR, India, Cheap Website Design in India, USA, UK, CANADA, Australia Website solutions in Noida, Delhi- NCR, India

    Web It Experts is an India based e-commerce web design firm specialise in Web design, Web development, Web hosting, Zencart templates design.
    ----------------------------------------------------------------------------------------------
    We are creative website design, Web Development, SEO, Custom Web Designing, SEO services provider company based in NOIDA/Delhi-NCR, our best Rates in Web Designing and Web Development.

    Our Services:

    Web Designing

    Web Development

    Search Engine Optimization

    Web Hosting

    Website : www.webitexperts.com


    Email : sales@webitexperts.com
    ----------------------------------------------
    Are you sure you want to
    Your message goes here
    Processing…
  • very informative Johan. I have several designers on staff and the ones who come from a print background tend to look at things different from the younger photoshoppers, but we all learn from each other, it's great to have different styles in one place!
    Are you sure you want to
    Your message goes here
    Processing…
  • Nice one, I've created one for designer which describes few tools for website design. Here's the link http://www.slideshare.net/Qualityweb/latest-web-designing-tools-14698977
    Are you sure you want to
    Your message goes here
    Processing…
  • Great stuff Johan!!!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Design for developers Presentation Transcript

  • 1. Design for developers 1
  • 2. I would like to give some context to thispresentation. These slides are from a 2 hourpresentation called Design for Developers. 2
  • 3. The goal of Design for Developers is to teachinterface design as a set of rules: there aresome good default values for a lot of designdecisions that you should remember, there is a“scientific” way of approaching things likealignment, even though many designers will tellyou it’s something you should “feel”. 3
  • 4. Some slides only contain a few words orimages so the slides don’t distract from whatis being said. Since you are probably viewingthis online, I reworked the entire presentationand added these sticky notes to add what Italked about when displaying the slide. Theylook like this. 4
  • 5. 1 Introduction & design theory -2 Practical tips and tricks -3 Practical tips and tricks, cont. -4 Q&A: throughout - 5
  • 6. Introduction 6
  • 7. My name is JohanWolf or @wolfr_ on the internet 7
  • 8. I run a little freelancedesign studioWolf’s Little Store 8
  • 9. I read stuff all day 9
  • 10. I like to play video games 10
  • 11. I love to write 11
  • 12. 12
  • 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.13
  • 14. The kind of design I do is interface design... 14
  • 15. It’s not about the “WOW!” 15
  • 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.16
  • 17. It’s about creating a great product 17
  • 18. It’s about creating a great product 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. 18
  • 19. Avoiding this... 19
  • 20. You’ve got the power 20
  • 21. You’ve got the power 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. 21
  • 22. Theory Let’s start with some theory on what makes a good interface. 22
  • 23. What is a good interface? 23
  • 24. It depends. 24
  • 25. Examples of desirable qualities Fast Easy to use Fun Accessible When thinking about interfaces, and what you’re going to make, you make a list of desirable qualities we want our interface to have. 25
  • 26. Fast Fast (app performance) Fast (time to task completion) Maybe we want our interface to be fast — in terms of performance — or we want it to be fast in terms of task completion. 26
  • 27. Easy to use ProductivityIf we make our application easy to use, thatmight just hurt productivity (e.g. no advancedmode, lack of shortcuts, wizards foreverything). 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
  • 28. Considerations Build accessible apps because it’s 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
  • 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.29
  • 30. Not easy to use/learn InaccessibleFast (performance) Fast task completion 30
  • 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.Not easy to use/learn InaccessibleFast (performance) Fast task completion 31
  • 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.Example: POS system 32
  • 33. Would you want this...Fun Easy to use Fast? 33
  • 34. ...this... 34
  • 35. Or this? 35
  • 36. The opposition between making anapplication easy to use vs. making it so youcan complete your task quickly becomesclear here... since the employees in ourimaginary shop all get trained do we reallywant to use the slick “Easy to use” systemwhen maybe we want the system thatenables us to do our task as fast aspossible? 36
  • 37. There’s a Belgian supermarket, Colruyt, thattests everything, optimizes everything, and Ithink they thought long and hard about theirregister/cashier system too. It’s not verymodern, but employees know how to workthe system in an efficient manner becausethey are trained to do so and the softwareenables them to be fast. 37
  • 38. Would you rather bit F5 + F8 to serve acustomer or go through a wizard with next/previous options? 38
  • 39. Business... The appropriate interface helps with the business side of things of course. Wikipedia says Colruyt has a cool €475 million profit in book year 2009-2010. 39
  • 40. (I hate shopping there) 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. 40
  • 41. Why did I put this theory part in the presentation? I want everyone to thinkabout what they’re building and for who they’re building it.Even though kids are growing up with computers these days, the currentgeneration 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. I’m veryfrustrated making this 150+ slides presentation in Keynote because there isno automation whatsoever. I can’t align things automatically, I have to copypaste this note thing from slide to slide manually. 41
  • 42. Some assumptions 42
  • 43. 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. You’re 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
  • 45. Web developer,Windows software developer,Java, Ruby or iOS fanatic: Good interface = same principles 45
  • 46. Web developers have a bit of an edge: CSS 46
  • 47. Web developers have a bit of an edge: CSS Shareable design 47
  • 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. 48
  • 49. TextI feel at home here, I know what to do, I have the shortcuts in my fingers, Iknow what all the tools and palettes do. 49
  • 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 ofknowledge and applying this knowledge. As a web developer you have anextra edge in a sense that you can apply design frameworks easily thanks tothe power of HTML (structure) and CSS (presentation) whereas sharing thedesign of one Java app with another is not convenient, if even possible. 50
  • 51. Practical tips & tricks Now... on to the real meat of the presentation. The practical tips and tricks. What you’ve been waiting for I guess! 51
  • 52. 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
  • 53. Typography 53
  • 54. 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:
  • 55. Verdana The quick brown fox jumps over the lazy dogLucida Grande The quick brown fox jumps(Fallback: Lucida Sans Unicode) over the lazy dog 55
  • 56. 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.Droid Sans The quick brown fox jumps over the lazy dogSegoe UI 56
  • 57. Why these fonts?Specifically designed for UI: compareVerdana to Times: which will be morelegible 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
  • 58. 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
  • 59. 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 officia 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 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 Sans is a great typefaceImpact 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 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duisfor a book, could be perfect aute irure 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
  • 60. Impact ... probably good if you want to make an IMPACT. 60
  • 61. Why some fonts are better for interfaces than othersVerdana 1iILGill Sans 1iIL Here’s 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
  • 62. zero versus “o”: difference can be criticalA crossed zero can make the difference between a font that works for financial applications and one thatdoesn’t. Maybe you want to display a serial number that has both O and 0 (zero) in it. This i from a blog postabout Axel by my favorite typographer, Erik Spiekermann. http://www.fontshop.be/details.php?entry=386 . It’sa very economical typeface perfect for spreadsheets. 62
  • 63. Font sizes 63
  • 64. Relative readabilityThis is a pretty well known picture among designers, it displays the relative readability between a book and ablog 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
  • 65. 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
  • 66. 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. What is wrong with this picture? 67
  • 68. Reading length• Theres a reason newspapers are set in columns, that books are not wider than they are... practical printing reasons, but also a scientific reason: its 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. Why is my type so boring? 69
  • 70. 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
  • 71. All efforts to optimize for performance on my own Wolf’s LittleStore website were kind of cancelled out by using 2 fonts from anexternal web provider. If you care about performance at all, don’tuse @font-face. 71
  • 72. Line height makes all the difference:1.5 line height 72 1.0 line height
  • 73. 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
  • 74. Alignment 74
  • 75. How to align things?! 75
  • 76. How to align things?!Much has been written about the dark artof aligning things: there’s whole booksabout aligning and grid systems, mostlydealing with paper sizes and proportions.I want to show you 3 things that mightmake you better at aligning withouthaving to overthink it. 76
  • 77. 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
  • 78. Law of proximity 78
  • 79. The law of proximityThe law of proximity – Spatial ortemporal proximity of elements mayinduce the mind to perceive acollective or totality.Wikipedia 79
  • 80. The law of proximity 80
  • 81. The law of proximityAs you can see, the left circles form agroup, on the right side there’s 3 groups,all of this is done by spacing betweenelements only. Why is this so importantand what does it have to do with UIdesign? 81
  • 82. The law of proximity 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 find out who wrote which comment. 82
  • 83. The law of proximity 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
  • 84. I keep returning to the number 6 84
  • 85. Base font size: Base line height (x1.5)2x6 12 = 18px 3x6 Reading font size: Base line height (x1.5) 16 = 24px 4x6 85
  • 86. 6px as our “unit”Major elements spacing 6 unitsRegular spacing 4 unitsMinor spacing 2 units 86
  • 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, ... 87
  • 88. 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
  • 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.89
  • 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.90
  • 91. I add some elements to the interface...91
  • 92. ...a header area, a content area...92
  • 93. The height of content area if flexible, for the header I used a multiple of 6 again.93
  • 94. For the spacing between the areas I used a multiple of 6 again. It’s easy, just keep returning to the number 6.94
  • 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.95
  • 96. I set the font to 16px since this is my default for reading, then add spacing between the paragraphs.96
  • 97. I add a heading which has a font size of 24px, once again tying into the number 697
  • 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.98
  • 99. I move the text to the middle since I want to add a navigation etc. to the website.99
  • 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).100
  • 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.101
  • 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.102
  • 103. I use this strategy all the time, look at my site, all the spacing is based on 6...103
  • 104. This might be a bit more clear.104
  • 105. Keep returning to the number 6 105
  • 106. Use space appropriately 106
  • 107. Use space appropriately This is the Netflix 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 film 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
  • 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 108
  • 109. Light & shadow 109
  • 110. Shadows and gradients rule #1: Use shadows andgradients as a tool, not as decoration 110
  • 111. Think of real life 111
  • 112. Take a second to look at this photo and look at the reflections, the knobs, the shadows being cast.112
  • 113. 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
  • 114. Shadows are never pure blackThe first box looks kinda like what you would see in a common “developerdesign”. Try to soften it a bit more by using a greyish tint (middle), I like tomake my shadows a bit blueish grey (third box). It’s kinda hard to see butall the little details together often make a design great instead of just good. 114
  • 115. Drop Shadows will ruin your design if youdont do it right. Things should be right upagainst their surface which means using a1-3px Drop Shadow size. And 0-3pxdistance. This isnt WordArt.Mike Rundle, flyosity.com 115
  • 116. Window shadowThe window shadow on Mac OSX is a bit overdone but it does make agood example that you should think of objects on top (windows, modals)to be physically on top and thus cast a shadow. This helps with themetaphor and helps people understand what they’re seeing. 116
  • 117. Recipe for a good button! Light to dark gradientTry to think of light ascoming from a certaindirection. The most naturaldirection is from the top (e.g.the sun). Thus, a lightcoming in from the topwould make the top part of abutton lighter, and thebottom part darker. This iswhy your gradient runs fromlight to dark, not justbecause you thought it looksnice. Clear verb Clear lines 117
  • 118. Recipe for a good button! Distinctive active stateIt’s not realistic to changethe color of a button whenyou press it but it does helpto reinforce which buttonwas clicked.In real life the button wouldprobably lower a bit thuscreating an inner shadow. Inner shadows work for “pressed” look 118
  • 119. Don’t just flip the gradient direction! Just flipping the gradient direction is the equivalent of the environment light Light changing direction when youdirection hover over/click a button, this makes zero sense. It’s also way too subtle. Lightdirection 119
  • 120. Most interfaces: think of light coming in from a 120° angleText inputs have shadows Modal boxes cast a 120° drop on the top and left shadow (more shadow on bottom and right), be subtle 120
  • 121. Practical tips & tricks (2) 121
  • 122. 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
  • 123. Color 123
  • 124. Ways to pick colors 124
  • 125. 125
  • 126. Hues app for Mac is pretty cool, and it’s only €2126
  • 127. Hues is a good replacement for the standard digital color meter.127
  • 128. Easy coloring: 3 values 128
  • 129. I only ever use 3 colors to start with, to establish some hierarchy.129
  • 130. Blending 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. 130
  • 131. 131
  • 132. 132
  • 133. 133
  • 134. 134
  • 135. 135
  • 136. 136
  • 137. 137
  • 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.138
  • 139. Campaign Monitor does a good job at blending colors.139
  • 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.140
  • 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.141
  • 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)142
  • 143. I’m not the only designer just resorting to B&W, here’s http://www.subtraction.com/ by internet famous Khoi Vinh.143
  • 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)144
  • 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.145
  • 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 146
  • 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.;147
  • 148. 148
  • 149. 149
  • 150. 150
  • 151. 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 there’suse at least #D5D5D5 (grey) 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. What they see What you think they see 151
  • 152. Icons 152
  • 153. Icons 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.• Invest in a good icon set• Pixel icons are ideal for web applications• FamFamFam will only get you so far 153
  • 154. FamFamFam (www.famfamfam.com) is a free set, often used, I’m kind of tired of seeing it all over the place.154
  • 155. Even multi million dollar companies get away with still using FamFamFam.(I think they should hire an icon designer and redotheir visual design a bit... the product is greatthough and that’s what matters in the end.) 155
  • 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. 156
  • 157. Picons is pretty good: http://picons.me/157
  • 158. I like Pictos too, http://pictos.drewwilson.com/158
  • 159. Something relatively new: @font-face icon fonts. Try Fico, by Belgian designer Lennar Schoors. http://fico.lensco.be/159
  • 160. Icon rule #1: Only use an iconwhen its well known,otherwise use text, or text + icon 160
  • 161. Example 1 What does this mean? It’s pretty clear... we know this from traffic, we know the exclamation mark, it means “warning”. 161
  • 162. 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
  • 163. Text + icon when in doubt When in doubt, use text + icon, like here. The top two icons (refresh and add) are pretty clear and don’t need a label 163
  • 164. Reusable design 164
  • 165. 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
  • 166. Bootstrap from Twitter is possibly the best looking design framework I’ve seen: http:// twitter.github.com/bootstrap/166
  • 167. A lot of the knowledge mentioned in thispresentation is applied perfectly in Bootstrap. Hooray for http://www.markdotto.com/ ! 167
  • 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!168
  • 169. jQuery Mobile recently released 1.0, if you’redoing something that’s mobile only, this might bea good framework candidate. I played around with the beta and they do a lot of things right by default. 169
  • 170. There’s frameworks out there for responsive design too, http://goldengridsystem.com/170
  • 171. Avoid frameworks that look dated. Not every framework is good.171
  • 172. Extras 172
  • 173. Don’t remove outlines! http://webexpedition18.com/articles/useful-css-snippets/ 173
  • 174. Be consistent 174
  • 175. Don’t put everything on the same screen 175
  • 176. Text is interface/Tone can make all the difference 176
  • 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 learnedsomething new that you can apply to your work to make it better.There’s certain parts of designing that we can make intoguidelines and rules of thumb. Applying these rules will makeyour design better and in many cases good enough.Nothing beats a dedicated designer though! 177
  • 178. If you want to become a smarter person read every single bookand article mentioned on the following slide. 178
  • 179. Web resourceshttp://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/Books Designing the obvious by Robert Designing the obvious by RobertDefensive Design for the Web: How Hoekman Jr. Hoekman Jr.to improve error messages, help,forms, and other crisis points by Designing for interaction by DanJason Fried & Matthew Linderman The Elements of Typographic Style Saffer by Robert BringhurstDesigning Web Usability by JakobNielsen Getting Real by 37signals http:// gettingreal.37signals.com/ Detail in Typography by Jost HochuliDon’t make me think! by Steve Krug 179
  • 180. Hire me.If you like what you’re seeing, I can apply myknowledge to your application too, or give thispresentation for your company. Get in touch:mail@wolfslittlestore.be 180
  • 181. Follow me on Twitter Here’s the link: http://twitter.com/wolfr_ 181
  • 182. Subscribe to the blog: Here’s the link: http://wolfslittlestore.be/journal/ RSS: http://feeds.feedburner.com/Wolfslittlestore 182
  • 183. Thank you for your attention! 183