Project: Arcteryx Landing Pages

Sites:

• Norvan
• Litric
• Films
• Product Advice

Objective:

The objective of the project was to create multiple landing pages for Arcteryx's high-end outdoor clothing products. The focus was on incorporating intricate animations and interactive elements to keep users engaged. The challenge was to accurately translate complex design layouts into functional landing pages.

Technologies Used:

The projects were developed using React. For tooling and build optimization, Webpack was initially used, and later replaced with Vite to enhance the developer experience. Tailwind was used for Litric and Product Advice, while Films and Norvan used Styled components.

Challenges:

One of the main challenges encountered during the development process was the complex server configurations of Arcteryx. To address this, a specific folder structure needed to be outputted. Initially, Webpack was used to achieve this, and later, the entire development process was overhauled to improve efficiency and streamline the workflow, utilizing vite and my own custom vite plugin.

Design and Development Approach:

The project adopted an agile methodology to tackle the complex design layouts provided by Arcteryx. Extensive research and testing were conducted to ensure the achievability of the designs within the given timeframe. Attention to detail was paramount, as the goal was to create landing pages that closely matched the designer's vision and arcteryx high end image. The iterative process allowed for continuous refinement of both the designs and the development implementation.

Key Features and Functionalities:

The landing pages incorporated a range of interactive elements to enhance user engagement. Animations were implemented using Lottie and GIFs, providing captivating motion effects. Additionally, small video loops and image slides were utilized to showcase the products effectively. Scroll and hover interactions, along with button interactions, were incorporated to create an immersive and intuitive user experience. The landing pages were designed to be fully responsive, ensuring a seamless browsing experience across different devices.

By combining meticulous attention to detail, agile methodology, and the integration of interactive elements, the Arcteryx landing pages successfully captured the essence of the brand's high-end outdoor clothing products while providing an engaging user experience.