• Websites
  • TNK-BP
  • 1.0   2.0  

    The making of the TNK Ukraine website 2.0

    Overview   Process  

    Deciding on the main sections: a gas stations map, promos and news.

    tnk ua process 0 block

    Making a rough sketch.

    tnk ua process 1 main

    Getting rid of the useless map of Ukraine and replacing it with a large illustration.

    tnk ua process 2 top

    Brighter, but still doesn’t make much sense. Adding an interactive feature—now a user can move a little car from city to city learning the addresses of new gas stations.

    tnk ua process 3 top

    The time of day also changes.

    tnk ua process 7 sky

    What if we use the outlines of cars as frames for pictures?

    tnk ua process 8 top

    An outline on an outline.

    tnk ua process 9 top

    Placing the map of the website to the bottom of the page.

    tnk ua process 4 bott

    Nope, it should be on top.

    tnk ua process 6 sitemap

    The news section and illustrations with outlines get rejected by the client. Putting the porn promo section on top.

    tnk ua process 10 main

    Now the center of the page looks like salad. Rearranging the benefits section and combining the pillar with the logo.

    tnk ua process 11 main

    Client: Everything is fine, but we need to add a portrait of the CEO along with a small statement.

    Putting the guy in the right column. Deciding that one-fifth of the screen would be enough for him.

    tnk ua process 12 ceo

    While we were designing, a new promo was launched. Putting the new illustration in the header.

    tnk ua process 13 main

    Starting to work on details.

    Not enough icons (and by the way, what does the second to last one depict: a dumpling or a pillow?)

    tnk ua process 14 pictogramm

    Drawing the car wash illustration.

    tnk ua process 16 wash

    Designing the inner pages

    Working on the pages layout. Putting the website map in a drop-down box on the top of the page.

    tnk ua process 17 menu

    Ending up with an awkward space on the left and the menu that got lost in the right column. Moving the menu to the left. Narrowing down the width of the column.

    tnk ua process 19 menu

    There’s still too much space on the left. Putting the content back.

    tnk ua process 21 menu

    Placing the navigation menu with context-dependent elements in a box that can be hidden if not needed.

    tnk ua process 22 navi

    Making custom layouts for all top-level pages. For example, the users section used to be all about promos, but now we’ve shifted the emphasis to quality control.

    tnk ua process 23 motorist

    Moving the illustrations closer together.

    tnk ua process 24 motorist

    Nailing the press penter section on the first try.

    tnk ua process 25 press

    Having some trouble with the gas stations map.

    tnk ua process 26 azs

    Too much attention given to jobbers. Swapping the jobbers and fuel sections.

    tnk ua process 29 azs

    Now the links to the services and ecology sections have dropped too low. Moving the jobbers section to the bottom of the page.

    tnk ua process 27 azs

    The clone museum now gets more attention than the services section. Swapping their positions.

    tnk ua process 30 azs

    Breaking up the boring two-column layout.

    tnk ua process 31 azs

    In the services section we could’ve done with an illustration.

    tnk ua process 32 service

    But we wanted to make a page describing the services in detail, so we brought in the icons from the main page.

    tnk ua process 33 service

    Adding comments.

    tnk ua process 34 service

    Eventually deciding on a simple list.


    Designing the search page combined with the website map.

    A stock solution to start with.

    tnk ua process 35 sitemap

    Improving visibility.

    tnk ua process 37 sitemap

    Structuring search results

    The first approach—a simple list sorted by whether the word is mentioned in a headline, link or text.

    tnk ua process 39 result

    Adding sorting by the main sections.

    tnk ua process 38 result

    Bringing in levels and deciding to display only the first three results in each group.

    tnk ua process 40 result

    Now the links with the sections names can be expanded to display all results without reloading the page.

    Only the first two and the last result in each section are displayed.

    tnk ua process 41 result

    And now for dessert.

    Designing a 404 page

    First the designer roams in the dark of misunderstanding the essence of the task.

    tnk ua process 43 404

    Then he falls into despair.

    tnk ua process 44 404

    It’s ok. Filling the page with the website map, adding details. Done!

    tnk ua process 46 404

    Let’s ride! :-)

    Along with developing the new version of the website we continue to update the old one

    Task: to make a teaser for the “Buy One Get One Free” beer promotion offer.

    Designer: Beer, nice.

    tnk ua process 47 bottle

    Art director: Don’t mess with the signature orange circle.

    Designer: Maybe put a six on the background?

    tnk ua process 48 bottle

    Art director: Unreadable.

    Designer: Maybe use the whole bottle?

    tnk ua process 49 bottle

    Art director: Looks like it’s on a store shelf.

    Designer: Cold and sweaty?

    tnk ua process 50 bottle

    Art director: Doesn’t make me think about holidays and presents.

    Designer: Here is a present.

    tnk ua process 51 bottle

    Art director: The bottle itself should be a present.

    Designer: Maybe put a ribbon around the bottle?

    Art director: Genius!

    Designer: And we’ll visually link the ribbon to the logo.

    tnk ua process 52 bottle

    Art director: Untied? Meaning someone has already tasted it? Better tie it in a bow. And make the bottle bigger.

    Designer: A double festive bow.

    tnk ua process 53 bottle

    Art director: The ribbon shouldn’t stick out on the right.

    Designer: Nitpicker.

    tnk ua process 54 bottle

    Art director: Want some beer?



    © 1995–2019 Art. Lebedev Studio



    Order a design...