The making of the Fabrikant group website

Overview• Process

Developing the design concept

Going to Ryazan to get acquainted with the factory.

fabrikant site process 01

Sketching the first thoughts.

fabrikant site process 02

Using better ideas in the design concept.

fabrikant site process 03
fabrikant site process 03_1

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_2

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 07

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

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_2

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

Deciding to break down the search results into two columns: matching products and articles.

fabrikant site process 11

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

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

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

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

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

Preparing technical graphics elements.

fabrikant site process 14
fabrikant site process 15

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

Making final changes.

fabrikant site process 17

Opening the website and publishing the announcement.