design for distinction! presented by stephen p. anderson
TRANSCRIPT
2
2 problems I see in web design…
1. Designers settling for “good enough”
few sites look great!
2. 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
95% 5%
8 hours… Also 8 hours!
Average time I spend on one comp…
What goes on here?
Percent completed…
5
Details that enhance information design
Details that create distinction (“signatures”)
Details that make the page more vibrant!
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
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…
FontsColorsShapesPatterns/TexturesImage treatmentBalanceContrast
Playing of negative spaceCreating “layers”SoundsOther ExpressionsCopy
same things we list when we talk about creating a unique brand identity
16
Shapes What’s the one shape we see
everywhere on the web? http://
www.barronmarketing.com/fun.html
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)
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