Visual design on e-commerce sites is sometimes viewed as a purely aesthetic matter, but it has another important job. Used effectively, such design elements as color and type font can help visitors navigate a page and call out a product’s best features. Used poorly, they can distract visitors and detract from sales. Josh Levine and Seth Newman discuss the redesign of Action Envelope's successful ecommerce website by web agency Alexander Interactive. Presented at the 2009 Internet Retailer Web Design Conference and Expo. ---- Description from Internet Retailer Conference: "Colors, themes, fonts: The building blocks of good design" — Josh Levine, Founder and Chief Experience Officer, Ai (Alexander Interactive) — Sari Levine, Creative & User Experience Director, E-Commerce, Lowe's Cos. Inc. Design elements that you choose to engage your customers work on consumers at a subconscious level—colors, themes, fonts, use of white space—but they are crucial to grabbing and holding shoppers' attention. This session will offer extremely practical advice and analysis of the building blocks of good design—what messages do different fonts communicate? When should you have white space and when not? What colors trigger certain reactions in consumers? How do you develop a design theme for a web site and how do you carry it out throughout the entire site without its becoming intrusive? This session will feature a design expert and a retailer who will discuss each of these important building blocks in detail and demonstrate how they were applied to a site design.

1. MEET THE
LEVINES
Color, themes, fonts:
The building blocks
of good design
Internet Retailer Web Design Conference
February 14, 2011
Orlando, Florida

2. HI THERE
I’M MR. LEVINE
E-COMMERCE STRATEGY, DESIGN & DEVELOPMENT
Founded 2002, independent 40 hands-on employees
Manhattan office Collaborative, client-focused approach
SELECT CLIENTS

3. HI THERE
I’M MRS. LEVINE
Lowe’s, Creative UX Director.
Attended School of Visual Arts in NY & Washington University
in St. Louis
With 2009 sales of $47.2 billion, Lowe's Companies, Inc. is a
FORTUNE® 50 company that serves approximately 15 million
customers a week at more than 1,725 stores in the US,
Canada & Mexico.

4. HI THERE
A BIT ABOUT ME
Joined lowes.com in March 2009
Hired to elevate the customer’s online &
multichannel experience, look and feel
and brand voice.
Partnered with Ai in January 2010

6. ELEMENTS
OF DESIGN

7. “ As much as 95% of our
decisions are made by the
subconscious mind.
— Dr. A.K. PRADEEP
”

10. ACCOMPLISH MAGIC
“ Strong visual design produces
miracles. It's amazing how much
information a good visual designer
can put on a page and it still feels
uncluttered.
— JARED SPOOL
”

11. LEARN TOOLS COLOR
TYPE
& HOW TO LAYOUT
HARNESS PHOTOGRAPHY

12. COLOR
Attracts attention
Conveys meaning
Elicits emotion

13. COLOR
COMBINATIONS
The Color Wheel

14. COLOR
COMBINATIONS
Warm

15. COLOR
COMBINATIONS
Cool

16. COLOR
COMBINATIONS
ANALOGOUS
Harmonious, natural, pleasing
to the eye
MONOCHROMATIC
Soothing, authoritative yet
less vibrant
COMPLEMENTARY
High contrast, energetic,
vibrant

17. COLOR
COMBINATIONS

18. COLOR
SYMBOLISM
BLACK RED
authority, power, exciting, dramatic,
strength aggressive
WHITE BLUE
purity, cleanliness responsible, calm,
virtue sadness
GREEN PURPLE
nature, abundance, majestic, expensive
new beginnings,

19. COLOR
SYMBOLISM

20. COLOR
SYMBOLISM
show visuals
examples (obama, birght orange, red)

22. COLOR
CONTRAST

23. COLOR
SATURATION

24. COLOR
SATURATION
add
red

25. TYPOGRAPHY
Conveys meaning
Affects legibility
Embodies personality

26. TYPOGRAPHY
FONT CHOICE

27. TYPOGRAPHY
SANS SERIF
FONT CHOICE
Text
SERIF

32. The Book of Typography No Noʼs
Overview
This is a book that lays down the law lorem ipsum with the rules and guidelines with regard to all
things typography. This is filler copy. Go on and enjoy the book. Go on now. Chop chop.
SOME NO NOʼS
• content lines are too long (length)
• Too many font sizes, styles
and colors
• Linespacing is too tight
•Text blocks are not aligned
•Using ALL CAPS for content copy
VIEW MORE
PLUS FREE buy now
$3.00
SHIPPING
What people are saying
“ I LIKE THIS BOOK A BUNCH. I “ THIS IS A TESTIMONIAL ON “ ORLANDO IN FEBRUARY IS
READ IT 5 TIMES. JACK IS BEHALF OF THIS QUITE NICE. THIS BOOK IS
PRODUCT UPON .

