TOP 4 Trends for E-commerce Site Design to Adopt in 2018

Creatives working on their computers
November 27, 2017

As today’s consumer owns several devices – smartphone, tablet, computer – e-commerce continues to grow rapidly. As a merchant, you have to keep pace with changing trends. So, if you’re searching for a new refreshing look for 2018, here is a list of 5 TOP trends for e-commerce site design:

1. CSS Grid Layout

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

It gives designers significantly more control over how a web page is laid out and helps make much better use of space across devices and screen sizes. Put another way, CSS Grid Layout makes optimizing user interfaces relatively easy when compared to other methods.

“As websites evolved from simple documents into complex, interactive applications, techniques for document layout, e.g. floats, were not necessarily well suited for application layout,” wrote World Wide Web Consortium editors in the CSS Grid Layout recommendation.

“By using a combination of tables, JavaScript, or careful measurements on floated elements, authors discovered workarounds to achieve desired layouts. Layouts that adapted to the available space were often brittle and resulted in counterintuitive behavior as space became constrained. As an alternative, authors of many web applications opted for a fixed layout that cannot take advantage of changes in the available rendering space on a screen.”

CSS Grid Layout addresses those problems and makes web design a lot better all around.

In 2018, look for e-commerce website designers and theme makers to include CSS Grid 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 completely support CSS Grid. But the most recent versions of all leading browsers — including Chrome, Firefox, Safari, Opera, and Edge — do support it.

2. Full-screen Search, Forms

In web design, a modal, modal box, or modal window is an element, typically controlled with a script, that is overlaid on top of other elements (content) to permit user interaction.

Modals have been an effective user interface for several years and are common on many e-commerce websites. What may 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 take up most or all of the available space on the screen.

Overstock, as an example, is using a full-screen modal for its newsletter registration form, which pops up for new site visitors. On a mobile device, the form is centered and full-screen and even on a much larger screen the translucent gray stretches end to end.

3. Much More Video

Video is an excellent medium for conveying complex information, telling stories, and evoking emotion. The amount of videos distributed on the web and watched by Internet users rises every day. So it should not be a surprise that online retailers are also using more video elements in web design. You may also see video used as backgrounds, on-site merchandising, or hero images.

4. More Microinteractions

Microinteractions have been around at least since Facebook added the “Like” button to its posts. What started as a way to rate social media contributions has grown into one of the most popular website and application trends for 2018.

For online sellers, a microinteraction’s best trick may be its ability to help create habits or, at the very least, reward users for completing specific tasks, such as adding a product to the shopping cart, reviewing a product, or subscribing to an email newsletter.

As Nick Babich, editor-in-chief of Planet UX, points out, “Microinteractions have the power to encourage users to actually interact. They are strong instruments that help to form habit loops.”

Shoppers on an e-commerce website, for example, might write a review for recently purchased products. When they submit the review, a small animation (microinteraction) rewards them for the submission, encouraging them to write another review.

There are four main parts to a microinteraction, according to Dan Saffer, author of the book “Microinteractions”:

  • A trigger that initiates or begins the microinteraction.

  • Rules that define or determine what happens in the interaction.

  • Feedback communicates what is happening or what just happened.

  • Loops and modes which govern, if you will, the content.

In 2018, expect e-commerce site and application designers to season their designs with microinteractions.

The post originally appeared on:


Have any questions? Do not hesitate to contact us!