The making of the Delta Bank website

Overview   Process  

First drafts.

delta bank site 01 ideas

An idea surfaces to show a cool minting gadget surrounded by bank product attributes: digits, interest rates, etc.

delta bank site 02 tech

Money Converter concept gets “in production” status.

delta bank site 03 engine

Art director offers a tea jar for the device body.

delta bank site 04 box

The customer needs a gallery of banners, so we place them along the perimeter of each page.

delta bank site 05 homepage

Services-choosing wizard will have a step-by-step format. A thought of short and full-length pages is born.

delta bank site 06 helper

Improving this idea.

delta bank site 07 expand

Polishing up the concept and preparing a presentation for the customer.

delta bank site 08 presentation

Deciding to roll some banners over the main content on the front page.

delta bank site 09 contacts

Sorting out the site's structure. The basic content can be organized by bank client's type or by action: deposit/withdraw. The customer prefers the former, while we are insisting on the latter. As a result of compromise the site has alternative ways to come to each page.

delta bank site 10 sitemap

Prototyping begins.

delta bank site 11 wireframes

Designing deposit and loan wizards animation.

delta bank site 12 card

Locating branch and ATM from a map or list.

delta bank site 13 spots

Working on a switch between short and full page versions.

delta bank site 15 expand

Asking Timur Burbayev to demonstrate what this Money Converter can possibly be like.

delta bank site 16 concept

Picking a tree. The Magic Gold-bearing tree. Wondering how it could be transformed from a cube.

delta bank site 17 concept

And how it will look on the page.

delta bank site 18 homepage

First visualization.

delta bank site 19 tree

Checking how the tree fits the page layout.

delta bank site 20 homepage

Preparing three frames for animation.


Putting together the site map.

delta bank site 22 sitemap

Moving to wizards and calculators. Collecting information on all the products.

delta bank site 23 products

Using a deposit calculator to establish all virtual assistant designs.


Making our final choice.

delta bank site 25 deposit

Shooting photos of the bank staff.

delta bank site 26 photos

Selecting the best shots and touching them up.

delta bank site 27 photos

Finishing mock-ups for the rest of the pages.

delta bank site 28 prototypes

Switching to banners. The ideas from the original concept need some tinkering.

delta bank site 29 banners

First attempt brings quite straight-forward images.

delta bank site 30 banners

Conversation with art director results in more sophisticated metaphors.

delta bank site 31 banners
delta bank site 32 banners

Back to the short/full page switch.

delta bank site 33 expand

The front page evolution.


Drawing download icons. Pdf icon evolution.

delta bank site 35 icon

Error page evolution.


Survey reject concepts.

delta bank site 37 voting

Approved concept. Нравится ли вам новый дизайн сайта?

delta bank site 38 voting

Order a design...