Ad campaign   Website  

The making of the Chance website templates

Overview   Process  

The site absolutely must be moving in all the meanings. So we take off to explore country roads, city streets, and beyond, day or night.

chance site process 01 sketch

Let’s start from the car dealership.

chance site process 02 sketch

Charting your route across the main page using standard browser elements. Horizontal scrolling is the new steering.

chance site process 03 sketch

Running some errands on the way back from the weekend house—bank, office, and gas station should do it.

Some finishing touches and it’s ready to be shown to the customer.

chance site process 04 sketch

Test driving the standard screen resolution. GPS is placed at the bottom.

chance site process 05 sketch

Adding horizontal scrolling to the “perfect retirement” page.

chance site process 10 old

Features page receives the same treatment.

chance site process 11 price

The concept gets a green light. Proceeding to the site map details.

chance site process 20 sitemap

Close, but too blah.

chance site process 21 sitemap

Recovering the proper sequence.

chance site process 22 sitemap

Warmer.

chance site process 23 sitemap

Warmer yet. The scheme is too busy and in need of pictograms.

chance site process 24 sitemap

Going on multiple tracks from here on: Nikita Nikitin is cruising for illustrations for technical features, Anton Aralin and Sergey Pozhidayev team is up for quite a ride figuring out schemes, while Mark Kozhura is enjoying scenery and taking pictures.

First round of distributing data among the site’s inner pages.

chance site process 30 inner

Assembling the header.

chance site process 31 inner

Zooming in on details

chance site process 32 inner

Steering a viewer’s attention around.

chance site process 33 inner

Laying out sample pieces.

chance site process 34 inner

Approving the grid.

chance site process 35 inner

Now to fill placeholders with illustrations. The only photo available so far is the car, so the rest is made up on the spot from what we had on hand, namely, white backdrop and paper cutouts.

chance site process 36 inner

Quick sketch.

chance site process 37 inner

Cutting the elements.

chance site process 38 inner

Still need to work on headers and pseudo pop-ups.

chance site process 30 plate

Not on the same track with the rest, stylistically speaking.

chance site process 31 plate

The header draws too much attention.

chance site process 32 plate

Too subtle now.

chance site process 33 plate

Nice, but overcomplicated.

chance site process 34 plate

Neat, let’s leave it like that.

What about technical specs?

chance site process 40 tech

Have to break it down to basic ingredients.

chance site process 41 tech

This is some kind of a hodgepodge.

chance site process 42 tech

It’s still a mess, take it one at a time.

Picking the motor.

chance site process 43 engeen

Selecting the body.

chance site process 43 sedan

Loaded weight.

chance site process 44 weight

Mileage.

chance site process 45 fuel

Audio.

chance site process 46 music

Cool.

At the same time, a photo shoot starts on Novokuznetskaya street.

For the winter scenes we naturally decide to skip the field photo session and to use modeling of all the desired locations instead.

Reference:

chance site process 60 alfa

Rolling both models in into a photo pavilion.



Preliminary shoots.

chance site process 65 ex

More.

chance site process 66 ex
chance site process 64 photo

Ready, set, camera!

chance site process 67 city
chance site process 68 sign
chance site process 69 street

Transporting the same effect to the main page.

chance site process 84 main

Adding drop-down menu.

chance site process 85 menu

No, this one.

chance site process 86 menu

Embellishing with extra tiny illustrations.

chance site process 87 menu

Crash-test as a grand finale! Checking the car’s safety. Scoring 10.9 out of 16.

chance site process 90 crash

All we have left to do now is just to trash the sedan, color all frames with five corporate shades, and throw a proper speech bubble in. Toying with the bubble wordings.

chance site process 88 crash

The second will do.

chance site process final

Order a design...