Meet Vladimír Kotouza – The Senior Creative Designer behind the ‘KIA 20yrs in Czech Republic’ One Pager
The One Page website combines good photography, illustrations and parallax scrolling ending with an offer of a test drive.
I caught up with creative lead Vladimír Kotouza, where we talk about his role, the build, deadlines and designing for parallax effects & transitions.
Hi Vladimír! To start can you please tell our readers where you are from and what you do for a living?
I was born at the past century on warm, sunny shores of the Black Sea. I moved to the Czech Republic at the age of fifteen.
Left college in the first year. Moved to Prague to start work as a creative designer for great internet agency Digital Vision/Media Factory. Stayed loyal by far. Six years and counting.
The ‘Kia 20yrs in the Czech Republic’ Landing Page is really impressive – what was your exact role in this build and who else was involved?
I was the creative lead and the graphic designer of the project. I also worked with an innovative and experienced HTML developer. We worked together on animation timing, lots of details, trying to find sleek and smooth mouse over effects and transitions.
How long did the whole project take — from initial designs till launch?
Our agency got strict deadline from a new client. Some kind of endurance test, I guess? That’s fine with me, it’s more interesting that way :- )
Two key visuals and short brief with list of KIA’s Anniversary Edition benefits — that’s all we had at the beginning.
No time to waste! I decided to create a microsite based on full screen photos, but it had to be something more than a simple slideshow. I wanted to bring life to static images.
I started to choose photos that allowed me to separate different parts of it, to create parallax effect or simply move objects around. At the same time, the chosen photos had to represent all the benefits of the Anniversary Edition models.
After the core part of the microsite was created, I started to design the intro crossroad to give a visitor possibility to choose the model, and then put some kind of an intro at the beginning (a transition between crossroad and slideshow, actually).
It took me less than a week to bring all of my ideas to life and to design all screens, parallax layers, UI elements and etc. I also had to retouch and “vectorize” some photos to reach draw-like transition effect.
Coding the site took about the same time. Including catching bugs, mastering browsers compatibility and common resolutions.
Thanks for the great insight, definitely a lot of effort involved and it shows. There are so many levels of parallax effects and transitions. How does one design for animations — multiple PSDs and layers?
Yeah, pretty much that way. Preloader, overlayers, mouse over effects, UI elements and parallax layers — all that was separated to multiple PSDs to let the developer work independently on each part of the website. It’s good for time management. But for me, as a web designer, it’s more comfortable to operate with only one PSD.
Working on powerful computer with quick SSD drive allows me to have all of the elements at one place, here and now ready to edit. One ring to rule them all! Damn, I mean… one PSD to cover all my needs :- )
SSD FTW! Lovely touch with the car lights turning on with cursor hover. As a graphic designer do you pitch this UI touch in the initial designs or is this a feature that someone else pitches down the development line.
Yep, that was my idea. Same as all of the animation phases. I had to avoid usage of Photoshop’s blending modes to let the developer easily convert car lights to transparent PNG file.
Thanks for chatting with us Vladimír, where can our readers follow you online?
Thank you, Rob. And thanks to OPL to “Most Loved” our microsite! Don’t forget to visit another two KIA Landing Pages I designed for the same Anniversary campaign: KIA Select and KIA cee’d Family. Some of my other works can be seen on our agency website or Facebook.