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 sari.g.levine@lowes.com

JOSH LEVINE jl@alexanderinteractive.com 212-598-2800 x202