Designing the perfect ecommerce website: 45 stunning examples to inspire you

If you can’t blow them away, you won’t get them to stay.

With 2015 expected to blast past last year’srecord setting mark of $1.4 trillion in global online sales, the pressure is on for businesses to create visually appealing ecommerce websites that deliver exciting visual solutions and quick and easy shopping experiences for their consumers.

Gorgeous websites draw in customers and increase the perceived value of the goods or services being offered. The task of designing an ecommerce website, however, need not be intimidating. Check out our list of 45 beautifully designed ecommerce websites from a variety of industries showcasing different layouts to serve as inspiration for your next project.

01. Use Bold Colors and Big Product Shots

01_New_From_Bose_1

Bose

02_New_From_Bose_2

Bose

New From Bose serves up a horizontal layout featuring 5 of the company’s newest headset pieces. Bold, flat color backgrounds paired with a curated selection of imagery play up the products being offered, allowing them to take center stage.

02. Less is More

03_ETQ_1

ETQ Amsterdam

04_ETQ_2

ETQ Amsterdam

ETQ Amsterdam specializes in footwear that is “generated under three standard rules: elegant, timeless, and quality.” The company certainly followed the same 3 rules when designing its online shop. Its modern aesthetic is achieved through the use of clean typography, a muted color palette, large imagery and subtle animation. Ultimately uncluttered, it contains only the bare content needed for a customer looking to acquire a pair of new kicks.

03. Use Large, Beautiful Typography

05_Kruger_1

Brdr. Krüger

06_Kruger_2

Brdr. Krüger

Woodturning companyBrdr. Krüger sets product names and important headlines in Gotham in a large point size over full screen images. The large type also translates beautifully into mobile.

04. Design with Grids For Structure

07_Chris_Niedenthal_1

Chris Niedenthal

08_Chris_Niedenthal_2

Chris Niedenthal

Chris Niedenthal uses a grid system to display his many years of work. It provides the website with structure, scalability, and a variety of display options in harmony with each other throughout the website.

05. Experiment With Form And Function

09_Chickenbot_1

Chickenbot

10_Chickenbot_2

Chickenbot

Who said menu options have to be dull?Chickenbot, an Italian chicken delivery service, uses a hamburger menu that expands into a gorgeous, full screen, vibrant orange list of options. An excellent alternative to the sometimes dull drop down and sub-menu option.

06. Minimize Navigation

11_Deejo_1

My Deejo

My Deejo designed a website that allows customers to fully customize their product without ever having to leave the page they land on. Customers are presented with a variety of options that work with drop downs and radio buttons. Once they are satisfied, they place their order.

07. Build Interaction

12_Emporium_Pies_1

Emporium Pies

13_Emporium_Pies_2

Emporium Pies

Emporium Pies is a sweet online bakery. It reveals information about each of its pies as customers hover over them, transforming the content of each pie into an information section.

08. Introduce Your Products

14_JM_Sons_1

JM & Sons

15_JM_Sons_2

JM & Sons

Canadian furniture makers,JM & Sons designed a product section loaded with images of the items they are selling. Customers can look at products from many different angles, satisfying any curiosity they might have. This helps alleviate the difference felt between holding the product in your hands and purchasing it online.

09. Use Heaps of White Space

16_Best_Made_Co_1

Best Made Co

17_Best_Made_Co_2

Best Made Co

Best Made Co, an outdoor apparel store, created a layout that surrounds its products with white space, making the website feel clean and uncluttered even when it has a vast inventory.

10. Implement Custom Lettering

18_LeaderHead_1

Leather Head Sports

19_LeaderHead_2

Leather Head Sports

Leather Head Sports creates beautiful leather sports goods. They also have a sweet header on their ecommerce website featuring custom lettering. The piece sits centered above a delicate row of navigation links. A classic and tasteful way to personalize your ecommerce website.

11. Use Color Accents To Highlight Important Information

20_Longboard_Living_1

Longboard Living

21_Longboard_Living_2

Longboard Living

Color accents are an excellent way to highlight calls to action, actionable pieces of UI and to add attractive visual elements to a website.Longboard Living does all 3, using a bright teal on all calls to action, its side menu and as part of its design elements.

12. Make Your Site Easy To Navigate

22_LEIF_1

LEIF

23_LEIF_2

LEIF

The design of the LEIF website makes it really easy for customers to find what they’re looking for, by providing a regular search option that allows them to type in what they are looking for and an option to browse through items using filters.

13. Use Informative Headers

24_Graze_1

Graze

25_Graze_2

Graze

Snacking company Graze does a great job of letting you quickly recognize the variety of products they carry. By creating a header that showcases a number of the products they offer, customers are able to quickly glean the site and head straight to their favorite nom noms. The typography is appropriate, as it feels laid back and friendly, like Graze’s snacks.

14. Give Prominence To Customer Support

26_Farmdrop_1

Farmdrop

27_Farmshop_2

Farmdrop

There is nothing more frustrating than endlessly searching an ecommerce website for contact information.Farmdrop makes it easy for customers to get in touch with them, by making sure a chat bubble displays on the bottom right hand side and further contact info at the top are on display always.

