Design for Distinction!Presented by Stephen P. Anderson

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!

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…

FontsColorsShapesPatterns/TexturesImage treatmentBalanceContrast

Playing of negative spaceCreating “layers”SoundsOther ExpressionsCopy

same things we list when we talk about creating a unique brand identity

14

Fonts

g g g

g

gg

G

gg

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