The making of Elegant online store layouts 2.0

Getting the information from the client. Based on it, deciding to make several steps to improve the website and refresh key templates: the catalog, the product page and the main page.

In the first version of the catalog filters and links to sibling sections were hidden behind buttons while the emphasis was made on product range. Real life has proven that instead of hiding filters and cross links it’s better to keep them visible at all times. Designing new navigation.

Previously, the main page was a product showcase. Now that the catalog has grown, it makes more sense to include links to product categories and seasonal collections to capture wider audience. At first we try to add categories to the old layout.

Trying to create collections based on weather and mood.

Arranging them by weather turns out to be more useful, precise and cool.

Highlighting the block with a special weather-related background.

We need to think about product page load speed since the company delivers all over Russia, including to the cities with slower internet connection. To make page load faster, relocating large pictures used in the previous version into a gallery.

Working on the appearance of filters, the navigation system and the catalog.

The designer’s computer is trying to help find the best style.

Choosing sky colors for different weather conditions. Adding snow, rain, clouds and sun to the main page.

Approximating the behavior of interactive elements. Adding animation to make them more clear.

Assembling a lorem ipsum page using new styles.

Demonstrating the website behavior with various screen resolutions.

Supervising typesetting performed by the client and preparing the announcement.