Deciding on the main sections: a gas stations map, promos and news.
![tnk ua process 0 block](tnk-ua-process-0-block.gif)
Making a rough sketch.
![tnk ua process 1 main](tnk-ua-process-1-main.jpg)
Getting rid of the useless map of Ukraine and replacing it with a large illustration.
![tnk ua process 2 top](tnk-ua-process-2-top.jpg)
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](tnk-ua-process-3-top.jpg)
The time of day also changes.
![tnk ua process 7 sky](tnk-ua-process-7-sky.jpg)
What if we use the outlines of cars as frames for pictures?
![tnk ua process 8 top](tnk-ua-process-8-top.jpg)
An outline on an outline.
![tnk ua process 9 top](tnk-ua-process-9-top.jpg)
Placing the map of the website to the bottom of the page.
![tnk ua process 4 bott](tnk-ua-process-4-bott.jpg)
Nope, it should be on top.
![tnk ua process 6 sitemap](tnk-ua-process-6-sitemap.jpg)
The news section and illustrations with outlines get rejected by the client. Putting the porn promo section on top.
![tnk ua process 10 main](tnk-ua-process-10-main.jpg)
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](tnk-ua-process-11-main.jpg)
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](tnk-ua-process-12-ceo.jpg)
While we were designing, a new promo was launched. Putting the new illustration in the header.
![tnk ua process 13 main](tnk-ua-process-13-main.jpg)
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](tnk-ua-process-14-pictogramm.gif)
Drawing the car wash illustration.
![tnk ua process 16 wash](tnk-ua-process-16-wash.jpg)
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](tnk-ua-process-17-menu.jpg)
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](tnk-ua-process-19-menu.jpg)
There’s still too much space on the left. Putting the content back.
![tnk ua process 21 menu](tnk-ua-process-21-menu.jpg)
Placing the navigation menu with context-dependent elements in a box that can be hidden if not needed.
![tnk ua process 22 navi](tnk-ua-process-22-navi.jpg)
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](tnk-ua-process-23-motorist.jpg)
Moving the illustrations closer together.
![tnk ua process 24 motorist](tnk-ua-process-24-motorist.jpg)
Nailing the press penter section on the first try.
![tnk ua process 25 press](tnk-ua-process-25-press.jpg)
Having some trouble with the gas stations map.
![tnk ua process 26 azs](tnk-ua-process-26-azs.jpg)
Too much attention given to jobbers. Swapping the jobbers and fuel sections.
![tnk ua process 29 azs](tnk-ua-process-29-azs.jpg)
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](tnk-ua-process-27-azs.jpg)
The clone museum now gets more attention than the services section. Swapping their positions.
![tnk ua process 30 azs](tnk-ua-process-30-azs.jpg)
Breaking up the boring two-column layout.
![tnk ua process 31 azs](tnk-ua-process-31-azs.jpg)
In the services section we could’ve done with an illustration.
![tnk ua process 32 service](tnk-ua-process-32-service.jpg)
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](tnk-ua-process-33-service.jpg)
Adding comments.
![tnk ua process 34 service](tnk-ua-process-34-service.jpg)
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](tnk-ua-process-35-sitemap.jpg)
Improving visibility.
![tnk ua process 37 sitemap](tnk-ua-process-37-sitemap.jpg)
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](tnk-ua-process-39-result.jpg)
Adding sorting by the main sections.
![tnk ua process 38 result](tnk-ua-process-38-result.jpg)
Bringing in levels and deciding to display only the first three results in each group.
![tnk ua process 40 result](tnk-ua-process-40-result.jpg)
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](tnk-ua-process-41-result.jpg)
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](tnk-ua-process-43-404.jpg)
Then he falls into despair.
![tnk ua process 44 404](tnk-ua-process-44-404.jpg)
It’s ok. Filling the page with the website map, adding details. Done!
![tnk ua process 46 404](tnk-ua-process-46-404.jpg)
Let’s ride! :-)