One of the company’s main advantages over its competition is the ability to satisfy all requirements of their clients thanks to its unique equipment. Khatanga’s fleet includes both shallow-water ships, sea vessels and barges.
Deciding to build the concept around a graphic representation of the fleet’s abilities implemented in the form of an animation played on page scroll.
Preparing a presentation video explaining the idea and the mechanics behind it.
Getting the approval with small adjustments to the story. Implementing the updated video on a storyboard.
The scenario is approved. Meanwhile, the work on the company’s corporate style based on simple and strict graphics is coming to an end at the studio. Deciding to make sure we follow it on the website, too.
Starting the search for an illustrator. The first attempt.
The art director asks to simplify graphics and add more contrast.
Still not what we need. Deciding to invite another illustrator.
Meanwhile, the project’s designer is working on illustrations for the Fleet section. First of all, we need to study the vessels and their types.
Preparing the first bold design.
Too rough. Decreasing outline width and adding more details.
Having decided with the style, starting to draw the rest of the vessels.
Proportionally adjusting ships’ length based on their real-life dimensions.
Drawing everything in Adobe Illustrator and sending the result to the technologist as .ai files.
Meanwhile, the second illustrator is starting to work on the appearance of the main page. The graphics should be minimalistic, following the style of the company’s logo and icons.
Showing the chosen course to the art director.
Art director: Looks rough. The light should be coming from the top.
Designer: Here, made it more elegant.
Art director: Slightly better. But our task is not to create douchebagish graphics. It has to be simple, but elegant in its own way.
Taking the time to look at reference images of the ships, carefully studying their appearance and offering a more accurate design.
Art director: Yep, that’s like five times better.
Swimming on.
According to the scenario, the ship is sailing in the northern waters, it gets in poor conditions which it successfully overcomes, transfers the cargo to a river vessel which in turn enters a river mouth, swims down the river and unloads in a port.
Breaking down the main scenes frame by frame and showing to the client.
The client approves the style and gives some feedback.
The river bank is too well-equipped, it shouldn’t be. Removing port cranes and rails, adding a pontoon.
Moving on.
The animation, just like static graphics, is created in vector. Some simple things can be animated with code, but quality result requires different tools.
Opening After Effects, installing a plugin for exporting animation in SVG and working out nuances. Animating the smaller vessel’s wake to make movement more noticeable.
Adding some life.
Using After Effects and some code to give life to underwater creatures by making them swim.
Deciding to animate the river flow with After Effects, too.
As we work on the illustration, we occasionally come back to certain ideas and improve them until we arrive at a result that makes everyone happy.
We get the idea to add life to the fleet page by using small objects: clouds, icebergs, everything that a ship might encounter. Inviting yet another illustrator to give us some help.
Starting with a UFO easter egg. Looking at what the aliens usually prefer and drawing accordingly.
The latter one looks more stylish. Elaborating it. Scaling down the sketch. We can’t change the outline width as we need the illustration to follow the style of the ships. But if we simply scale down the image, black lines will blend together. Deciding to avoid this by decreasing the level of detail.
Deciding to go with the topmost model of the UFO. Next, drawing clouds of various shapes to decide on the style.
Choosing the clouds and finalizing the rest of the illustrations.
To maintain the sea theme, placing the content of internal pages on ice floes surrounded by smaller pieces of ice and fish.
Drawing all the required pages and sending them to the technologist.
After all the work has been finished, we realize that the animation in the footer is the only raster animation that’s left on the entire website. Replacing it with an SVG sprite to make sure there is absolutely no raster remaining.