15. Have Fun With Product Illustrations

28_Vertty_1

Vertty

29_Vertty_2

Vertty

Towel makerVertty decked out its landing page with illustrations of all the variations of the product it offers. The illustrations are of course representative of the towel and add a playful and laid back look to the website.

16. Use Tiled Layouts

30_Oliver_Bonas_1

Oliver Bonas

31_Oliver_Bonas_2

Oliver Bonas

Oliver Bonas uses large tiles on a grid to present diverse pieces of information, in one place. Because each tile is part of a grid, all the pieces feel like part of a whole, yet hold different pieces of information revolving around the brand.

17. Complement Product Photography With Video

32_Bellroy_1

Bellroy

33_Bellroy_2

Bellroy

Bellroy added small clips of the products they sell into their product descriptions. This affords customers the opportunity to see the product they might purchase being handled, satisfying any curiosity they might have about the item.

18. Use Textured Backgrounds

34_Dollar_Shave_1

Dollar Shave Club

35_Dollar_Shave_2

Dollar Shave Club

Dollar Shave Club uses textured backgrounds as branding element as a way to separate sections. It gives the website a slightly brash and masculine look, spot on with its target market.

19. Use Accordions for Heavy Text

36_Hard_Graft_1

Hard Graft

37_Hard_Graft_2

Hard Graft

Hard Graft does a great job of filling in customers with all the important details about their products. To tackle heavy text without sacrificing aesthetics, Hard Graft uses accordions, allowing them to provide extensive details on their products while keeping a slick UI.

20. Use Video Instead of a Hero Image

38_Cook_Mellow_1

Cook Mellow

39_Cook_Mellow_2

Cook Mellow

Videos are a great way of sharing vast amounts of information on an ecommerce website without making the infinite scroll infinite, or adding tons of pages. Cook Mellow displays a video instead of a hero image, beautifully designed and informative. It can also turn any kitchen putz into a Gordon Ramsey.

21. Offer Multiple Sidebar Menus

40_CH_1

Carolina Herrera

41_CH_3

Carolina Herrera

Spice up complex menus that require drop downs and sub menus. Carolina Herrera provides a fantastic alternative to the typical drop down by utilizing a sidebar with a secondary menu. The difference in color is a great way to signal a sub menu and create a visual difference that makes the site easier to navigate.

22. Offer Cart Management Without Leaving the Page

42_Everlane_1

Everlane

43_Everlane_2

Everlane

Customers returning to your website to make a purchase may not want to have to go through all the clicks again.Everlane does a fantastic job of providing a way around this by allowing customers to hover over an item, selecting a size, and adding it to their bag, all without ever leaving the page they are currently browsing.

23. Use A Stark Layout

44_Helmut_Lang_1

Helmut Lang

45_Helmut_Lang_2

Helmut Lang

Helmut Lang is an Austrian fashion designer who initially set up a made-to-measure studio in Vienna. With a very stripped down look, the designer’s online retail draws its elegance from its brutal simplicity, including only what is most import to those landing on his website: his collection.

24. Use Sliders as a Header

46_Groovemade_1

Groovemade

47_Groovemade_2

Groovemade

Groovemade makes sweet accessories for the every day and maximizes use of page real estate by turning its header into an informative slider. This affords the site a dynamic space that is ever changing, and allows the user to quickly browse through information and products without even having to scroll.

25. Play With Top View Photography

48_Munchery_1

Munchery

49_Munchery_2

Munchery

Munchery uses top-view photography throughout its entire website. The style, trending throughout the year, provides a fresh view of the products Munchery offers. Being food based, it is a beautiful way to depict the entire dish while creating astounding photographic compositions.

26. Complement Product Colors with the Website Palette

51_Harrys_1

Harry’s

52_Harrys_2

Harry’s

Stylish razor companyHarry’s created a website utilizing a palette that perfectly matches the products it is offering. The colors used as backgrounds, in calls to action, and throughout the entire site go hand in hand with the orange, brown and deep blue that characterize the Harry’s products.

27. Give Informative Product Summaries

53_BeoPLay_1

Beo Play

54_BeoPLay_2

Beo Play

Beo Play’s online retail shop offers product summaries that are beautifully tiled and hold relevant information. While most summaries display a name and price tag, Beo Play offers up information on stock, special editions, and new collections.

28. Offer Interactive Scrolling

55_Pencil_1

Pencil by 53

56_Pencil_2

Pencil by 53

Pencil by 53 is 53’s revolutionary stylus. Their slick online store offers an infinite scroll with interactive pieces that break down all the components and revenant information about Pencil. Customers are told a story about their product through large, beautiful typography and excellent photography.

29. Create Patterns with Products

57_Aark_1

Aark Collective

58_Aark_2

Aark Collective

Aark Collective presents a thoughtful website packed with patterns and images made with their own products. Instead of using traditional product photography featuring the product in use or solo, Aark Collective created patterns and compositions using their watches. Pair it with clean type and a serene color palette and you have a slick, unique website.