33. The Book of Typography No Noʼs
Overview
This is a book that lays down the law lorem ipsum with the rules
and guidelines with regard to all things typography. Go on and
enjoy the book. Go on now. Chop chop.
No noʼs include:
• Content lines are too long (length)
• Too many fonts, styles and colors
• Line spacing is too tight
• Text boxes not being aligned
• Using ʻALL CAPSʼ for content copy
View more
$3.00 Plus Free Shipping BUY NOW
What people are saying
“ I like this book a bunch. “ This is a testimonial on “ Orlando in February is
I read it 5 times. Jack is behalf of this wonderful quite nice. This book is

34. LAYOUT
Control eye flow
Reduce clutter

35. “ Seems to be a lot of wasted space.
”
“ add more promos & products.
We have all of this empty space to
”
“ Can you make my logo bigger?
”

36. EMBRACE WHITESPACE
& KILL CLUTTER

37. LAYOUT
SIMILARITY

38. LAYOUT
PROXIMITY

39. LAYOUT
PROXIMITY

40. PHOTOGRAPHY
Tells a story
Says a thousand words...

41. PHOTOGRAPHY
PERSPECTIVE

43. PHOTOGRAPHY
HUMAN

44. PHOTOGRAPHY
HUMAN

45. PHOTOGRAPHY
HUMAN
Photos from Usableworld Study

46. EVERYTHING COMING TOGETHER

47. JOIN ME ON
A DESIGN JOURNEY

48. THROUGH THE YEARS 1996
1996 1999 2000 2004 2006 2009 2010

49. THROUGH THE YEARS 1996
1996 1999 2000 2004 2006 2009 2010

50. THROUGH THE YEARS 1996
1996 1999 2000 2004 2006 2009 2010

51. THROUGH THE YEARS 1996
1996 1999 2000 2004 2006 2009 2010

52. THROUGH THE YEARS 1996
1996 1999 2000 2004 2006 2009 2010

53. THROUGH THE YEARS 1996
1996 1999 2000 2004 2006 2009 2010

54. THROUGH THE YEARS 1996
1996 1999 2000 2004 2006 2009 2010

55. NAVIGATION
HOW & HOMEPAGE
WHERE TO WAYFINDING
APPLY IT PRODUCT
TRANSACTION
MOBILE

56. NAVIGATION
Offer clear paths
Provide orientation
Set expectations

57. NEW
OLD

64. FONT CHOICE
SIMILARITY
CONSISTENCY
SATURATION
CONTRAST

65. vv

66. vv

67. HOMEPAGE
Entry door
Invite exploration
Window shopping

71. JOSH
CONSISTENCY
FONT CHOICE, SIZE, COLOR
SATURATION
PERSPECTIVE
WHITESPACE COLOR PALETTE

72. WAYFINDING
Create momentum
Orient within a space
Easily navigate

76. WHITESPACE
PERSPECTIVE
FONT CHOICE

78. FONT CHOICE
DEPTH MONOCHROMATIC
CONSISTENCY
WHITESPACE
FONT STYLE, COLOR
COLOR

79. COLOR — CALLS YOUR ATTENTION

80. COLOR SURPLUS — BRAIN TUNES IT OUT

84. PRODUCT
Understand at a glance
Progressive disclosure
Anticipate user’s needs

86. JOSH — SYS ADMIN GUY

90. HOMEPAGE
Examples

91. TRANSACTION
Typography is king
Close the deal
No room for error

93. CONSISTENCY
SATURATION
FONT STYLE, SIZE, COLOR

95. DEPTH
CONTRAST
SIMILARITY
SATURATION

96. MOBILE

97. SO WHAT DID WE LEARN?
Visual design goes beyond aesthetics
Design is having an effect on your customers whether you
are consciously in control of it or not
Harness design principles to control shopping experience
Embrace whitespace & kill the clutter
Good Ui design is invisible
Typography can make or break transaction design

98. THANK YOU
Don’t forget to buy your spouse a lawnmower
for Valentine’s Day…because let’s be honest
that’s the gift that keeps on giving. (Or just
buy them the Typographic Book of No No’s)
SARI LEVINE sari.g.levine@lowes.com
JOSH LEVINE jl@alexanderinteractive.com
212-598-2800 x202