The making of the Our Victory. My Story website for Gazprom

Overview   Process  

Getting the task from the client: to refresh a page about war veterans on the Gazprom website, adding memoirs of employees related to their relatives who took part in the war.

Some of the veterans have their photographs missing, so we start by choosing placeholders for the mosaic.

gazprom our victory process 01

Art director: Too detailed. If we include collars, there’s no reason why we shouldn’t have eyes and noses too. Let’s go with simple silhouettes.

gazprom our victory process 02

Art director: Too cartoonish and the proportions are wrong.

Deciding to use a symbol instead, like a branch with a ribbon. Remaking the section and showing to the client.

gazprom our victory process 03

The client doesn’t like the fact that the employees’ memoirs are secondary to autobiographies of veterans. The two projects have to be equal.

Dividing the page in half. The part with the memoirs about veterans gets its own name: Our Victory. My Story.

gazprom our victory process 04

Remembering to include cross links between the sections.

gazprom our victory process 05

Art director: That’s as cookie-cutter as it gets. If we create such layouts, our grandchildren will have nothing to remember us by.

The project goes on holiday. Several months later it is picked up by a different designer.

Trying to come up with a general composition for the main page, to include both veterans and relatives.

Adding the connection with the gas industry.

gazprom our victory process 07

Starting to work on the internal sections. The cinema idea is reborn. Choosing a color shade for each section.

gazprom our victory process 08

The client decides that the sections cannot be equal, the emphasis must be on the memoirs. Trying a photograph and a cinema hall for the role of the main image, the photograph wins.

gazprom our victory process 09
gazprom our victory process 10

The task changes yet again: now we need to turn the memoir section into a separate website. Cleaning the layout from all the excessive elements yet trying to keep the core intact. Replacing the logo with a Patriotic War medal. Replacing calipers and blueprints with items of everyday soldier life.

gazprom our victory process 11

Simultaneously carefully recreating the history page, changing accents in the title.

gazprom our victory process 12

Thinking about ways to display standard elements: video and audio clips, footnotes and references, quotes from letters from the war front.

gazprom our victory process 13

Preparing additional pages for search and error messages. Deciding to draw them with a slightly different background.

gazprom our victory process 14
gazprom our victory process 15

Everything looks OK although slightly boring. Adding volume to the history. Also changing the typeface of the headings.

gazprom our victory process 16

Developing the volume idea so much that it turns into a “memory cloud,” an alternative view of the main page. Changing the heading typeface once again.

gazprom our victory process 17

Trying the parallax effect and attempting to enlarge objects on mouse hover.

Art director: Feels a bit schizophrenic but let’s give it a try.

The client likes it, though the “scattering” feels toyish. Enlarging the photographs. Then again. And again. Showing all items in real size. Asking the photographer to take pictures of items next to things of known size.

gazprom our victory process 19

Studying the most popular screen resolutions, collecting information on real dimensions of the objects. Determining envelope sizes using postage stamps.

gazprom our victory process 20

Finally the “scatter” turns into a “text path.”

gazprom our victory process 21

The client asks to add another link to a friendly resource. Trying it on.

gazprom our victory process 24

Nope, the footer becomes too crowded and we want to make sure we won’t have to remake everything if there should ever be a third banner. Deciding to place them on a separate level.

gazprom our victory process 25

Starting to make the header beautiful. Redrawing the medal.

gazprom our victory process 22

Adding a bit of noise to the background to create a tactile texture. Calming down the conspicuous search bar, removing the shadow from the view switch and redrawing its icons. Slightly blurring the heading shadow.

gazprom our victory process 23

The art director suggests to use hand-written text for the heading. The type designer gets to work.

gazprom our victory process 26

Art director: Compare it to the current text. It has to be equally convincing.

The type designer suggests several alternatives.

gazprom our victory process 27

Art director: Number 4 can be finalized, the bottom looks OK. Although the top stroke of the letter Н isn’t sprawling and bold enough. In Number 5 the stroke is also too schoolish.

Finalizing the fourth design.

Going with the last version.

Order a design...