• Websites
  • SG-Trans
  • Calendar   Website  

    The making of the SG-Trans website

    Overview   Process  

    The company transports around 30% of the total volume of gaseous products produced in Russia. The website has to emphasize the status of the country’s leading railroad carrier and demonstrate the scale of the company’s business.

    Deciding to build the concept around the company’s symbol, a fire-breathing dragon.

    First trying to show the size of the gigantic mechanical beast next to a tiny freight train along with some facts about the company’s performance.

    sgt site process 01

    Deciding to show all the figures in the shape of the dragon from the logo. SG-Trans is a large organization that is not shy to talk about its performance.

    sgt site process 02

    Emphasizing the role of SG-Trans in the country’s energy supply: the dragons carry the world on their shoulders.

    sgt site process 03

    The client says that the first design can be improved, although it’s not clear yet what the mechanical dragon will look like.

    Diving into the world of robots. Exploring various drawing techniques.

    sgt site process 04

    Making the first sketch.

    sgt site process 05

    Creating a rapid prototype of the website and presenting to the client.

    sgt site process 06

    The graphic solution is not approved.

    After some consideration and not entirely realizing what he’s getting himself into, the designer suggests to render the dragon in 3D. Finding free models of dinosaurs on the internet to demonstrate the idea. Decreasing the number of polygons to make them look more like a mechanical model, rendering.

    sgt site process 08

    The art director unexpectedly approves the idea. Starting to elaborate. Stocking up on various models: robots, transformers, railroad cars. Taking them apart and putting together in a single model. Assembling an approximate scene for the main page.

    sgt site process 09

    Art director: The face is stupid and it doesn’t look like a dragon. This is a dinosaur, and the client needs a dragon.

    Choosing a more predatory face and giving the dragon a body kit made of freight car parts.

    sgt site process 10

    It’s still a dinosaur and the tank cars look like scuba gear. Dragons must have wings and flames! And also more mechanical details.

    sgt site process 11

    Rendering. Typesetting the mock-ups and presenting to the client.

    sgt site process 12
    sgt site process 13
    sgt site process 14

    The client says that besides liquid petroleum gas, SG-Trans carries oil, petrochemical and steel and coal cargoes. And also that the company’s branches perform repair and maintenance of railroad cars. Which means that there have to be five dragons, one for each service. And yes, it still looks like a dinosaur.

    Deciding what to do next. Maybe, color coding will do?

    sgt site process 15

    The art director asks the designer to go see what dragons look like in the real world.

    sgt site process 16

    It’s clear that we need a new model to continue experiments.

    sgt site process 17

    Color-coding the services.

    sgt site process 18

    Placing the dragons on the main page. Thinking of a way to switch between services.

    Working with the body kit. Cutting up a tank car to make wings.

    sgt site process 21 01
    sgt site process 21 02
    sgt site process 21 03

    The dragon is approved. Making sketches of the key pages of the website.

    sgt site process 22 01
    sgt site process 22 02

    Polishing the details. Working on the appearance of mock-ups, typesetting a lorem ipsum page.

    sgt site process 23 01
    sgt site process 23 02

    Starting to assemble the website.

    At the same time the client asks us to produce a wall calendar with dragons. We start the simultaneous process of creating models.

    sgt site process 24 01
    sgt site process 24 02
    sgt site process 24 03

    Ultimately the calendar comes out in blue shades.

    sgt site process 25

    Adjusting the website mock-ups to match the new color scheme.

    sgt site process 26

    Making the final decision on how the dragons will be displayed on the main page.

    Choosing the best perspectives of the dragons for product pages.

    sgt site process 28

    Rendering and drawing final images.

    sgt site process 29

    Finalizing the typesetting, testing the website, making corrections.

    sgt site process 30

    © 1995–2019 Art. Lebedev Studio

    Order a design...