The making of the TurkStream website


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

ts site process 01

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.

ts site process 02

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.

ts site process 03

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.

ts site process 04

Art director: It’s year 1990.

Blushing and considering alternatives.

ts site process 05

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.

ts site process 06

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.

ts site process 07

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.

ts site process 08
ts site process 09

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

ts site process 10

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

ts site process 11

Trying to combine the previous two ideas.

ts site process 12

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.

ts site process 13

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.

ts site process 14

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.

ts site process 18

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.

ts site process 19
ts site process 20

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.

ts site process 21

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.

ts site process 22
ts site process 23

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.

ts site process 24

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.

ts site process 25

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

ts site process 26

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.

ts site process 27

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.

ts site process 28

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.

ts site process 29

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.

ts site process 30

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.

ts site process 31

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.

ts site process 33

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.

ts site process 34

Preparing the announcement.

Order a design...