Loading ...

Responses by Joop Akerboom, designer; Aslinur Özkara, producer; and David van Ochten, developer, Superhero Cheesecake.

Design core: With this site for Niarra, a forward-thinking travel company with conservation at its core, we created a premium experience that inspires visitors to investigate different trips, all tailored to their wishes and desires. We used exploratory carousels with fitting imagery that leaves an impression on users, driving them to begin thinking more about the trip they could take. We used design to create well-thought-out journeys that unravel a path dictated by the interactions of the user.

Some core design elements we used are big images, carousels, dotted-line journeys, and a premium feel with the typography, colors and icons.

Favorite details: The way the design goes hand in hand with the subtle motion design to enhance the high-end look and feel of the experience. There are a lot of different components that all communicate with each other in terms of design and motion: for example, the journey that unfolds as soon as you start scrolling emphasizes the feeling of exploring. The size of the project came with its challenges, and we’re very proud of the fact that the whole website offers a consistent experience with beautiful imagery.

Divergent paths: Developers try to reuse code as much as possible. If components conceptually share the same functionalities, it would be nice to write something once so that it can be used throughout the project. We tried this approach for the many carousels this website has. The issue was that, in practice, they differed too much. Writing a general carousel proved to be more harmful to the quality and readability of the code than just writing unique code for each carousel.

New lessons: We’re always trying to push the boundaries when it comes to creating websites. This site contains quite a few unique components on each page, all with some distinct interaction or animation. This meant that the overall performance took quite a hit at first, which led to some heavy research on getting the website to run well on all devices and browsers. That hard work paid off with a better website, as well as some great insights for future projects.

Technology: For the front end, we used CSS, JavaScript and WebGL. We created the animations with the GSAP library.

Special technical features: We wanted to create a couple of brand moments with this website to give it a special touch. We spent a significant amount of time creating the different carousels and hero components, using some of the more advanced front-end techniques like WebGL. Aside from that, we also worked hard on the scrolling part of the website—it features a smooth scroll and triggers animations when they become visible to the user.

niarratravel.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