Your SlideShare is downloading. ×
0
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Color, themes, fonts: The building blocks of good e-commerce and ui design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Color, themes, fonts: The building blocks of good e-commerce and ui design

7,345

Published on

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 …

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.

Published in: Design
3 Comments
10 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,345
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
196
Comments
3
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. MEET THELEVINESColor, themes, fonts:The building blocksof good designInternet Retailer Web Design ConferenceFebruary 14, 2011Orlando, Florida
  • 2. HI THEREI’M MR. LEVINEE-COMMERCE STRATEGY, DESIGN & DEVELOPMENTFounded 2002, independent 40 hands-on employeesManhattan office Collaborative, client-focused approachSELECT CLIENTS
  • 3. HI THEREI’M MRS. LEVINELowe’s, Creative UX Director.Attended School of Visual Arts in NY & Washington Universityin St. LouisWith 2009 sales of $47.2 billion, Lowes Companies, Inc. is aFORTUNE® 50 company that serves approximately 15 millioncustomers a week at more than 1,725 stores in the US,Canada & Mexico.
  • 4. HI THEREA BIT ABOUT MEJoined lowes.com in March 2009Hired to elevate the customer’s online &multichannel experience, look and feeland brand voice.Partnered with Ai in January 2010
  • 5. ELEMENTSOF DESIGN
  • 6. “ As much as 95% of our decisions are made by the subconscious mind. — Dr. A.K. PRADEEP ”
  • 7. ACCOMPLISH MAGIC“ Strong visual design produces miracles. Its amazing how much information a good visual designer can put on a page and it still feels uncluttered. — JARED SPOOL ”
  • 8. LEARN TOOLS COLOR TYPE& HOW TO LAYOUTHARNESS PHOTOGRAPHY
  • 9. COLORAttracts attentionConveys meaningElicits emotion
  • 10. COLORCOMBINATIONSThe Color Wheel
  • 11. COLORCOMBINATIONSWarm
  • 12. COLORCOMBINATIONSCool
  • 13. COLORCOMBINATIONSANALOGOUSHarmonious, natural, pleasingto the eyeMONOCHROMATICSoothing, authoritative yetless vibrantCOMPLEMENTARYHigh contrast, energetic,vibrant
  • 14. COLORCOMBINATIONS
  • 15. COLORSYMBOLISM BLACK RED authority, power, exciting, dramatic, strength aggressive WHITE BLUE purity, cleanliness responsible, calm, virtue sadness GREEN PURPLE nature, abundance, majestic, expensive new beginnings,
  • 16. COLORSYMBOLISM
  • 17. COLORSYMBOLISM show visuals examples (obama, birght orange, red)
  • 18. COLORCONTRAST
  • 19. COLORSATURATION
  • 20. COLORSATURATION add red
  • 21. TYPOGRAPHYConveys meaningAffects legibilityEmbodies personality
  • 22. TYPOGRAPHYFONT CHOICE
  • 23. TYPOGRAPHY SANS SERIFFONT CHOICE Text SERIF
  • 24. The Book of Typography No NoʼsOverviewThis is a book that lays down the law lorem ipsum with the rules and guidelines with regard to allthings 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 .
  • 25. 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
  • 26. LAYOUTControl eye flowReduce clutter
  • 27. “ 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? ”
  • 28. EMBRACE WHITESPACE& KILL CLUTTER
  • 29. LAYOUTSIMILARITY
  • 30. LAYOUTPROXIMITY
  • 31. LAYOUTPROXIMITY
  • 32. PHOTOGRAPHYTells a storySays a thousand words...
  • 33. PHOTOGRAPHYPERSPECTIVE
  • 34. PHOTOGRAPHYHUMAN
  • 35. PHOTOGRAPHYHUMAN
  • 36. PHOTOGRAPHYHUMANPhotos from Usableworld Study
  • 37. EVERYTHING COMING TOGETHER
  • 38. JOIN ME ONA DESIGN JOURNEY
  • 39. THROUGH THE YEARS 19961996 1999 2000 2004 2006 2009 2010
  • 40. THROUGH THE YEARS 19961996 1999 2000 2004 2006 2009 2010
  • 41. THROUGH THE YEARS 19961996 1999 2000 2004 2006 2009 2010
  • 42. THROUGH THE YEARS 19961996 1999 2000 2004 2006 2009 2010
  • 43. THROUGH THE YEARS 19961996 1999 2000 2004 2006 2009 2010
  • 44. THROUGH THE YEARS 19961996 1999 2000 2004 2006 2009 2010
  • 45. THROUGH THE YEARS 19961996 1999 2000 2004 2006 2009 2010
  • 46. NAVIGATIONHOW & HOMEPAGEWHERE TO WAYFINDINGAPPLY IT PRODUCT TRANSACTION MOBILE
  • 47. NAVIGATIONOffer clear pathsProvide orientationSet expectations
  • 48. NEWOLD
  • 49. FONT CHOICE SIMILARITYCONSISTENCY SATURATION CONTRAST
  • 50. vv
  • 51. vv
  • 52. HOMEPAGEEntry doorInvite explorationWindow shopping
  • 53. JOSH CONSISTENCY FONT CHOICE, SIZE, COLORSATURATION PERSPECTIVEWHITESPACE COLOR PALETTE
  • 54. WAYFINDINGCreate momentumOrient within a spaceEasily navigate
  • 55. WHITESPACEPERSPECTIVE FONT CHOICE
  • 56. FONT CHOICEDEPTH MONOCHROMATIC CONSISTENCY WHITESPACE FONT STYLE, COLOR COLOR
  • 57. COLOR — CALLS YOUR ATTENTION
  • 58. COLOR SURPLUS — BRAIN TUNES IT OUT
  • 59. PRODUCTUnderstand at a glanceProgressive disclosureAnticipate user’s needs
  • 60. JOSH — SYS ADMIN GUY
  • 61. HOMEPAGEExamples
  • 62. TRANSACTIONTypography is kingClose the dealNo room for error
  • 63. CONSISTENCY SATURATIONFONT STYLE, SIZE, COLOR
  • 64. DEPTH CONTRASTSIMILARITY SATURATION
  • 65. MOBILE
  • 66. SO WHAT DID WE LEARN?Visual design goes beyond aestheticsDesign is having an effect on your customers whether youare consciously in control of it or notHarness design principles to control shopping experienceEmbrace whitespace & kill the clutterGood Ui design is invisibleTypography can make or break transaction design
  • 67. THANK YOUDon’t forget to buy your spouse a lawnmowerfor Valentine’s Day…because let’s be honestthat’s the gift that keeps on giving. (Or justbuy them the Typographic Book of No No’s)SARI LEVINE sari.g.levine@lowes.comJOSH LEVINE jl@alexanderinteractive.com 212-598-2800 x202

×