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 (“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)

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

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

“Signatures”

“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

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

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 +

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

Fonts g g g g g G g g g

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

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

Texture

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

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

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

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)

From Good to Great • (I hope!)

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

Design for Distinction!