Reading the materials and making the first attempt in the TurkStream corporate style created at the studio.

The art director asks not to use the map and to think about the connection between the main page and graphic elements of the corporate identity. Trying to do so.

We don’t like that it comes out looking too much like the booklet. We need to build it around the logo. Using a different approach and assembling everything into a prototype as we go.

Art director: It’s like OK, but not exactly the best, since there doesn’t seem to be a main thing, an important message here. Also, the first screen is too dense.

Piling up more designs based on the chosen layout grid and illustrations created by the graphic design department.

Art director: It’s year 1990.

Blushing and considering alternatives.

Art director: A gas pipeline doesn’t mean just a pipe. It’s energy, ideology and everything else. The project also has a surface section. What if we try round tiles? Then we can use them to display as many themes as we need: country flags, icons, etc.

Laying the tiles.

Art director: Cool. Just one thing, it would be great to have some explanation text to appear on mouse hover. Also let’s have the top panel go from edge to edge, that would make it look simpler. And add an “Entire website” hamburger menu.

Refreshing the prototype and demonstrating to the client.

The concept is not approved.

The project is given to another designer. One day of uninterrupted drawing leads to the development of existing designs and some new ones. For example, leafs around the center of the page. Clicking the title rearranges the layout to allow that leaf to fill the entire screen.

Or how about dynamic circles? For example, a circle becomes larger on hover, making other circles smaller or pushing them out of the way.

Or use a banner scroller and slant it at a corporate angle?

Trying to combine the previous two ideas.

Or a superzoom. Showing the pipe on the seabed: underwater dwellers, a robot inspecting the pipe, a crab crawling. Scrolling the page zooms this picture out until it becomes a map that shows the pipeline connecting Russia and Turkey.

Art director: All of these ideas look too heavy. Simply solve the task yourself without looking back at any of the previous designs. Your only resources are the printed covers and your own head.

Applying the new approach, using the ring from the approved cover but trying not to overload it.

Ring segments lead to key sections of the website. Assembling a prototype to demonstrate the mechanics.

Art director: Yep, looks old-school enough.

Demonstrating to the client. The client accepts the concept but asks to make some corrections. Adding links to an iPad presentation, likes, rotating trivia and general information about the project.

Making an attempt at the internal page of the website. Using the version created by the previous designer that the client liked as a starting point. Deciding to marry it with the main page.

At the same time trying to work on the contact information page. To make it more interesting and functional, deciding to expand the map on hover.

The client accepts the page with the expanding map, but the project page goes back for improvement. Trying to add a timeline and the corporate slant.

Now we need to marry the website map with the approved concept, put everything in order, decide on the list of pages and brief contents of each one.

Starting to read a lengthy document which describes the client’s view of the website contents. To make comprehension easier, breaking the document down into a visual chart and writing brief notes for each block. Now we can dig in. The most difficult part is the projects section. Singling out two major directions: advantages (story of the old pipeline, new requirements and how everybody will be happy once the project is completed) and technologies (technologies, pipes, laying depth, uniqueness and innovations). Merging the ecological information block into the sustainability section, throwing the rest away, combining smaller pages together.

Now that we know the maximum page depth, we can start thinking about the internal navigation on the website. Trying out various designs on the updated projects page and half-populated technologies page.

The designer goes on vacation, the project is picked up by his colleagues.

Analyzing the structure and contents of the materials, understanding solutions proposed by previous designers. Creating a new file in InDesign and arranging all the content by pages.

We have already drawn a bunch of illustrations for the project at the studio, now we need to find a way to showcase them all on the website. Examining the material.

Distributing the images by pages and quickly typesetting the content on several main mock-ups.

The art director asks not to use graphic letters. Removing the letters, making the final decision about the layout grid and designing a lorem ipsum page. Fine-tuning text styles for the document, it will make future work easier.

Sending the lorem ipsum page for assembly and starting to work on the rest of the mock-ups. On the construction technology page we want to use a slider made of two isometric pipe-laying ships. Arranging the vessels, showing the location and mode of operation of the slider. Drawing controls. At the very last moment we have to abandon one of the ships.

The project page has to feature a pipeline installation diagram. The required illustration has already been created at the studio, adding it to the page. Also trying a new variant that looks like a satellite image.

The art director is not against the space idea, but the picture will need some correction. Which means that for now we have to use the flat map and move on to other mock-ups.

Drawing a simple diagram for the advantages page.

Assembling the sustainability section. Preparing all the required illustrations.

Meanwhile, some of the pages have already been assembled and uploaded to the server. First problems start to come up. For example, the main page falls apart on ultrawide screens even when we try to rearrange blocks or change typeface size dynamically. Trying to rearrange. Also creating final versions of the images and coming up with some nice hover effects.

The main page looks nice on any screen width now.

Moving on. We want the website to present a coherent story about the project. To make sure page breaks do not obstruct the reading, adding smooth transition to the next page in the footer.

Typesetting and assembling the rest of the mock-ups. Finalizing all the small graphics.

Launching the website in time for an important client’s exhibition and continuing to work.

The process of pipeline construction gives us lots of interesting photos. Which is why we decide to create the photo gallery backwards: instead of a list of albums, we show the most recent (or selected in the website administration system) photo full-screen. Pictures are arranged into an endless loop, the albums change automatically. Adding a pseudolink to the heading opening a pop-up with album navigation.

Keeping the expanding map feature on the contact info page, but using it only on hover to link to a proper Google map.

Adding an ROV to the 404 page.

Going over all the pages again, catching bugs, making corrections.

Preparing the announcement.

© 1995–2020 Art. Lebedev Studio

511 Avenue of the Americas, New York, USA, NY 10011

mailbox@artlebedev.com