Color, themes, fonts: The building blocks of good e-commerce and ui design
98
MEET THE LEVINES Color, themes, fonts: The building blocks of good design Internet Retailer Web Design Conference February 14, 2011 Orlando, Florida
-
Upload
josh-levine -
Category
Design
-
view
111 -
download
1
description
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.
Transcript of Color, themes, fonts: The building blocks of good e-commerce and ui design
MEET THE LEVINESColor, themes, fonts: The building blocks of good design
Internet Retailer Web Design ConferenceFebruary 14, 2011 Orlando, Florida
HI THERE
I’M MR. LEVINE
Founded 2002, independent
Manhattan office
40 hands-on employees
Collaborative, client-focused approach
E-COMMERCE STRATEGY, DESIGN & DEVELOPMENT
SELECT CLIENTS
HI THERE
I’M MRS. LEVINELowe’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.
HI THERE
A BIT ABOUT MEJoined 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
ELEMENTS OF DESIGN
As much as 95% of our decisions are made by the subconscious mind.
“”
— Dr. A.K. PRADEEP
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
“
”
LEARN TOOLS& HOW TO HARNESS
COLORTYPELAYOUTPHOTOGRAPHY
COLORAttracts attentionConveys meaningElicits emotion
COLOR
COMBINATIONSThe Color Wheel
COLOR
COMBINATIONSWarm
COLOR
COMBINATIONSCool
COLOR
COMBINATIONSANALOGOUSHarmonious, natural, pleasing to the eye
MONOCHROMATICSoothing, authoritative yet less vibrant
COMPLEMENTARYHigh contrast, energetic, vibrant
COLOR
COMBINATIONS
COLOR
SYMBOLISMBLACKauthority, power, strength
WHITEpurity, cleanlinessvirtue
GREENnature, abundance, new beginnings,
PURPLEmajestic, expensive
BLUEresponsible, calm,sadness
REDexciting, dramatic, aggressive
COLOR
SYMBOLISM
COLOR
SYMBOLISM
show visualsexamples (obama, birght orange, red)
COLOR
CONTRAST
COLOR
SATURATION
add simple box style layout - all in grey except for saurated chunk of red, representing how saturation is import for call-t-actions
COLOR
SATURATION
TYPOGRAPHYConveys meaningAffects legibilityEmbodies personality
TYPOGRAPHY
FONT CHOICE
TYPOGRAPHY
FONT CHOICE
Text
SANS SERIF
SERIF
OverviewThis 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
The Book of Typography No Noʼs
buy now$3.00 PLUS FREE SHIPPING
What people are saying
I LIKE THIS BOOK A BUNCH. I READ IT 5 TIMES. JACK IS PRODUCT UPON .
THIS IS A TESTIMONIAL ON BEHALF OF THIS WONDERFUL THIS WAS
ORLANDO IN FEBRUARY IS QUITE NICE. THIS BOOK ISQUITE
“ “ “
OverviewThis 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:
BUY NOW
View more
The Book of Typography No Noʼs
What people are saying
$3.00 Plus Free Shipping
I like this book a bunch. I read it 5 times. Jack is product upon .
This is a testimonial on behalf of this wonderful this was
Orlando in February is quite nice. This book isquite
“ “ “
• 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
LAYOUTControl eye flowReduce clutter
Seems to be a lot of wasted space.“ ”We have all of this empty space to add more promos & products.“
”Can you make my logo bigger?“ ”
EMBRACE WHITESPACE& KILL CLUTTER
LAYOUT
SIMILARITY
LAYOUT
PROXIMITY
LAYOUT
PROXIMITY There are several primary forms of contrast that designers typically use, including the following:
The primary forms of contrast include size, position, color, texture, shape, and orientation.
In a layout, contrast helps lead the reader’s eye into and through your layout. Each component of the page—graphic, textual, or interactive—has a job to do, and each of those jobs falls within a hierarchy that’s specific to the project at hand. Furthermore, each component is but a piece of the overall project message and objective. With creative uses of contrast, you can influence user choices and compel specific actions.
Page elements must not, of course, be designed or organized haphazardly. Content must be intelligently composed, and composition is defined by the information hierarchy—which is defined with, you guessed it: contrast.
PHOTOGRAPHYTells a story Says a thousand words...
PHOTOGRAPHY
PERSPECTIVE
PHOTOGRAPHY
HUMAN
PHOTOGRAPHY
HUMAN
PHOTOGRAPHY
HUMAN
Photos from Usableworld Study
EVERYTHING COMING TOGETHER
JOIN ME ON A DESIGN JOURNEY
19961996 1999 2000 2004 2006 2009 2010
THROUGH THE YEARS
19961996 1999 2000 2004 2006 2009 2010
THROUGH THE YEARS
19961996 1999 2000 2004 2006 2009 2010
THROUGH THE YEARS
19961996 1999 2000 2004 2006 2009 2010
THROUGH THE YEARS
19961996 1999 2000 2004 2006 2009 2010
THROUGH THE YEARS
19961996 1999 2000 2004 2006 2009 2010
THROUGH THE YEARS
19961996 1999 2000 2004 2006 2009 2010
THROUGH THE YEARS
NAVIGATIONHOMEPAGEWAYFINDINGPRODUCTTRANSACTIONMOBILE
HOW &WHERE TOAPPLY IT
NAVIGATIONOffer clear pathsProvide orientationSet expectations
If information architecture does its job well, users have clear paths to the content they seek
Get Where am i? where can i go? where have I been?
OLD
NEW
SATURATION
SIMILARITY
CONTRAST
FONT CHOICE
CONSISTENCY
vv
vv
HOMEPAGEEntry doorInvite explorationWindow shopping
JOSH
PERSPECTIVE
FONT CHOICE, SIZE, COLOR
SATURATION
CONSISTENCY
WHITESPACE COLOR PALETTE
WAYFINDINGCreate momentumOrient within a spaceEasily navigate
PERSPECTIVE
WHITESPACE
FONT CHOICE
FONT STYLE, COLOR
WHITESPACE
DEPTH
COLOR
MONOCHROMATIC
FONT CHOICE
CONSISTENCY
COLOR — CALLS YOUR ATTENTION
COLOR SURPLUS — BRAIN TUNES IT OUT
PRODUCTUnderstand at a glanceProgressive disclosureAnticipate user’s needs
JOSH — SYS ADMIN GUY
HOMEPAGE
Examples
TRANSACTIONTypography is kingClose the dealNo room for error
SATURATION
CONSISTENCY
FONT STYLE, SIZE, COLOR
SATURATION
DEPTH
SIMILARITY
CONTRAST
MOBILE
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
THANK YOUDon’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 [email protected]
JOSH LEVINE [email protected] 212-598-2800 x202
