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.
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.
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.
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.
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?
Parallax perspective
Parallax animation simulates a background 3D effect. Give it a go, just move your mouse!
Parallax animation simulates a background 3D effect.
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.
Thank you for watching!
Now that you know everything about the website, we’re happy to tell it’s still up and running.