Krostz
A minimalist sample photo-centric site with a snap scrolling function & custom navigation animation.
Challenge
To build a trusted informational website with a snap scrolling function and custom nav bar animation. The build would require an option to add an online shop and payment portal at a later date. To enhance the user experience we wanted to build a clean site with clear navigation pathways.
Solution
A fully functioning photo-centric site with custom development. We also included a 'custom cover' option whereby users could build their own insurance package based on individual needs. It was built with the option to include a shop and payment portal in the future.
Design
Typography
From a design perspective we wanted to display information clearly without making the site text heavy. We chose ‘ Montserrat’ & ‘Monserrat Extra Light’ as they are clear geometric sans-serif fonts. They are easy to read and don't distract from the information on the site.
Colour Palette
For an insurance brand we wanted to signify trust and reliability. We chose black, grey and off-white as colours to accent the photo-centric nature of the site. It was important they didn’t overshadow the images and information being presented.
Features
Scroll Snap
We implemented a scroll snap using the CSS3 property to great effect. This feature can be easily and flexibly implemented into a wide variety of projects. It works well and doesn't require the use of JavaScript.
Navbar Animation
The navbar animation was created using only Webflow animations and the effect is perfect.
Multi-Layered Navigation
We included three separate navigation keystones as part of the information architecture plan for this case study. The sidebar shop & account navigation, the main navigation that we animated and then each section of content has two links one to order the insurance policy online and another that leads to a separate information page.
responsivity
The design is responsive and functional across a variety of devices. The hover scroll is not visible on mobile and tablet devices, however the snap scrolling works on mobile and tablet. Whilst we anticipate most customers would purchase insurance on their desktop, it was important that the information and design was easily transferrable to mobile and tablet use.
