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.

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

The art director approves. Sketching the product catalog.

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.

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.

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.

Putting together a prototype and showing to the client.

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

The technical designer warms up by drawing icons.

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.

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

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.

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.

Asking a colleague to create a model of rails.

Assembling everything into final compositions.

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

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

Putting together a parallax image for the main page.

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