Identity Website

The making of the Khatanga Seaport website

Overview• Process

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.

hmtp site process 01

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.

hmtp site process 02

The art director asks to simplify graphics and add more contrast.

hmtp site process 03

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.

hmtp site process 04

Preparing the first bold design.

hmtp site process 05

Too rough. Decreasing outline width and adding more details.

hmtp site process 06

Having decided with the style, starting to draw the rest of the vessels.

hmtp site process 07

Proportionally adjusting ships’ length based on their real-life dimensions.

hmtp site process 08

Drawing everything in Adobe Illustrator and sending the result to the technologist as .ai files.

hmtp site process 09

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.

hmtp site process 14

Art director: Looks rough. The light should be coming from the top.

Designer: Here, made it more elegant.

hmtp site process 15

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.

hmtp site process 16

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.

hmtp site process 17

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.

hmtp site process 18

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.

htmp site process shleif

Adding some life.

hmtp site process 20
hmtp site process 21
hmtp site process 22

Using After Effects and some code to give life to underwater creatures by making them swim.

htmp site process dolphins htmp site process fishes
htmp site process whale

Deciding to animate the river flow with After Effects, too.

htmp site process waves

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.

hmtp site process 30

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.

hmtp site process 29

Deciding to go with the topmost model of the UFO. Next, drawing clouds of various shapes to decide on the style.

hmtp site process 28

Choosing the clouds and finalizing the rest of the illustrations.

hmtp site process 27

To maintain the sea theme, placing the content of internal pages on ice floes surrounded by smaller pieces of ice and fish.

hmtp site process 10

Drawing all the required pages and sending them to the technologist.

hmtp site process 11
hmtp site process 12
hmtp site process 13

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.