• Websites
  • Elegant
  • 1.0   2.0  

    The making of Elegant online store layouts 2.0

    Overview   Process  

    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.

    elegant2 process 01 new

    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.

    elegant2 process 02
    elegant2 process 03

    Trying to create collections based on weather and mood.

    elegant2 process 04

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

    elegant2 process 05

    Highlighting the block with a special weather-related background.

    elegant2 process 06

    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.

    elegant2 process 07

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

    elegant2 process 08

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

    elegant2 process 09

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

    elegant2 process 11

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

    elegant2 process 15
    elegant2 process 16

    Assembling a lorem ipsum page using new styles.

    elegant2 process 17 new
    elegant2 process 18 new
    elegant2 process 19 new
    elegant2 process 20 new

    Demonstrating the website behavior with various screen resolutions.

    elegant2 process 21 new
    elegant2 process 22 new

    Supervising typesetting performed by the client and preparing the announcement.

    elegant2 process 23

    Order a design...