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 (and often are) the singling out a specific attribute of a company’s logo

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

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

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

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

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