{"id":6498,"date":"2019-02-01T14:19:13","date_gmt":"2019-02-01T14:19:13","guid":{"rendered":"https:\/\/www.vexels.com\/blog\/?p=6498"},"modified":"2019-05-16T19:55:23","modified_gmt":"2019-05-16T17:55:23","slug":"how-amazon-made-me-a-better-designer","status":"publish","type":"post","link":"\/blog\/how-amazon-made-me-a-better-designer\/","title":{"rendered":"How Amazon Made Me a Better Designer"},"content":{"rendered":"

Guest post by Lexie Lu<\/em><\/p>\n

Back in 1999, Amazon was a small online book retailer. Today, it’s the fourth-largest company in the world and serves billions of people globally. To get an idea of just how large Amazon is, consider its Seattle headquarters employs about <\/span>7.5 percent of city residents<\/span><\/a>, or approximately 40,000 people. That must drive a lot of coffee sales.<\/span><\/p>\n

In 2017, <\/span>Amazon’s net sales were $178 billion<\/span><\/a>, with an estimated brand value of $207.59 billion in 2018. The company averages 27 percent annual revenue growth. Studying Amazon’s success and paying attention to the subtler points of its website made me a better designer. <\/span><\/p>\n

In nearly every industry, there’s a movement toward digitization. Even traditional brick-and-mortar establishments see the need for an online presence. Keeping up with advances in tech isn\u2019t easy, so I spent time studying Amazon and figuring out the design behind its success. Here are the lessons I learned from Amazon.<\/span><\/p>\n

Adequate White Space<\/b><\/h3>\n

One thing I noticed while studying Amazon is that while there is a lot going on with deals, suggested similar products and navigation, there is also plenty of open space surrounding each element. It benefits users by giving their eyes a break from all the content and creating a more skimmable page. <\/span><\/p>\n

In the early days of web design, people often crammed a ton of text onto a page without much of a break for the person reading it. Modern web design, however, allows for negative space \u2014 not necessarily white \u2014 and offers a cleaner, more streamlined design. Users navigate a site with a balance between positive and negative space more easily, because elements are easier to locate. Create a balance between positive and negative space on your landing pages, even if it means moving some elements to another location.<\/span>\"WebsiteNote how <\/span>Mini+Me<\/span><\/a> takes a page out of Amazon\u2019s book and adds plenty of white space around elements on its pages. Each item is easy to view at a glance because it is set off by itself. This model worked well with Amazon, allowing people to scan a page filled with products quickly, so it\u2019s the perfect model for an online clothing store. <\/span><\/p>\n

Large Hero Images<\/b><\/h3>\n

You\u2019ve probably noticed the recent trend of using large, vivid images that reside both above and below the fold. Amazon does this very effectively, and I learned a lot by looking at how it incorporates hero images into the overall design. On Amazon, the image fades out as it goes down the page. While there are still elements of the image in the background, creating that same sense of symmetry, the lower image is of little importance and doesn\u2019t distract from the content on the page. In this example, the most essential element of the hero image \u2014 the camera \u2014 appears at the top of the page just under the navigation.<\/span>\"LargeSweet Basil<\/span><\/a> takes the idea of a big hero image and utilizes it to show off some of the dishes and the atmosphere of its restaurant. Note how it uses an overlay for the navigation menu, so you can still easily see the various areas of the site, such as where to make reservations or purchase gift cards. The image fills the entire background and is the main focus when you first land on the page. This particular site also uses more than one hero image, rotating among different photos. <\/span><\/p>\n

Simple Layout<\/b><\/h3>\n

Amazon uses a straightforward layout with a header that stays the same on each page and sidebars and a footer that adapts to the page you’re on. No matter where the user goes on the site, they know where to find the homepage or major categories, because the overall layout always stays consistent.<\/span>\"AmazonThe design is familiar to most users because they are used to the structure of a header and footer, a wide middle column for content and sidebars on either side. Many sites use this structure, so users barely have to think about where to find information.<\/span><\/p>\n

Using a ready-made <\/span>layout saves you time and effort<\/span><\/a> designing and coding a site from scratch. You can still customize the look of your site and make it unique. For an e-commerce site, stick with a look users expect, such as thumbnail images on the homepage and then larger images for description pages.<\/span><\/p>\n

Limited Color Palette<\/b><\/h3>\n

Amazon\u2019s color palette is neutral and limited. On its landing page, you\u2019ll notice white, black, grays and a pop of bright yellow for calls to action (CTAs). Using the same colors throughout the site allows a sense of symmetry. Consumers see your site as more reliable and recognizable, which allows a level of trust that makes them feel more comfortable giving you their personal information. Using the same colors not only creates a cohesive design, but also a strong brand presence.<\/span>\"AmazonLook at the landing page for <\/span>Sincerely Nuts<\/span><\/a> in the screenshot above. Note the limited color palette that ties into its brand colors. It uses white, black and a bright pistachio green. CTAs appear in red, which contrasts nicely with the rest of the colors and makes them pop.<\/span>\"Website<\/b><\/p>\n

Mobile Friendliness<\/b><\/h3>\n

Amazon is easy to view both on a regular PC and mobile devices. People are increasingly using its smartphones for internet browsing. About <\/span>75 percent of consumers own smartphones<\/span><\/a>, and half of them use the devices to shop.<\/span>\"MobileAmazon offers an app to help mobile users better access its site, but even using the site via a mobile browser such as Safari presents an easy-to-navigate view.<\/span><\/p>\n

Even a business not yet able to afford its own app can ensure its site is mobile-friendly and features elements optimized for mobile use.<\/span><\/p>\n

Customer Reviews<\/b><\/h3>\n

Consumers are <\/span>270 percent more likely to purchase<\/span><\/a> a product that has five or more reviews. Amazon features reviews from its customers and indicates if the item is a “verified purchase,” which makes the review more credible to those reading it. Users can rank their purchase from one to five stars, and the user sees an overall rating for the item based on all the reviews for that item.<\/span>\"CustomerEach reviewer has a profile, so users can see what they say about that item and read other reviews they’ve left. In addition to reviews, there are Q&A areas on many products where people answer specific questions about the product.<\/span><\/p>\n

On your site, add testimonials and either link to reviews of your products and brand or add the ability for users to add reviews. Making reviews readily available also adds credibility and shows you stand behind what you sell.<\/span><\/p>\n

Hamburger Menu<\/b><\/h3>\n

\"MenuYou may have heard hamburger menus are on the way out, but when a giant like Amazon still uses this navigation option on its website and via its app, I sit up and take notice. Most consumers instinctively understand clicking on this menu brings up more navigation options. Note above that when you click on Amazon\u2019s hamburger menu, you see its most popular categories, such as Prime Video. Just under that are popular shopping categories. As a designer, you can repeat Amazon\u2019s success by adding a mobile-friendly hamburger menu and highlighting the areas of your site users visit most often. <\/span><\/h3>\n

The hamburger menu appears in the upper left corner of <\/span>ambsn\u2019s<\/span><\/a> e-commerce site. This site combines the use of many of Amazon\u2019s elements, including a big hero image and simple navigation. The hamburger menu on the site is in the same location as Amazon\u2019s. If you plan to reach mobile users, a hamburger menu is a nice feature for smaller screens, but it also translates well on larger ones. <\/span><\/p>\n

Learn From Powerhouse Companies<\/b><\/h3>\n

Innovative companies like Amazon teach designers a lot. They spend a small fortune on testing and hiring experts. You can repeat their success without breaking your budget by merely studying what they do and the elements they keep in their designs. That’s what I did, and it really paid off.<\/span><\/p>\n

Over time, your site will increase its conversions and usability, too. While it’s unlikely your website will reach the size or revenue of Amazon, you can still make tremendous improvements and grow as a brand \u2014 then make like a Seattle resident and treat yourself to a cup of coffee.<\/span><\/p>\n

Lexie Lu is a freelance web designer. Lexie is a contributor to Marketo, Website Magazine and Envato. Check out her design blog, <\/span>Design Roast<\/span><\/a>, or follow her on Twitter <\/span>@lexieludesigner<\/span><\/a>.<\/span><\/em><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Guest post by Lexie Lu Back in 1999, Amazon was a small online book retailer. Today, it’s the fourth-largest company in the world and serves…<\/p>\n","protected":false},"author":1,"featured_media":6515,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[838,827,822],"tags":[674,411,519,496,673,140,675,657,656,664,672],"class_list":{"0":"post-6498","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-design","8":"category-graphic-design","9":"category-merch","10":"tag-amazon","11":"tag-aquasixio","12":"tag-cv","13":"tag-illustrator-tutorials","14":"tag-layout","15":"tag-objects","16":"tag-ui","17":"tag-user-experience","18":"tag-ux","19":"tag-web-design","20":"tag-website-design"},"acf":[],"yoast_head":"\nHow Amazon Made Me a Better Designer - Vexels Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vexels.com\/blog\/how-amazon-made-me-a-better-designer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How Amazon Made Me a Better Designer - Vexels Blog\" \/>\n<meta property=\"og:description\" content=\"Guest post by Lexie Lu Back in 1999, Amazon was a small online book retailer. Today, it’s the fourth-largest company in the world and serves...\" \/>\n<meta property=\"og:url\" content=\"\/blog\/how-amazon-made-me-a-better-designer\/\" \/>\n<meta property=\"og:site_name\" content=\"Vexels Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-01T14:19:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-05-16T17:55:23+00:00\" \/>\n<meta property=\"og:image\" content=\"\" \/>\n\t<meta property=\"og:image:width\" content=\"2048\" \/>\n\t<meta property=\"og:image:height\" content=\"1356\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Vexels\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vexels\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How Amazon Made Me a Better Designer - Vexels Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vexels.com\/blog\/how-amazon-made-me-a-better-designer\/","og_locale":"en_US","og_type":"article","og_title":"How Amazon Made Me a Better Designer - Vexels Blog","og_description":"Guest post by Lexie Lu Back in 1999, Amazon was a small online book retailer. Today, it’s the fourth-largest company in the world and serves...","og_url":"\/blog\/how-amazon-made-me-a-better-designer\/","og_site_name":"Vexels Blog","article_published_time":"2019-02-01T14:19:13+00:00","article_modified_time":"2019-05-16T17:55:23+00:00","og_image":[{"width":2048,"height":1356,"url":":\/blog\/wp-content\/uploads\/2019\/02\/jose-alejandro-cuffia-799485-unsplash.jpg","type":"image\/jpeg"}],"author":"Vexels","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Vexels","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":":\/blog\/how-amazon-made-me-a-better-designer\/#article","isPartOf":{"@id":"\/blog\/how-amazon-made-me-a-better-designer\/"},"author":{"name":"Vexels","@id":"https:\/\/www.vexels.com\/blog\/#\/schema\/person\/9704a44a2e98ccdcded9713a9f38bbd3"},"headline":"How Amazon Made Me a Better Designer","datePublished":"2019-02-01T14:19:13+00:00","dateModified":"2019-05-16T17:55:23+00:00","mainEntityOfPage":{"@id":"\/blog\/how-amazon-made-me-a-better-designer\/"},"wordCount":1432,"image":{"@id":":\/blog\/how-amazon-made-me-a-better-designer\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2019\/02\/jose-alejandro-cuffia-799485-unsplash.jpg","keywords":["amazon","Aquasixio","cv","Illustrator Tutorials","layout","objects","ui","user experience","ux","web design","website design"],"articleSection":["Design","Graphic Design","Merch"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"\/blog\/how-amazon-made-me-a-better-designer\/","url":":\/blog\/how-amazon-made-me-a-better-designer\/","name":"How Amazon Made Me a Better Designer - Vexels Blog","isPartOf":{"@id":"https:\/\/www.vexels.com\/blog\/#website"},"primaryImageOfPage":{"@id":":\/blog\/how-amazon-made-me-a-better-designer\/#primaryimage"},"image":{"@id":":\/blog\/how-amazon-made-me-a-better-designer\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2019\/02\/jose-alejandro-cuffia-799485-unsplash.jpg","datePublished":"2019-02-01T14:19:13+00:00","dateModified":"2019-05-16T17:55:23+00:00","author":{"@id":"https:\/\/www.vexels.com\/blog\/#\/schema\/person\/9704a44a2e98ccdcded9713a9f38bbd3"},"breadcrumb":{"@id":":\/blog\/how-amazon-made-me-a-better-designer\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":[":\/blog\/how-amazon-made-me-a-better-designer\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":":\/blog\/how-amazon-made-me-a-better-designer\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2019\/02\/jose-alejandro-cuffia-799485-unsplash.jpg","contentUrl":"\/blog\/wp-content\/uploads\/2019\/02\/jose-alejandro-cuffia-799485-unsplash.jpg","width":2048,"height":1356,"caption":"Website Design"},{"@type":"BreadcrumbList","@id":":\/blog\/how-amazon-made-me-a-better-designer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vexels.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How Amazon Made Me a Better Designer"}]},{"@type":"WebSite","@id":"https:\/\/www.vexels.com\/blog\/#website","url":"https:\/\/www.vexels.com\/blog\/","name":"Vexels Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vexels.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.vexels.com\/blog\/#\/schema\/person\/9704a44a2e98ccdcded9713a9f38bbd3","name":"Vexels","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/b5d98809d2c327f5eada76985a21cc6e16e8a02006591be8e88865e2d558d980?s=96&d=identicon&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b5d98809d2c327f5eada76985a21cc6e16e8a02006591be8e88865e2d558d980?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b5d98809d2c327f5eada76985a21cc6e16e8a02006591be8e88865e2d558d980?s=96&d=identicon&r=g","caption":"Vexels"},"url":"\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"\/blog\/wp-json\/wp\/v2\/posts\/6498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"\/blog\/wp-json\/wp\/v2\/comments?post=6498"}],"version-history":[{"count":1,"href":"\/blog\/wp-json\/wp\/v2\/posts\/6498\/revisions"}],"predecessor-version":[{"id":8401,"href":"\/blog\/wp-json\/wp\/v2\/posts\/6498\/revisions\/8401"}],"wp:featuredmedia":[{"embeddable":true,"href":"\/blog\/wp-json\/wp\/v2\/media\/6515"}],"wp:attachment":[{"href":"\/blog\/wp-json\/wp\/v2\/media?parent=6498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"\/blog\/wp-json\/wp\/v2\/categories?post=6498"},{"taxonomy":"post_tag","embeddable":true,"href":"\/blog\/wp-json\/wp\/v2\/tags?post=6498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}