Degordian loader
Website, digital advertising

ZABA 100 years

Zaba

About the client

Founded in 1914, Zagrebačka banka has been one of the leading banks in Croatia for an entire century. In cooperation with Bruketa&Žinić OM – full service advertising agency, we created a website that would celebrate its 100th birthday and demonstrate a century of its good ideas that remain for the future.

Website concept

Our client wanted a website that would present 46 of their most important milestones during the one hundred years of business. Each milestone represents an event that changed the lives of the citizens of Zagreb for the better. 46 equally relevant milestones is a large number, so we decided to to use icons and old photographs to present each milestone in its own right.

Icons

Every milestone has a strong connection to the city of Zagreb, its architecture, history and traditions. When illustrating these kind of motifs, there is always a risk of making them look static, so to make each one more interactive, alive and keep them stylistically consistent, we decided to use line icons. They enabled us to show even the finest details and still keep the initial design direction- simplicity and sophistication.

zaba icon sketch

Sketch

The first step in creating icons was deciding on the scene it will depict. Our every idea was first created on paper, and then it was just a case of choosing the best one and starting the process of vectorization.

zaba icon vector

Vector

Every icon needed to be clean, distinctive in its details and stylistically consistent, so vectorizing icons was a complex task. Since the icons were to be animated, it was necessary to think ahead and not leave out any details.

zaba icon animation

Animation

We animated the icons to introduce more movement and energy throughout the website and each icon was designed to emulate the character and function of a specific object.

zaba
zaba icon animation
zaba icon animation
zaba icon animation

See the Pen Icon animations using GSAP by Karlo (@kvidek) on CodePen.

See the Pen Icon animations using CSS 3 by Karlo (@kvidek) on CodePen.

See the Pen Icon animations using CSS 3 by Karlo (@kvidek) on CodePen.

See the Pen Icon animations using GSAP by Karlo (@kvidek) on CodePen.

A touch of history

We were fortunate enough to have some authentic photographs from eras of certain milestones, so we didn’t hesitate to incorporate them into the design.

Image separation

To make the photographs come alive and incite the users to interact with the website, we separated the scanned photographs in 3 layers.

How it looks like?

zaba layer 1
zaba layer 2
zaba layer 3
zaba layer fallback
zaba parallax demo

Parallax perspective

Parallax animation simulates a background 3D effect. Give it a go, just move your mouse!

Parallax animation simulates a background 3D effect.

zaba parallax fallback

Website

With simple illustrations and straightforward copy, users can easily explore the bank's history and intuitively navigate through content. Repetitive alterations of dark and bright surfaces create a storytelling rhythm that beautifully complements the presentation of the milestones.

zaba website screenshots

Thank you for watching!

Now that you know everything about the website, we’re happy to tell it’s still up and running.

Go to top
best websites of the world