design for distinction!
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Design for Distinction!](https://reader036.vdocuments.site/reader036/viewer/2022062321/56813d19550346895da6da2f/html5/thumbnails/1.jpg)
Design for Distinction!Presented by Stephen P. Anderson
![Page 2: Design for Distinction!](https://reader036.vdocuments.site/reader036/viewer/2022062321/56813d19550346895da6da2f/html5/thumbnails/2.jpg)
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
![Page 3: Design for Distinction!](https://reader036.vdocuments.site/reader036/viewer/2022062321/56813d19550346895da6da2f/html5/thumbnails/3.jpg)
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)
![Page 4: Design for Distinction!](https://reader036.vdocuments.site/reader036/viewer/2022062321/56813d19550346895da6da2f/html5/thumbnails/4.jpg)
4
95% 5%
8 hours… Also 8 hours!
Average time I spend on one comp…
What goes on here?
Percent completed…
![Page 5: Design for Distinction!](https://reader036.vdocuments.site/reader036/viewer/2022062321/56813d19550346895da6da2f/html5/thumbnails/5.jpg)
5
Details that enhance information design
Details that create distinction (“signatures”)
Details that make the page more vibrant!
![Page 6: Design for Distinction!](https://reader036.vdocuments.site/reader036/viewer/2022062321/56813d19550346895da6da2f/html5/thumbnails/6.jpg)
6
“Signatures”
![Page 7: Design for Distinction!](https://reader036.vdocuments.site/reader036/viewer/2022062321/56813d19550346895da6da2f/html5/thumbnails/7.jpg)
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
![Page 8: Design for Distinction!](https://reader036.vdocuments.site/reader036/viewer/2022062321/56813d19550346895da6da2f/html5/thumbnails/8.jpg)
8
Signatures can be (and often are) the singling out a specific attribute of a company’s logo
![Page 9: Design for Distinction!](https://reader036.vdocuments.site/reader036/viewer/2022062321/56813d19550346895da6da2f/html5/thumbnails/9.jpg)
9
Signatures can be (and often are) the singling out a specific attribute of a company’s logo
![Page 10: Design for Distinction!](https://reader036.vdocuments.site/reader036/viewer/2022062321/56813d19550346895da6da2f/html5/thumbnails/10.jpg)
10
Signatures can be (and often are) the singling out a specific attribute of a company’s logo
![Page 11: Design for Distinction!](https://reader036.vdocuments.site/reader036/viewer/2022062321/56813d19550346895da6da2f/html5/thumbnails/11.jpg)
11
Signatures can be (and often are) the singling out a specific attribute of a company’s logo
![Page 12: Design for Distinction!](https://reader036.vdocuments.site/reader036/viewer/2022062321/56813d19550346895da6da2f/html5/thumbnails/12.jpg)
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
+
![Page 13: Design for Distinction!](https://reader036.vdocuments.site/reader036/viewer/2022062321/56813d19550346895da6da2f/html5/thumbnails/13.jpg)
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
![Page 14: Design for Distinction!](https://reader036.vdocuments.site/reader036/viewer/2022062321/56813d19550346895da6da2f/html5/thumbnails/14.jpg)
14
Fonts
g g g
g
gg
G
gg
![Page 15: Design for Distinction!](https://reader036.vdocuments.site/reader036/viewer/2022062321/56813d19550346895da6da2f/html5/thumbnails/15.jpg)
15
COLORS
GAME: http://www.onceuponadime.com/gold/12pixelheroes.swf
![Page 16: Design for Distinction!](https://reader036.vdocuments.site/reader036/viewer/2022062321/56813d19550346895da6da2f/html5/thumbnails/16.jpg)
16
Shapes What’s the one shape we see
everywhere on the web? http://
www.barronmarketing.com/fun.html
![Page 17: Design for Distinction!](https://reader036.vdocuments.site/reader036/viewer/2022062321/56813d19550346895da6da2f/html5/thumbnails/17.jpg)
17
Texture
![Page 18: Design for Distinction!](https://reader036.vdocuments.site/reader036/viewer/2022062321/56813d19550346895da6da2f/html5/thumbnails/18.jpg)
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
???
![Page 19: Design for Distinction!](https://reader036.vdocuments.site/reader036/viewer/2022062321/56813d19550346895da6da2f/html5/thumbnails/19.jpg)
19
The Little Details… Font sizing, line spacing Arrows/Icon before links Lines / <hr> Etc..
To increase usability (http://37signals.com/better_fedex.php)
![Page 20: Design for Distinction!](https://reader036.vdocuments.site/reader036/viewer/2022062321/56813d19550346895da6da2f/html5/thumbnails/20.jpg)
20
Styles www.opera.com http://developer.apple.com/
documentation/UserExperience/Conceptual/OSXHIGuidelines/index.html
http://lab404.com/dan/left.html
![Page 21: Design for Distinction!](https://reader036.vdocuments.site/reader036/viewer/2022062321/56813d19550346895da6da2f/html5/thumbnails/21.jpg)
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)
![Page 22: Design for Distinction!](https://reader036.vdocuments.site/reader036/viewer/2022062321/56813d19550346895da6da2f/html5/thumbnails/22.jpg)
22
From Good to Great (I hope!)
![Page 23: Design for Distinction!](https://reader036.vdocuments.site/reader036/viewer/2022062321/56813d19550346895da6da2f/html5/thumbnails/23.jpg)
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