ABOUT
Aesthetic Noir is a clothing brand that produces unique, avant-garde, modern clothing that is affordable. Founders Lily and Isabella are oriented on the styles of famous clothing designers such as: Yohji Yamamoto, Rick Owens, Ziggy Chen, and Damir Doma but with price tags that everyone can afford.
TECHNOLOGIES
For this brand, given the fact that the number of clothes is limited, a new technology - 3D fitting room - fit in well. It is based on a neural network using Deepfake and GAN (Generative adversarial network) technologies. Personally, I've never seen such a feature in this form, I've only seen such technology once, in its infancy. As far as I know, this function is just entering the market (February 2020) and has not yet had time to be fully formed.
The essence of its work is that the user uploads his face photo to the site and fills in the basic parameters of his body, after which a 3D model of the person is created.
After that, the user can try on any clothes and even create a look of several things. At the same time, this model can be rotated horizontally by 360 degrees.
This feature solves two serious problems that users often encounter in online clothing stores.
The first problem - it is the impossibility to try on a thing to see how it will look exactly on you.
The second problem is the impossibility to compose a look of several things to see how the chosen things will look together, and impossibility to try this look on yourself.
The essence of its work is that the user uploads his face photo to the site and fills in the basic parameters of his body, after which a 3D model of the person is created.
After that, the user can try on any clothes and even create a look of several things. At the same time, this model can be rotated horizontally by 360 degrees.
This feature solves two serious problems that users often encounter in online clothing stores.
The first problem - it is the impossibility to try on a thing to see how it will look exactly on you.
The second problem is the impossibility to compose a look of several things to see how the chosen things will look together, and impossibility to try this look on yourself.
GENERAL INFO ABOUT THE GRID
Taking into account all the design requirements, a column grid, with 6 columns, was chosen. This grid perfectly suited both to the main page and to the internal pages with blocks of goods, where a certain algorithm is added to the grid to work with it. At the same time, I managed to keep the integrity of the composition on all the pages and maintain fine balance between the boundaries of uniformity and the space of diversity. Also, this grid is perfectly suited for creating the necessary rhythm of perception of the content in this concept. Next will be a more detailed review of solutions related to composition, grid and rhythm.
HOME PAGE
On the home page, I chose a concept whose main characteristic is the division of the page into two equal areas, which correspond to two models of perception: navigation (fast) and content (slow). On the left is the navigational part and on the right the content part. Each section on the home page is placed on these two halves, the left explains what that section is, the right its content.
RHYTHM
On all pages, in general, a measured, non-homogeneous rhythm is set. This makes it possible to approach each item individually, which was one of the main goals. This rhythm is completely opposite to mass-market stores, where there are a lot of products and no individuality.
Navigation on the site is made very non-standard, I personally have not seen this yet. It was possible to create the effect of depth, or rather the effect of a certain space.
Also, with this navigation I wanted to emphasize the avant-garde trend of clothing, namely: advanced, unconventional, extravagant trends in fashion, which do not fit into the generally accepted norms. Such clothes are not necessary in the everyday ordinary life of an average person, they are designed to shock. These points I wanted to emphasize through the navigation.
The form was intentionally brought to the forefront in relation to function, but at the same time managed to maintain the necessary balance between aesthetics, convenience and functionality.
Since the left side of the page is navigational, the concept of the main menu began to build itself.
The main menu is fixed and stays in one place all the time when scrolling the site.
The active menu item is always at the bottom and in the front relative to the rest of the menu items. The order of the menu items is always maintained.
When you select another item, there is an animation that looks like a carousel that spins in a circle, and this animation is also the main part of the preloader when you go to the corresponding page.
Also in the menu there are secondary items, which with the help of contrasts make it clear that it is a secondary item.
Also, with this navigation I wanted to emphasize the avant-garde trend of clothing, namely: advanced, unconventional, extravagant trends in fashion, which do not fit into the generally accepted norms. Such clothes are not necessary in the everyday ordinary life of an average person, they are designed to shock. These points I wanted to emphasize through the navigation.
The form was intentionally brought to the forefront in relation to function, but at the same time managed to maintain the necessary balance between aesthetics, convenience and functionality.
Since the left side of the page is navigational, the concept of the main menu began to build itself.
The main menu is fixed and stays in one place all the time when scrolling the site.
The active menu item is always at the bottom and in the front relative to the rest of the menu items. The order of the menu items is always maintained.
When you select another item, there is an animation that looks like a carousel that spins in a circle, and this animation is also the main part of the preloader when you go to the corresponding page.
Also in the menu there are secondary items, which with the help of contrasts make it clear that it is a secondary item.
NAVIGATION
CONSTRUCTION
Once the basic inputs were set, the construction began to build itself, and the further it went, the more constructive the structure became.
The most vivid example of this point can be seen in the design, which was formed on the home page.
Since the navigation, which is fixed during scrolling in the navigation part of the site, constantly occupies a large part of the page, and the content part in each section, mostly greater in height than one screen, it turned out so that the navigation blocks when you scroll for a while are fixed until the content part, which refers to this section is scrolled. And that's how every section on the main page works. As a result, it is a solid, logical construction that builds itself.
The most vivid example of this point can be seen in the design, which was formed on the home page.
Since the navigation, which is fixed during scrolling in the navigation part of the site, constantly occupies a large part of the page, and the content part in each section, mostly greater in height than one screen, it turned out so that the navigation blocks when you scroll for a while are fixed until the content part, which refers to this section is scrolled. And that's how every section on the main page works. As a result, it is a solid, logical construction that builds itself.
STRUCTURE
The basic structure of the site consists of these pages:
Aeshetic Noir (Home Page)
Women
➝
Tops
Bottoms
Outerwear
Coats
Dresses
Accessories
Jewelry
Bottoms
Outerwear
Coats
Dresses
Accessories
Jewelry
➝
Product Card
Man
➝
Tops
Bottoms
Outerwear
Coats
Accessories
Jewelry
Bottoms
Outerwear
Coats
Accessories
Jewelry
➝
Product Card
Accessories
➝
Jewelry
Shoes
Hats
Bags
Belts
Tattoos
Socks
Shoes
Hats
Bags
Belts
Tattoos
Socks
➝
Product Card
Clearance
➝
Product Card
Second level of nesting pages
In the example of the "Women" page, the second level of nesting of the site pages is shown.
Pages of this type show groups of products that belong to this category. In our case, it's a women's product category.
In the first section, groups of products are shown in a compact form only through typography.
Near the names of the groups there is a number that means the number of products in the group.
The second section shows the same groups, but with the addition of photos.
This solution also built itself, as to show on one screen all the groups of products together with photos, it would not be the most successful solution, because then, it would create a very fast rhythm, which would be knocked out of the overall concept.
Therefore, it was decided to show the groups of products in a compact form through an interesting typographic composition, which also brought some variety, while maintaining a balance with uniformity, because this composition is built on a common grid, as well as all the sections on all pages.
Also in the second section with photos, you can see in more detail the algorithm that works in conjunction with the grid. Although this algorithm was also used on the main page in the section with categories, but it was limited to half of the screen, and here it works full screen.
On the next page of the third nesting level, will be discussed in more detail this bundle of grid and algorithm, because there this bundle reveals its full potential.
Pages of this type show groups of products that belong to this category. In our case, it's a women's product category.
In the first section, groups of products are shown in a compact form only through typography.
Near the names of the groups there is a number that means the number of products in the group.
The second section shows the same groups, but with the addition of photos.
This solution also built itself, as to show on one screen all the groups of products together with photos, it would not be the most successful solution, because then, it would create a very fast rhythm, which would be knocked out of the overall concept.
Therefore, it was decided to show the groups of products in a compact form through an interesting typographic composition, which also brought some variety, while maintaining a balance with uniformity, because this composition is built on a common grid, as well as all the sections on all pages.
Also in the second section with photos, you can see in more detail the algorithm that works in conjunction with the grid. Although this algorithm was also used on the main page in the section with categories, but it was limited to half of the screen, and here it works full screen.
On the next page of the third nesting level, will be discussed in more detail this bundle of grid and algorithm, because there this bundle reveals its full potential.
THE THIRD LEVEL OF NESTING PAGES
In the example of the "Outerwear" page, the third level of nesting of the site pages is shown.
Pages of this type show product cards in the selected product group.
Pages of this type show product cards in the selected product group.
GRID + ALGORITHM
On third-level pages, the most pronounced work of the grid and the algorithm, which was mentioned above.
Recall that the site uses a six-column grid everywhere.
In the layout of all blocks with photos of products on all pages of the site uses the same algorithm.Its essence is that each of the 6 columns is a block of width, but there are exceptions, in some places block is skipped, and in some places block takes 2 columns.
1 rule of the algorithm - there are always 2 blocks in a row and after them 1 block is skipped.
2 rule of the algorithm - there are 3 block sizes, medium, small and large.
3 rule of the algorithm - with respect to the size of blocks, there are 2 schemes of their order, which alternate in a circle. The first scheme: medium block, small block, skip block. The second scheme: big block, small block, skip block.
These 3 rules make up the entire algorithm.
This algorithm helps to create the necessary rhythm of the blocks with photos of products, in which you can slowly and individually show each thing.
There is another very important point, which solves the algorithm. Rhythm, which he creates, helps to combat homogeneity (homogeneity), which leads to "blinding effect". Homogeneity, you can reduce with the rhythm, which will not be monotonous, but it also helps to fight it asymmetric composition.
Thus, despite the fact that the product categories pages are quite large in height, it is compensated by reducing the homogeneity and asymmetric composition. As a result, came out to show 24 products, on one page, with an individual approach in a measured rhythm, and with all this, these pages read quite comfortably.
Recall that the site uses a six-column grid everywhere.
In the layout of all blocks with photos of products on all pages of the site uses the same algorithm.Its essence is that each of the 6 columns is a block of width, but there are exceptions, in some places block is skipped, and in some places block takes 2 columns.
1 rule of the algorithm - there are always 2 blocks in a row and after them 1 block is skipped.
2 rule of the algorithm - there are 3 block sizes, medium, small and large.
3 rule of the algorithm - with respect to the size of blocks, there are 2 schemes of their order, which alternate in a circle. The first scheme: medium block, small block, skip block. The second scheme: big block, small block, skip block.
These 3 rules make up the entire algorithm.
This algorithm helps to create the necessary rhythm of the blocks with photos of products, in which you can slowly and individually show each thing.
There is another very important point, which solves the algorithm. Rhythm, which he creates, helps to combat homogeneity (homogeneity), which leads to "blinding effect". Homogeneity, you can reduce with the rhythm, which will not be monotonous, but it also helps to fight it asymmetric composition.
Thus, despite the fact that the product categories pages are quite large in height, it is compensated by reducing the homogeneity and asymmetric composition. As a result, came out to show 24 products, on one page, with an individual approach in a measured rhythm, and with all this, these pages read quite comfortably.
On the third and fourth level pages, the behavior of the main navigation changes slightly. All menu items except the active item, go under the active menu item and are no longer visible.
This is done in order to free up space that is needed on the pages of this level, because otherwise the menu takes up a lot of useful space, which is so necessary on these pages.
Also next to the active menu item, there is an additional navigation inscription that shows which product group the user is in.
And also in the menu is added a navigation arrow that leads back to the page with all the groups of products in the selected category.
This is done in order to free up space that is needed on the pages of this level, because otherwise the menu takes up a lot of useful space, which is so necessary on these pages.
Also next to the active menu item, there is an additional navigation inscription that shows which product group the user is in.
And also in the menu is added a navigation arrow that leads back to the page with all the groups of products in the selected category.
NAVIGATION
At the fourth level of nesting pages, there are product pages with a detailed description of the item.
In the first section, all the basic information fits in one screen. The basic concept of construction in general is maintained, the only exception is that the left navigation section is added to the content part in the form of text, tables and buttons. This is done for the reason that would fit all the main content in one screen.
On the left side is placed: the navigation box, the header with the name of the thing, a description of the thing, a size table, size selection buttons, a link to the 3D fitting room, price and a button to add items to cart.
On the right is a slider with photos of the item, which consists of a preview and a large photo, which is currently selected in the preview. Slider is working in automatic mode, but when you select a photo in manual mode, the slider ceases to automatically scroll through the photos and you can choose and view photos yourself.
The second section contains answers to popular questions, the ability to ask a question and buttons for sharing this stuff on social networks.
The third section contains a slider with similar products.
In the first section, all the basic information fits in one screen. The basic concept of construction in general is maintained, the only exception is that the left navigation section is added to the content part in the form of text, tables and buttons. This is done for the reason that would fit all the main content in one screen.
On the left side is placed: the navigation box, the header with the name of the thing, a description of the thing, a size table, size selection buttons, a link to the 3D fitting room, price and a button to add items to cart.
On the right is a slider with photos of the item, which consists of a preview and a large photo, which is currently selected in the preview. Slider is working in automatic mode, but when you select a photo in manual mode, the slider ceases to automatically scroll through the photos and you can choose and view photos yourself.
The second section contains answers to popular questions, the ability to ask a question and buttons for sharing this stuff on social networks.
The third section contains a slider with similar products.
The fourth level of nesting pages
GET IN TOUCH
ASK ANY QUESTION
CONTACTS
SOCIAL
ROMAN OSYPENKO © COPYRIGHT 2020
PHONE | E-MAIL