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

Order a design...