• Websites
  • Pulkovo
  • Logo   Navigation   Website  

    The making of the Pulkovo Airport website

    Overview   Process  

    Getting started. Determining basic user groups and developing user scenarios.

    pulkovo site process 01

    Making a website map.

    pulkovo site process 02

    Laying out main sections.

    pulkovo site process 03

    Starting to work on the concept.

    Moving from the specific to the general. Thinking on the central element of the main page—a recent flights schedule with current status.

    pulkovo site process 04

    Coming to an idea to alter the logo depending on the destination point.

    pulkovo site process 05

    Attempting to peek into the future.

    pulkovo site process 06

    Trying on an alternative style.

    pulkovo site process 07

    Maybe focus on the new terminal building?

    pulkovo site process 08

    Visiting the unfinished terminal, deriving inspiration from its architecture, trying to link website elements with the architectural shapes.

    pulkovo site process 09

    Creating an isometric template with elements turning flat when clicked on.

    pulkovo site process 10

    Putting pseudo-3D photos in the background.

    pulkovo site process 11

    Why don't we breath some life into the layout by bringing in a picture of a flight attendant?

    pulkovo site process 12

    Putting everything on one long page.

    pulkovo site process 13

    Art director: No one’s going to scroll through all this.

    Making a more compact version and creating a more true-to-life flight status chart.

    pulkovo site process 14

    Art director: It was better before.

    pulkovo site process 15

    That’s better. Adding a slider, taking photos, presenting the concept to the client.

    pulkovo site process 16

    Making the Travel Information page and thinking what to display on high-resolution screens.

    pulkovo site process 17

    Designing a drop-down flight details box.

    pulkovo site process 18

    Client: And where is Saint Petersburg? It looks like any other city's airport website. And it’s gloomy.

    Making the design lighter and adding more of St. Pete.

    pulkovo site process 19

    No, now it’s too much. Going back to a more neutral version.

    pulkovo site process 20

    Putting together a sample page.

    pulkovo site process 21

    Finalizing the main page, changing the blocks’ shape and drawing a picture of the terminal.

    pulkovo site process 22
    pulkovo site process 23

    While the main sections of the website are being put together, thinking on the airport map. Studying examples of other airports’ plans.

    pulkovo site process 24

    There are two main approaches: a flat bird's eye view map, and a 3D isometric map.

    pulkovo site process 25

    On the one hand, the flat map is easier to make and to update, and it can be linked to Google maps. On the other hand, the terminal has four floors, and it’s easier to show routes and connections between the floors on the isometric map.

    Deciding on the isometric map with flat floors. Drawing it out.

    pulkovo site process 26

    Putting the map to the website, adding a list of locations, search field and directions.

    pulkovo site process 27

    Explaining the task to the technologist.

    pulkovo site process 28

    Adapting all navigation icons for the small version of the map.

    pulkovo site process 29

    Moving on. Bringing a routes map to the Destinations section.

    pulkovo site process 30

    Working on the rest of the pages.

    pulkovo site process 31

    Going back to the main page. Working on the banner, flight status chart and information blocks.

    pulkovo site process 32

    Determining how the flight board works and how the status of flights is updated.

    pulkovo site process 33

    Taking pictures for the Travel Information page.

    pulkovo site process 34

    Making banners for internal pages.

    pulkovo site process 35

    Preparing icons for the Travel Information section.

    pulkovo site process 36

    Building a 404 page based on the terminal's navigation signage design.

    pulkovo site process 37

    Fixing bugs and testing the website.

    pulkovo site process 38


    © 1995–2019 Art. Lebedev Studio



    Order a design...