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

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.

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.

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.

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.

Remembering to include cross links between the sections.

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.

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

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.

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.

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

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

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

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

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.

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.

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

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

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

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.

Starting to make the header beautiful. Redrawing the medal.

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.

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

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

The type designer suggests several alternatives.

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.