5 eCommerce Site Design Trends for 2018

New technologies, technologies and user behaviors guide the e-commerce website and application design every year. In 2018, expect e-commerce sites to use CSS Grid Layout, use mobile-mode full-screen modal windows, offer more videos, and include micro-interactions and guided sales.

1. Layout of the CSS grid

CSS Grid Layout is a two-dimensional layout template and part of the CSS standard of the World Wide Web Consortium.

It gives designers much more control over the layout of a web page and allows for better use of space between devices and screen sizes. That is, CSS Grid Layout makes UI optimization relatively easy compared to other methods.

"As Web sites have shifted from simple documents to complex interactive applications, document layout techniques, such as floating, were not necessarily well suited to the application's layout." , the World Wide Web Consortium editors wrote in the CSS Grid Layout recommendation.

"Using a combination of tables, JavaScript, or neat measurements on floating elements, the authors discovered workarounds to get the desired layouts." Arrangements tailored to the available space were often Fragile and counter-intuitive behavior as space became limited As an alternative, authors of many web applications have opted for a fixed layout that can not take advantage of changes in available rendering space on a screen. "

CSS Grid Layout solves these problems and dramatically improves web design.

In 2018, search for ecommerce website designers and theme makers to include CSS layout, especially on product category pages or on search results pages.

The only possible barrier may be that some early versions of web browsers do not fully support CSS Grid. But the most recent versions of all major browsers – including Chrome, Firefox, Safari, Opera and Edge – support it.

2. Full-screen search, forms

In web design, a modal, modal or modal window is an element, usually controlled by a script, which is superimposed on other elements (content) to allow the interaction of the. user.

Modals have been an effective user interface for many years and are common on many e-commerce sites. What can change for 2018 is the use of full screen modals for search and forms.

The trend comes from mobile-first web design. On a mobile device, many modals occupy most or all of the available space on the screen.

The Overstock subscription form uses a full-screen modal box.

Overstock, for example, uses a full-screen mode for its newsletter registration form, which appears for new visitors to the site. On a mobile device, the form is centered and in full screen and even on a much larger screen, the translucent gray extends end to end.

The Ralph Lauren website includes a search mode that covers almost all the content of the page when it is displayed on a desktop or laptop, and which is actually displayed in full screen on a mobile device.

 The Ralph Lauren website uses a full-screen search mode on mobile devices and covers most content on larger screens. "Width =" 570 "height =" 307 "/> 

<p class= The Ralph Lauren site uses a full-screen mode of search on mobile devices and covers most content on larger screens.


Search for designers who create mobiles to first use modals in full-screen mode for search and other forms, and also transfer these full-screen implementations to larger layouts.

3. Much more video

Video is a great way to convey complex information, tell stories and evoke emotions. The number of videos posted on the web and watched by Internet users is increasing every day. So it should not be surprising that online retailers are also using more video elements in website design.

Sites like Beardbrand, which has been using video and content marketing for years, are leading the way by adding online video to product detail pages.

 Online videos are both popular and effective: In 2018, look for e-commerce sites to include video on product pages, landing pages, and even in the background. 570 "height =" 312 "/> 

<p class= Online videos are popular and effective, and in 2018, search for e-commerce site designs to include video on product pages, landing pages, and even in the background. Source: Beardbrand.

You can also see a video used as a background, on-site merchandising, or hero images.

4. More Microinteractions

Microinteractions have been around at least since Facebook added the "I love" button to its posts. What started as a way to evaluate contributions to social media has become one of the most popular trends for websites and apps in 2018.

 An animated success message indicates to a user that he has joined the mailing list. "Width =" 570 "height =" 295 "/> 

<p class= An animated success message indicates to a user that he / she has joined the mailing list.

For online sellers, the best trick of a microinteraction may be its ability to create habits or, at the very least, reward users for performing specific tasks, such as adding a product to the cart, revisiting a product or subscribe to an e-newsletter.

As Nick Babich, editor of Planet UX, points out, "Micro-interactions have the power to encourage users to interact. These are powerful tools that help form loops of habits. "

Buyers on an ecommerce website, for example, might write a review for recently purchased products. When they submit the exam, a small animation (microinteraction) rewards them for submission, encouraging them to write another critique.

According to Dan Saffer, author of the book Microinteractions,

There are four main parts to a microinteraction.

  • A trigger that initiates or starts microinteraction.
  • Rules that define or determine what happens in the interaction.
  • The feedback communicates what is happening or what has just happened.
  • Curls and modes that govern, if you like, the content.

In 2018, expect designers of e-commerce sites and applications to season their designs with micro-interactions.

5. Guided Sale

Guided Selling is about asking customers about features and use to help them discover specific products.

In e-commerce, guided selling has been around for a number of years. Victoria's Secret, for example, has a sports bra selector. The North Face will help you find jackets. And Bodybuilding.com has a three-step supplement researcher to help you achieve your fitness goals.

 The simple supplement researcher at Bodybuilding.com leads consumers to a good solution. "Width =" 570 "height =" 484 "/> 

<p class= The Bodybuilding.com Complimentary Finder Leads Customers to a Good Solution

Like other design trends on this list, guided selling could become much more common in 2018.