1. Design for Distinction! Presented by Stephen P. Anderson

2. 2 2 problems I see in web design…  Designers settling for “good enough”  few sites look great!  A lot of sites that look familiar…  sites not differentiated enough

3. 3 Why is this?  Designers designing like developers (“Will this be easy to build and maintain?”)  A need to get comps done quickly  Not knowing what to do next…  (purpose of today’s meeting)

4. 4 95%5% 8 hours…Also 8 hours! Average time I spend on one comp… What goes on here? Percent completed…

5. 5  Details that enhance information design  Details that create distinction (“signatures”)  Details that make the page more vibrant!

6. 6 “Signatures”

7. 7 Brand ID examples:  Tiffany’sBlue Box  AOL  T-Mobile  Coca-Cola  Apple “You’ve Got ____.”, heavy black outline illustration style Black/Pink Colored Repeating Squares Red/White colors, wave clean style, fonts, object photos

8. 8 Signatures can be (and often are) the singling out a specific attribute of a company’s logo

9. 9

10. 10 Signatures can be (and often are) the singling out a specific attribute of a company’s logo

11. 11 Signatures can be (and often are) the singling out a specific attribute of a company’s logo

12. 12 Signatures can be:  a collection of elements that (while not all that unique on their own) in combination create a distinctive style…  1 or 2 really distinctive elements K10k.net pixel people HP’s ‘+’ campaign +

13. 13 Be Intentional About… Fonts Colors Shapes Patterns/Textures Image treatment Balance Contrast Playing of negative space Creating “layers” Sounds Other Expressions Copy  same things we list when we talk about creating a unique brand identity

14. 14 Fonts g g g g g g G g g

15. 15 COLORS  GAME: http://www.onceuponadime.com/gold/12pixelher oes.swf http://www.onceuponadime.com/gold/12pixelher oes.swf

16. 16 Shapes  What’s the one shape we see everywhere on the web?  http://www.barronmarketing.com/f un.html http://www.barronmarketing.com/f un.html

17. 17 Texture

18. 18 Images  Cropping  Stylizing  Cutting out photos (objects)  Adding texture http://www.metacritic.com/http://www.metacritic.com/  Masking portions of an image (Aquent), www.aquent.com; www.aquent.com  Playing off negative space: http://www.denbighshiresupportingbusiness.co.u k/General/xhtml/default.asp?PageName=1 http://www.denbighshiresupportingbusiness.co.u k/General/xhtml/default.asp?PageName=1  ???

19. 19 The Little Details…  Font sizing, line spacing  Arrows/Icon before links  Lines /  Etc..  To increase usability (http://37signals.com/better_fedex.php)http://37signals.com/better_fedex.php

20. 20 Styles  www.opera.com www.opera.com  http://developer.apple.com/documentation/User Experience/Conceptual/OSXHIGuidelines/index. html http://developer.apple.com/documentation/User Experience/Conceptual/OSXHIGuidelines/index. html  http://lab404.com/dan/left.htmlhttp://lab404.com/dan/left.html

21. 21 Where do you get inspiration for “signatures?”  A great concept is most fundamental way to create a distinctive site  Magazine Design  Design books  Screen captures of good sites (for later reference)  Everywhere but design! (develop an awareness)

22. 22 From Good to Great  (I hope!)

23. 23 Considerations…  Be consistent – think ingredients!  If it takes extra effort to implement, it’ll probably be more distinctive  “Do we really need all those images?”  Know when to be different/when to be conventional/familiar/intuitive ( door example)  K.I.S.S. =clarity and simplicity should always be the focus  Don’t confuse “style” with being stuck in a rut