중간점검
Your SlideShare is downloading.
×
Check these out next
More Related Content
Viewers also liked (20)
Similar to Color, themes, fonts: The building blocks of good e-commerce and ui design (16)
More from Josh Levine (12)
Recently uploaded (20)
Color, themes, fonts: The building blocks of good e-commerce and ui design
- MEET THE LEVINES Color, themes, fonts: The building blocks of good design Internet Retailer Web Design Conference February 14, 2011 Orlando, Florida
- 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
- 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.
- 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
- 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 COLOR TYPE & HOW TO LAYOUT HARNESS PHOTOGRAPHY
- COLOR Attracts attention Conveys meaning Elicits emotion
- COLOR COMBINATIONS The Color Wheel
- COLOR COMBINATIONS Warm
- COLOR COMBINATIONS Cool
- COLOR COMBINATIONS ANALOGOUS Harmonious, natural, pleasing to the eye MONOCHROMATIC Soothing, authoritative yet less vibrant COMPLEMENTARY High contrast, energetic, vibrant
- COLOR COMBINATIONS
- 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,
- COLOR SYMBOLISM
- COLOR SYMBOLISM show visuals examples (obama, birght orange, red)
- COLOR CONTRAST
- COLOR SATURATION
- COLOR SATURATION add red
- TYPOGRAPHY Conveys meaning Affects legibility Embodies personality
- TYPOGRAPHY FONT CHOICE
- TYPOGRAPHY SANS SERIF FONT CHOICE Text SERIF
- 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 .
- 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
- LAYOUT Control eye flow Reduce clutter
- “ 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? ”
- EMBRACE WHITESPACE & KILL CLUTTER
- LAYOUT SIMILARITY
- LAYOUT PROXIMITY
- LAYOUT PROXIMITY
- PHOTOGRAPHY Tells 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
- THROUGH THE YEARS 1996 1996 1999 2000 2004 2006 2009 2010
- THROUGH THE YEARS 1996 1996 1999 2000 2004 2006 2009 2010
- THROUGH THE YEARS 1996 1996 1999 2000 2004 2006 2009 2010
- THROUGH THE YEARS 1996 1996 1999 2000 2004 2006 2009 2010
- THROUGH THE YEARS 1996 1996 1999 2000 2004 2006 2009 2010
- THROUGH THE YEARS 1996 1996 1999 2000 2004 2006 2009 2010
- THROUGH THE YEARS 1996 1996 1999 2000 2004 2006 2009 2010
- NAVIGATION HOW & HOMEPAGE WHERE TO WAYFINDING APPLY IT PRODUCT TRANSACTION MOBILE
- NAVIGATION Offer clear paths Provide orientation Set expectations
- NEW OLD
- FONT CHOICE SIMILARITY CONSISTENCY SATURATION CONTRAST
- vv
- vv
- HOMEPAGE Entry door Invite exploration Window shopping
- JOSH CONSISTENCY FONT CHOICE, SIZE, COLOR SATURATION PERSPECTIVE WHITESPACE COLOR PALETTE
- WAYFINDING Create momentum Orient within a space Easily navigate
- WHITESPACE PERSPECTIVE FONT CHOICE
- FONT CHOICE DEPTH MONOCHROMATIC CONSISTENCY WHITESPACE FONT STYLE, COLOR COLOR
- COLOR — CALLS YOUR ATTENTION
- COLOR SURPLUS — BRAIN TUNES IT OUT
- PRODUCT Understand at a glance Progressive disclosure Anticipate user’s needs
- JOSH — SYS ADMIN GUY
- HOMEPAGE Examples
- TRANSACTION Typography is king Close the deal No room for error
- CONSISTENCY SATURATION FONT STYLE, SIZE, COLOR
- DEPTH CONTRAST SIMILARITY SATURATION
- 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 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
