Logo   Visual Identity   Website  

The making of the Avangard Direct website. Part two

Overview   Process  

Part 1   Part 2  

A new designer is assigned to the project.

avangard direct site process 2 01

Simplifying the menu leaving only links for the basic services.

avangard direct site process 2 02

Art director (to the designer): Don’t think this concept is fine as it is. We need an interesting scenario here, something unexpected, an intrigue.

Designer: The ship arrives (to Saint Petersburg), a cargo is loaded and it sails away. It arrives to another city (like Moscow) at night. What do you think?

avangard direct site process 2 03

Art director: Night is good. I’m not so sure about Moscow though, it makes the scale look too small. It’s better to sail the cargo to Japan, Brazil or someplace else. What’s their longest route?

Finding out that the client often ships cargo to China. That will do.

Drawing Beijing and adding a loading crane.

avangard direct site process 2 04

It would be cool to move a tiger.

avangard direct site process 2 05

Art director: The ship has to arrive at night from the right.

avangard direct site process 2 06

Deciding to tell about all services on one long page. Erken advises to replace the blue color with black which is closer to the company’s corporate identity. Adding information. Each screen will have a unique animation representing the service.

avangard direct site process 2 07

Making scroll animation and showing to the client.

avangard direct site process 2 08

The client approves the overall direction, but still doesn’t like the graphics on the main page.

The crane doesn’t look like a dockside crane and the tiger brings bad associations.

Working on the graphics, drawing a different crane which will now carry a boat instead of the tiger.

avangard direct site process 2 09

Drawing various containers on the ship and adding the air ship that the client actually moved.

avangard direct site process 2 10
avangard direct site process 2 11

The large number represents some interesting statistics

No need to be shy here, Avangard Direct is so cool it can even relocate the Statue of Liberty.

avangard direct site process 2 12

While the main page is being typeset, the work on the internal ones continues.

Designer: Maybe we can make the cargo move around, so when the page is scrolled, the red container drops from one screen to another? First it flies on a plane, then drops down onto a ship?

Art director: No, it would look like the cargo is traveling all by itself.

Deciding to simply make the red container present on each screen.

avangard direct site process 2 13

Starting to work on the graphics for all screens.

avangard direct site process 2 14

For Turnkey Logistics we come up with a metaphor of a table game.

Before:

avangard direct site process 2 15

After:

avangard direct site process 2 16

The client thinks that the road looks like a water pipe. Straightening it.

avangard direct site process 2 17

Remembering about the evolution of Sea Transportation.

avangard direct site process 2 18
avangard direct site process 2 19

Simplifying it down.

avangard direct site process 2 20

Starting to work on Road Transportation.

avangard direct site process 2 21

Nope, one truck carrying the number is better.

avangard direct site process 2 22

And let’s have a freight train coming out of a tunnel.

avangard direct site process 2 23

And a barrier blinking.

avangard direct site process 2 24

Now Air Transportation. Trying to make a view from the inside of a plane and use a slider to change the time of day outside, to allow the visitor decide if it’s day or night. Later discarding this idea due to technical difficulties.

avangard direct site process 2 25

The client says that airplane windows are more about passenger transportation.

Deciding to show a plane that is taking off. Trying to find a suitable aircraft, but many of them look too militaristic.

avangard direct site process 2 26

Choosing a neutral variant.

avangard direct site process 2 27
avangard direct site process 2 28

Illustrating consolidated cargoes which are any cargoes less than 10 kg (22 lbs) in weight.

avangard direct site process 2 29

Starting to work on Multimodal Transportation when a cargo is carried by several modes of transportation.

avangard direct site process 2 30

The client says that the graphics does not reflect the idea of the service. Remembering shell games and deciding that scrolling the page will make the circles change making up different combinations which better reflects the idea of multimodal transportation.

avangard direct site process 2 31

Working on the Customs Services section.

avangard direct site process 2 32
avangard direct site process 2 33

Drawing a picture for Warehousing and Storage.

avangard direct site process 2 34

The client says that a warehouse with a roof doesn’t look modern and asks to draw a different one.

avangard direct site process 2 35

Senior designer: He’s too straight, bend him down a bit.

avangard direct site process 2 36

Now only his legs move, he’s too stiff.

avangard direct site process 2 37

Now his head moves up and down.

avangard direct site process 2 38
avangard direct site process 2 39
avangard direct site process 2 40

Working on other details.

avangard direct site process 2 41

Typesetting, adding small animation as we go, fixing bugs.

avangard direct site process 2 42

Working on error pages.

avangard direct site process 2 43

Opening the website and eating the caviar which has long since cleared customs.



© 1995–2020 Art. Lebedev Studio



Order a design...