GETZ website wins Awwwards Site of the Day

We designed and developed the GETZ website in order to showcase the work of Mario Dragičević, a photographer and videographer from Zagreb. This website was created to serve as Mario’s personal portfolio, so we placed a big emphasis on showcasing photo galleries containing his finest work. As Mario mostly works with clients in the fashion industry and is specialized in portrait photography, the entire website is built around those two large photo categories, and in that way caters to the main type of clients Mario usually works with.

To explore how the website was designed and developed, we sat down with our Front-end Development Team Lead Karlo Videk and Design Director Hrvoje Grubišić who spearheaded the project.

What are you most proud of?

KARLO: I’d say we are most proud of the extremely smooth interactions we created and implemented across the entire website. This enabled us to increase the overall user experience on the web and made it more seamless.

HRVOJE: Another benefit of this is that it introduced a level of novelty that made the website more immersive and, most importantly, interesting to use and navigate through.

What challenges did you need to solve?

HRVOJE: Well, the website needed to feel and be as fluid as possible, so the most important challenge we needed to solve was fast loading and preloading of media assets. In addition to that, we had a lot of work polishing all of the micro-interactions on the website, as well as those special animations that occur on mouse hold.

KARLO: Another thing that proved to be a bit challenging was triggering custom page transitions upon ending user interaction. You see, as the website is filled with a variety of transitions that occur between list views and gallery views, we really had to pay special attention to make them seamless and streamlined.

Were there any hiccups during the process?

KARLO: There actually weren’t any hiccups because we planned the entire process upfront. The process and the approach we decided to follow and implement were clear from the beginning, and we had a precise vision of what we wanted to achieve.

HRVOJE: During the initial phases of the project, we prototyped and communicated quite a lot, so the end product is actually an improved version of the prototypes we created in the beginning.

“Even though this was a smaller project, we really put a lot into it. We polished every element, every animation and every transition to make it as smooth to use as we initially envisioned it, so I’m more than happy that the website got the awards.” – Karlo Videk / Front-end Development Team Lead

Tell us more about the navigation structure.

HRVOJE: Well, what we wanted to achieve is a flat navigation structure. In the beginning, it is represented through a slider that enables users to enter a gallery. When users are already in a gallery, they can go to the next one by interacting with the navigation element that’s placed on the bottom of the page. We also went the extra mile and implemented a horizontal diagonal navigation. By doing that, we added to the dynamics of the placed content, but also connected that feeling to the effect of moving a camera during the photoshoot.

What about the technology behind the web?

KARLO: We used the ES6 JavaScript version and standard in the front-end, and Barba.js was used for PJAX transitions between pages. We created a majority of the animations with the GreenSock animation platform, while others were implemented by using CSS3 transitions. On the back-end part, we used WordPress, and that enables us to edit every single detail regarding the content (media and text) through the content management system.

What special features did you implement?

HRVOJE: One of the special features we implemented are most certainly those click & hold interactions. They are not only interactive, but they also enabled us to prefetch the next page just by hovering on the CTA element – both in the list view and the single gallery view. The next page is fully loaded after the hold animation on the CTA element finishes.

Is there anything else you really focused on?

KARLO: There were a number of things, but I have to single out the large amount of focus we put on mobile optimization. Because of that, the entire website on mobile is as smooth, seamless and streamlined as it is on desktop. Also, this resulted in a Mobile Excellence award by Awwwards, so I’d say we did a really good job.

Did you learn anything new?

HRVOJE: Well, we learned that even smaller, simpler websites and projects can be extremely creative, eye pleasing and interesting to work on.

KARLO: It’s all about the mindset you have when you enter the project. Everything lies in that mindset of the creators, their vision and common goals.

And the awards, or should we say Awwwards?

HRVOJE: Oh yeah, that’s the real icing on the cake. We got all four – the Site of the Day, Honors, Mobile Excellence and Developer Award. I have to say it’s amazing when your work is recognized by the experts, especially the Awwwards panel that’s really top notch.