The making of the Credit Bank of Moscow website templates

Overview• Process

Looking at the current website, gathering information and hypotheses on a board.

mkb process 1

The senior designer suggests a concept: the website will be divided into two parts, content on the right and a cover on the left. Residents of Moscow and the city itself will become faces of the bank while a blue and red gradient will tie everything together.

Approved. Starting to draw the final mock-ups: a lorem ipsum page as well as navigation and product pages.

mkb process 3

Finalizing the make-up of the main page and its animation.

We want to make it even more interesting. Let’s have the character in the foreground move and interact with the viewer. Checking to see if the idea is viable.

Impressive, but too heavy to load and too time-consuming to prepare. Putting the idea away for now. Preparing guidelines for shooting photos and videos.

mkb process 6

Drawing pages for branches and ATMs, payments and transfers and service packages. Keeping the mobile version in mind from the start.

mkb process 7

The bank adheres to the concept of offering a single product with adjustable parameters. Creating a card selection wizard and a comparison table for the page on credit cards.

mkb process 8

Putting everything together in a prototype, making changes and giving it to the technologist.

mkb process 10

While the typesetting is in progress, the client decides to replace the photos with videos and not to use the red and blue shading. We need to find images of products for the videos. Starting the search.

mkb process 11

Thinking about details and animation.

mkb process 12
mkb process 13

The client asks us to suggest another hover effect for second-layer cubes on the main page.

Receiving the final videos from the client, converting them into the required format and adding to the layout. Completely abandoning the gradient. Considering making the video appear gradually when a page is opened for the first time.

mkb process 19

Putting together the templates, fixing bugs, testing, making changes and handing off the prototype.

mkb process 21