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: 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…

13. 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

14. Fonts g g g g g G g g g

15. COLORS
GAME:

16. Shapes What’s the one shape we see everywhere on the web?

17. Texture

18. Images Cropping Stylizing Cutting out photos (objects)
Adding texture
Masking portions of an image (Aquent),
Playing off negative space:
???

19. The Little Details… Font sizing, line spacing Arrows/Icon before links
Lines / <hr>
Etc..
To increase usability (

20. Styles

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