The making of the Kalugatransmash website

Overview• Process

Starting to work on the task to create a modern visual image and a spectacular new website for a machinery plant. The company produces reliable high-tech equipment for railroad repair and maintenance. All produced tools undergo rigorous quality testing. Production models can be customized to the clients’ requirements. The company is proud of its industrial capacity and 120-year history. All of this needs to be covered on the new website.

Getting ready for a trip to the plant to dive into the subject area. In anticipation of the trip, sketching a concept for the main page. First, eye-catching promo blocks with animation and parallax that tell about the quality and reliability of the products. Showing power tools in extreme conditions.

kalugatransmash process 2

Then, more power tools, services and new product design.

kalugatransmash process 3

The art director approves. Sketching the product catalog.

kalugatransmash process 4

It turns out bland. Moving important features of the tools to the front, adding numbers and different presentation formats to the catalog gains to make products fun to choose and compare. Showing all products in one long feed with the promoted ones featured on large banners. Adding some trivia to make it more interesting.

kalugatransmash process 5

Showing the concept to the company management and receiving feedback. The main page does not reflect the plant’s rich traditions, experience, reliability and quality of its products. The products themselves are presented in a narrow way that does not do justice to the true scale of production. Plus, it would be great to have more information about the plant itself. Having received this feedback, visiting the plant.

kalugatransmash process 6

After the visit, we get the idea to show high-speed video of molten metal and operating machines on the main page to create a beautiful and exciting story about manufacturing. These videos will start the main page. Then, we’ll add a level with a panorama of all products and below that, all the levels from the initial design.

kalugatransmash process 7

Putting together a prototype and showing to the client.

The client likes everything. Designing the rest of the pages.

kalugatransmash process 9

The technical designer warms up by drawing icons.

kalugatransmash process 10

Visiting the plant again to film high-speeds video and take photos. Filming schedule is tight and intense, which is why we develop a filming strategy and try to adhere to it. We need to photograph the company’s management, industrial processes, the warehouse of finished products and the most popular power tools.

Thinking about angles and framing beforehand. On one hand, it turns out to be very helpful, on the other it means that sometimes we need to improvise to achieve the planned result.

kalugatransmash process 11

The photographer takes photos of the products from the required angles, the technical designer controls the process remotely.

kalugatransmash process 12

High-speed filming of industrial processes requires a unique approach. Using special equipment including a high-speed camera and powerful light sources that produce steady light output. In only 5 seconds of real time we technically can film one take that would include 10 000 frames and produce 32GB of data. To save resources, we have to carefully think through and prepare each take in advance.

kalugatransmash process 13

After several days of filming and upon return to the studio, we realize that it would be easier to take photos of the parts for the panorama in a controlled environment with proper lighting. Making a request to the client and receiving four huge boxes of brand new parts. Taking photos, retouching, approving, taking photos again and assembling into a panorama.

kalugatransmash process 14

Asking a colleague to create a model of rails.

kalugatransmash process 15

Assembling everything into final compositions.

kalugatransmash process 16
kalugatransmash process 17
kalugatransmash process 18

Since the main page now includes lots of high resolution videos and photos, we need to create a preloader animation.

kalugatransmash process 19

Preparing photos for the catalog, retouching photos for banners to make sure they are the same style.

kalugatransmash process 20

Putting together a parallax image for the main page.

kalugatransmash process 21

Writing the guidelines for the catalog, thinking through navigation, deciding on the layout grid and typesetting the website.

kalugatransmash process 22