• Websites
  • Gazprom
  • Websites:  Main German
    1.0 2.0 3.0

    The making of the Gazprom website 3.0

    Overview• Process

    Looking at the visitor analytics for the current website and talking to the client. Coming up with primary user role and interests.

    gazprom site3 process 1
    gazprom site3 process 2

    Defining priority tasks that the third version of the website will solve. Deciding to make the presentation of official information more graphic and devote more attention to Gazprom operations.

    Starting the makeover with the press center. Finding out the priority of sections, comparing with the existing structure and reworking it with new data in mind.

    gazprom site3 process 3

    Designing the section based on the updated structure and styles of the existing main page. Thinking of ways to make searching for information in the huge array of events and press releases easier.

    gazprom site3 process 4

    We get the idea to present the materials in a chronological feed, connecting them with tags for convenience.

    gazprom site3 process 5

    Adding tags to the search. Considering a filter of events by years.

    Creating the layout grid.

    gazprom site3 process 6

    Working on the photo albums in the media library.

    gazprom site3 process 9

    The art director and the client approve the mock-ups. Starting to typeset.

    Beginning with the main page. Making the existing structure similar to the press center grid.

    gazprom site3 process 11

    Deciding to introduce Gazprom operations with large banners that go with the event feed. Coming up with ideas for banners.

    Everyone likes the design where the banner goes fully under the event feed.

    gazprom site3 process 13

    Trying various approaches to presentation of projects on the main page.

    gazprom site3 process 14

    Deciding to go with a simple solution and continuing the search for metaphors for banners.

    As we discover new ideas, we keep showering the main page with metaphors and visualizations.

    gazprom site3 process 16

    Assembling a prototype to work out the fine mechanics.

    Moving on to the feed. Apart from news, it also has to feature a fixed set of predefined dynamic blocks.

    gazprom site3 process 18

    Working on adaptability.

    gazprom site3 process 19

    Selecting four primary banners for the main page of the newly opened website.

    gazprom site3 process 20

    Simultaneously working on the variety of internal pages carefully moving the contents of the existing website into the new wrapper.

    gazprom site3 process 21

    Typesetting. Fixing bugs.

    gazprom site3 process 22

    Thinking of a way to make the news feed on the main page more exciting and attractive. Coming up with various styles for news blocks.

    gazprom site3 process 23

    Getting the client’s final approval. Launching the website.