Developing the design concept
Going to Ryazan to get acquainted with the factory.
![fabrikant site process 01](fabrikant-site-process-01.jpg)
Sketching the first thoughts.
![fabrikant site process 02](fabrikant-site-process-02.jpg)
Using better ideas in the design concept.
![fabrikant site process 03](fabrikant-site-process-03.jpg)
![fabrikant site process 03_1](fabrikant-site-process-03_1.jpg)
Preparing a video for the presentation demonstrating design ideas in motion.
The client approves the concept and asks to add a presentation block to the website header. Suggesting instead to add a video on how each part of a chair is made. Working on the storyboard.
![fabrikant site process 05_1](fabrikant-site-process-05_1.jpg)
![fabrikant site process 05_2](fabrikant-site-process-05_2.jpg)
Photo and video shooting
Going to the factory to take photos. Setting two tasks: we need to create beautiful covers for the page on production stages and film some material for the conveyor animation in the header. First, the covers. Looking for unexpected beauty.
![fabrikant site process 06](fabrikant-site-process-06.jpg)
![fabrikant site process 07](fabrikant-site-process-07.jpg)
Now the conveyor. Photographing as many textures, objects and details as we can to later cut them in pieces and assemble into a single animated image.
![fabrikant site process 08](fabrikant-site-process-08.jpg)
Sending the final video to the technologist to add to the website but later deciding not to use it.
At the same time the designer gets an idea that it would be great to show parts of a chair to demonstrate its complexity. Asking the client to send us an exquisite white office chair, taking it apart and photographing all elements separately. Assembling all the materials into a semi-chaotic composition and putting the chair back together.
![fabrikant site process 09_1](fabrikant-site-process-09_1.jpg)
![fabrikant site process 09_2](fabrikant-site-process-09_2.jpg)
Products from the catalog can be added to the Favorites list that can be sent to a manager for further discussion.
![fabrikant site process 10](fabrikant-site-process-10.jpg)
Deciding to break down the search results into two columns: matching products and articles.
![fabrikant site process 11](fabrikant-site-process-11.jpg)
As we go, we have an idea to create a product card in the form of an overlay that would move out from the right edge of the screen on any page of the website. At any time the visitor can open it up, examine the product mentioned in the article and close it to continue reading.
![fabrikant site process 12](fabrikant-site-process-12.jpg)
Improving the product catalog
To introduce website visitors to as many products in the catalog as possible, we add the Similar Products block.
![fabrikant site process tech_1](fabrikant-site-process-tech_1.jpg)
Realizing that it would be impossible to implement the logic behind it with the current system. The 1C content management system does not provide enough data about products while manually entering all possible matches for each product will take a very long time.
Deciding to use tags which will help the system find similar products. The more common and the less different tags two products have, the more similar they are to each other.
Developing a special tool that allows to quickly enter tags for many products.
![fabrikant site process tech_2](fabrikant-site-process-tech_2.gif)
Now the content manager just needs to set tags based on the product category, name and photographs. Often, products within a single category will have similar and sometimes even identical tags. Which means that all the content manager has to do is copy a set of tags from one product to the next.
![fabrikant site process tech_3](fabrikant-site-process-tech_3.gif)
The implemented tool is very simple, yet provides great results.
Assembling the About section
Deciding to cut down the number of main menu items by relocating some of the information to the About page. Now everything the client needs to now about the factory is available on one page.
![fabrikant site process 13](fabrikant-site-process-13.jpg)
Preparing technical graphics elements.
![fabrikant site process 14](fabrikant-site-process-14.jpg)
![fabrikant site process 15](fabrikant-site-process-15.jpg)
News articles and project pages now contain lists of publications in the left column which allow to quickly read all available materials.
![fabrikant site process 16](fabrikant-site-process-16.jpg)
Making final changes.
![fabrikant site process 17](fabrikant-site-process-17.jpg)
Opening the website and publishing the announcement.