1 / 23

Design for Distinction!

Design for Distinction!. Presented by Stephen P. Anderson. 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. Why is this?. Designers designing like developers

shel
Download Presentation

Design for Distinction!

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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. 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. Average time I spend on one comp… 95% 5% Percent completed… 8 hours… Also 8 hours! What goes on here?

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

  6. “Signatures”

  7. “Signatures” Brand ID examples: • Tiffany’s Blue 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. Signatures can be (and often are) the singling out a specific attribute of a company’s logo

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

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

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

  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. 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. Fonts g g g g g G g g g

  15. COLORS • GAME: http://www.onceuponadime.com/gold/12pixelheroes.swf

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

  17. Texture

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

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

  20. Styles • www.opera.com • http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/index.html • http://lab404.com/dan/left.html

  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. From Good to Great • (I hope!)

  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

More Related