Loading ...

Responses by Hrvoje Grubisic, design director and Karlo Videk, front-end developer, Bornfight

Background: The purpose of the website was to present the work of Mario Dragičević, a Zagreb, Croatia–based photographer and videographer. The website functions as his portfolio and showcases his finest galleries. As Mario mostly works with clients in the fashion industry, the entire website revolves around portraits and fashion photography. In that way, it caters to his primary target audience and main client type.

Challenges: As the website needs to be as fluid as possible, fast loading and preloading media assets were the most important challenges we needed to solve. In addition to that, we had a lot of work with the micro-interactions and animations, as well as triggering custom page transitions upon ending user interactions. The website is filled with various transitions between list views and gallery views, so we paid special attention to make them seamless and streamlined.

Favorite details: We put an emphasis on creating extremely smooth interactions across the entire website. By doing that, we increased the overall user experience and made it more seamless, while at the same time introducing a level of novelty that makes the website different, more immersive and, most importantly, interesting to use and navigate.

Navigational structure: We wanted to achieve a flat navigation structure. It is represented through a slider that enables users to enter a gallery. Then, users can enter the next section by interacting with the navigational element on the bottom of the page. We implemented a horizontal diagonal navigation to add to the dynamics of the placed content and connect that feeling of moving a camera during the photoshoot. We also implemented click and hold interaction. This enabled us to pre-fetch the next page 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.

Technical features: We used ES6 JavaScript on the front-end. Barba.js was used for PJAX transitions between pages. Animations were created mostly with the GreenSock animation platform, while some of the animations were implemented using CSS3 transitions. On the back-end, we used WP, so every smallest detail regarding the content (media and text) is editable in the CMS. We put a lot of emphasis on mobile optimization to make the entire website on mobile as smooth, seamless and streamlined as it is on desktop. This resulted in a Mobile Excellence award by Awwwards.

Anything new: We learned that simple websites and projects can also be interesting, creative and eye pleasing. Everything lies in the mindset of the creators, their vision and common goals.

mariodragicevic.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In