Logo   Visual Identity   Website  

The making of the Avangard Direct website. Part one

Overview   Process  

Part 1   Part 2  

Creating a Coming Soon page to fill the website while we work on the content.

We consider drawing a large tanker that carries containers with various services.

avangard direct site process 1 01
avangard direct site process 1 02
avangard direct site process 1 03

The client likes the idea. Drawing the graphics, typesetting and opening the page.

avangard direct site process 1 04
avangard direct site process 1 05
avangard direct site process 1 06

Piling up the first ideas for the website.

avangard direct site process 1 07
avangard direct site process 1 08
avangard direct site process 1 09
avangard direct site process 1 10

Why not tell a cargo-related story?

Taking information about unusual freight handled by the company and placing it in the center of the page. For example, a story about how an air ship was delivered.

We want to take it to the extreme, make it more complex and tell about other services in the same way. For example, about jam that a granny sent to her grandson from the States. Or about tanks with transformer robots from China. Or about a relocation of a zoo.

avangard direct site process 1 11

The truck follows the track when the page is scrolled

Here the cargo is going through customs

Then it is being expedited and loaded on a ship. As the page is scrolled, the ship sails with the cargo

The cargo arrives at the warehouse (here we can speak about warehousing services)

Or we can make a report, a photo or a video history of the company.

We can tell how loading and unloading is performed, how logistics schemes are created, what happens to the cargo aboard a ship. It can be filmed in fast motion, in tilt-shift style. Like a miniature world of logistics.

avangard direct site process 1 12

Or maybe introduce it as a military strategy?

Imagine generals discussing an upcoming battle. Soon they will have to fight for the client’s cargo, for shipment of armaments. They have a map before them. They move little trucks, reposition strongholds, warehouses and headquarters. It’s like a war game.

avangard direct site process 1 13

A hand moves trucks, ships, warehouses, containers and customs posts all over the website

This feature shows updated statistics

Imagining how the internal pages would look.

avangard direct site process 1 14

What about a Google Map right on the main page?

There is the company’s main office on the map. Around it are various icons: a truck, a ship, a few warehouses, etc. Clicking an icon opens up brief information about the service. If you zoom in on an office, its employees tell you about logistics maps, cross-border logistics consulting and other services provided by the office.

avangard direct site process 1 15

How difficult it is to move an elephant?

avangard direct site process 1 16

Or we can create a simple and laconic website making it look different from websites of other logistics companies.

Concise presentation of the material and listing the advantages of the company will make the client reach for the phone sooner to finally clear those 48 containers of black caviar that are about to go bad.

avangard direct site process 1 17

Assembling a presentation and showing to the client.

avangard direct site process 1 18

Client: All these metaphors are interesting, no doubt, but a bit too complicated for our clients. We want to be more straightforward about who we are. For various reasons none of these ideas work, but we like certain elements in each of them.

Taking some time to think.

avangard direct site process 1 19

The client remembers that he likes the temporary page with the ship. Developing the idea and bringing it to life with the help of different characters.

avangard direct site process 1 20
avangard direct site process 1 21

One of the variants of internal page design.

avangard direct site process 1 22

Assembling a presentation.

avangard direct site process 1 23

Showing it via Skype. The client says he needs to think, disconnects for 5 minutes, then calls back to say, “That’s not what we need.” Discussing it further to find out that the client associates Kraken with potential dangers to the cargo. The excessive graphical playfulness also doesn’t work, it has to be more serious.

Removing Kraken, cleaning up the mock-up.

avangard direct site process 1 24

Assembling a clickable prototype and making a video.

The client takes some time to consider. The resume: “Now it’s too dry and boring.” We need to add more color.

Notions like “movement” and “moving businesses” are starting to surface in the discussion. The client’s company can move anything, it relocates and transforms objects of any scale. The art director comes up with a metaphor of a plant, of relocating something grand.

avangard direct site process 1 25
avangard direct site process 1 26
avangard direct site process 1 27
avangard direct site process 1 28

Creating a new video.

Demonstrating it to the client.

Client: Imagine two people coming to a meeting, one is wearing an Aramani suit, the other one jeans and a t-shirt. This last one is what you’ve shown us.

Trying to tone it down. Looking for other ideas, consulting the secret advisor.

avangard direct site process 1 29

Why not show logistics as a form of art?

avangard direct site process 1 30
avangard direct site process 1 31
avangard direct site process 1 32
avangard direct site process 1 33
avangard direct site process 1 34
avangard direct site process 1 35
avangard direct site process 1 36

Starting with a blank slate and making more attempts with the help of new designers.

Bad and good.

Using a slider to rearrange chaos into a structure.

avangard direct site process 1 37

A view through the eyes of the cargo.

Showing the cargo in various places and states: at sea, at customs, at a warehouse, on the road.

avangard direct site process 1 38

From simple to complex.

Demonstrating the complexity of typical activities that need to be done to move the cargo. Showing that logistics is difficult, but that the company makes it all easy for the client.

avangard direct site process 1 39
avangard direct site process 1 40

Solved puzzles.

An assembled Rubik’s cube, a sliding puzzle, untangled knots.

avangard direct site process 1 41

We need more containers.

Trying to use pictures formed by hundreds of containers.

avangard direct site process 1 42

A simple problem and its solution.

Transferring the style of illustrations from the temporary page to the world of geometric figures and formulas known to everyone. “The problem,” “Given,” “QED,” “The answer,” just like in school. No main page. We will simply show the first logistics problem and its solution straight away.

avangard direct site process 1 43
avangard direct site process 1 44
avangard direct site process 1 45

Printing out all these ideas and showing to the client once again. The client chooses the ship but asks to work on the graphics.

Part 2.


Order a design...