The making of the Rossia Jewelry House website

Overview
• Process


Getting the new logo and brand book from the client.

adamant process 01

According to the client, the About Company section of the website and the online store are equal in their importance, which we should take into account creating the concept. Deciding to divide the website into two independent parts.

adamant process 03 1

The general approach is clear. Finishing drawing the concept and presenting it to the client in the form of a detailed prototype.

The client approves design, starting to draw the layouts.

The store part is more complex technically and much larger in volume than the About Company section, which leads to the development of the store lagging behind. Deciding to launch the website first and open the store later.

Preparing the layout of the main page.

adamant process 04

Jewelry is mass-produced on Adamant factory. We want to show all the stages of production in maximum detail. Since it’s easy to identify a repeating action in almost all of manufacturing processes, we decide to use looped videos instead of pictures to show them. Using Coub web service as a starting point.

adamant process 05
adamant process 06

Paying special attention to five key chain weaving patterns. To make the page shorter, grouping all weaving types into a compact block with a switch to choose one of the machines.

adamant process 07

Creating a list of all key stages before going to the factory. The designer prepares a document with pictures which the client uses to fill in the missing texts and make corrections to the scenario.

adamant process 08

Initially, the About Company section of the website was supposed to be in the form of one long page. But the volume of information exceeds our expectations. Deciding to create subsections, increasing the number of pages to seven.

adamant process 09

The section on handmade jewelry appears too informal to the client. Recreating the layout adding a video with detailed demonstration of handcraft. In contrast to the looped videos, this one will have a story.

adamant process 10

Starting to create graphics and videos. Diving deep into the subject matter is always a prerequisite for good results. First, going on a tour of the factory: looking at the heaps of gold in warehouses, smelling the melting metal, understanding production of hollow chains and weaving patterns.

adamant process 11

We will use machines as switches in the section on manufacturing. To make cutting out small details easier, making a couple of photos, “outlining” the machine with a white backdrop.

adamant process 12

Carefully retouching the 24-megapixel photos even though the final image will be no more than 300 pixels high.

adamant process 13

Having cleared all the details, starting to even out the color and lighting.

Overall, we have slightly less than 30 looped videos. The Magic of Mechanical Weaving is so enchanting that we decide to make two or even three Coubs for each machine.

While it’s easy to single out a looped fragment of machine operation, dealing with scenes with many people forces us to use masks and layers.

adamant process 15

Creating a channel on coub.com and uploading all the videos to test them on the web page mock-up. Simultaneously preparing audio and video tracks to allow the client to use them on their own channel.

adamant process 16

After the work on manufacturing facilities of Adamant is done, we’re going to Sirin where we film creation of handmade jewelry. Uploading the materials to the client’s channel.

adamant process 17

Preparing a picture of the façade for the main page.

adamant process 18

Drawing colored miniatures.

adamant process 19

And monochrome icons for pages on chain production.

adamant process 20
adamant process 21

Fixing bugs and launching the website.


Order a design...