30. Provide A 360 Overview

59_Bagigia_1

Bagigia

60_Bagigia_2

Bagigia

Bagigia is a high end bag made in Italy. Its website uses a 360 degree view feature to showcase the product. Color is used strategically and only to show variations of the product.

31. Use A Classic Grid with a Twist

61_Diesel_1

Diesel

62_Diesel_2

Diesel

Diesel uses a symmetrical, traditional grid to showcase its items. To change it up a bit, the website overlays white tiles on a textured background. A great example of how a classic solution can be made to feel modern with one simple detail.

32. Integrate Social Media and Sharing

63_Vanmoof_1

Vanmoof

64_Vanmoof_2

Vanmoof

Vanmoofmakes it easy for customers landing on their site to share their excitement about the brand. The beautifully designed ecommerce website is fully integrated with social media channels, and lets customers seamlessly share as they shop.

33. Rethink Drop Downs

65_The_Horse_1

The Horse

66_The_Horse_2

The Horse

The Horse provides a great example of how drop downs do not have to be purely typographical. By including product photography, the website’s menu becomes instantly informative, interesting and beautiful. The row of watches is a nice surprise and a great departure from rows and rows of text.

34. Use Editorial Inspired Design

67_Mr_Porter_1

Mr Porter

68_Mr_Porter_2

Mr Porter

The Mr Porter ecommerce website is reminiscent of the old publications’ grids. The bold black stroke under its main navigation marks a clear division between navigational items and content. Although its serif face tends to get lost on some images, the pairing between serif and san serif faces throughout the site is superb.

35. Implement Stackable Interfaces

69_Travel_Alberta_1

Travel Alberta

70_Travel_Alberta_2

Travel Alberta

Travel Alberta “stacks” web pages as you click through. You can return to the previous page by clicking an “x” on the right hand corner. It lets you see your progression through the site and serves as breadcrumbs.

36. Use Dynamic Product Photography

71_Nike_Jordan_1

Nike Jordan

72_Nike_Jordan_2

Nike Jordan

Nike Jordan, part of Nike’s line, makes use of dynamic product photography, characteristic of the brand. The photographs tell customers stories. Paired with bold typographical choices, the Nike Jordan site feels strong, masculine and, of course, sporty.

37. Feature Oversized Product Photography

73_Warby_and_Parker_1

Warby and Parker

74_Warby_And_Parker_2

Warby and Parker

Warby and Parker uses extra large photographs of its products. It’s refreshing and playful and leaves no doubt about what a product might look at. It displays beautifully on mobile.

38. Integrate a Seamless Check Out

75_Coin_1

Coin

76_Coin_2

Coin

Coin gives its customers one of the greatest ecommerce gifts of all time: a painless checkout process. ‘Nough said.

39. Contrast With Stark Colors

77_Capellos_1

Capellos

78_Capellos_2

Capellos

Capellos uses black and white consistently across many of its delicious pasta products. Its website follows the tune, reserving color for calls to action and other actionable sections, maintaining harmony with the products it features.

40. Implement a Type-centric Design

79_ECC_1

ECC Lightning & Furniture

80_ECC_2

ECC Lightning & Furniture

With the use of large photographs trending, it is easy to forget how beautiful a website can be when it is type-based.ECC Lightning & Furniture presents a site with large black typography, delicate linework, and minimalist product photography. Almost like walking into a gallery.

41. Design with Templates

81_Deliveroo_1

Deliveroo

82_Deliveroo_2

Deliveroo

Nom nom specialistDeliveroo has a number of vendors across a few cities globally. The food delivery start-up uses templates to present each vendor and its menu. In doing so, it achieves consistency and familiarity across the entire site.

42. Introduce Storytelling

83_Maple_1

Maple

Revolutionary NYC restaurant Maple uses video on its website to tell its story. Coupled with big, bold, beautiful type, the videos give customers a direct view into the restaurant’s fast paced kitchen and story.

43. Use Iconography to Represent Products

85_VSCO_1

Visual Supply Co

84_VSCO_2

Visual Supply Co

Visual Supply Co represents its products using color blocks and numbers. While it may not always be the right solution for every ecommerce website, some stores may lend themselves to the use of iconography to represent products, categories or features.

44. Make it Easy to Customize a Product

86_Le_Coq_Sportif_1

Le Coq Sportif

87_Le_Coq_Sportif_3

Le Coq Sportif

Le Coq Sportif, a sports apparel company, makes it terribly easy for users to select color, size and quantity on their site. Options are clearly labeled and large enough to be clickable.

45. Deliver All in One Interactions

88_Hunter_Wines_1

Hunters Wine Shop

The Hunters Wine Shop lets you browse through items, decide on quantity and add it to your cart all on the page you land. The site is easily navigable and refreshingly concise.

Start Designing!

There you have it, folks— 45 of the most visually appealing and effective ecommerce websites currently online. If you think we missed some, let us know in the comments section, below.

Otherwise, happy designing!

Related articles

See all

Bring your ideas to life in minutes.

Express yourself with the world's easiest design program.