ANXT
Anxiety Awareness - Responsive Website Design & Development
Introduction :
The ANXT Anxiety website aims to offer support and resources for individuals dealing with anxiety.
Designed to demonstrate my design and creative abilities, the site features an engaging 3D parallax effect and a user-friendly interface.
Research & Planning :
I conducted extensive research on anxiety, utilising reliable resources like the NHS and Harvard Health to gather user requirements and insights. This research informed the design, ensuring it was both supportive and informative.
Design Process & Tools
To create a calming user experience, I employed a muted colour palette and gentle animations. The hero section features a 3D parallax effect with a lighthouse image divided into four layers, creating depth and dimension.
Each section is designed with a complex arrangement of div blocks using both relative and absolute positioning for an attractive aesthetic.
Art direction
The art direction for the ANXT Anxiety website was carefully crafted to evoke a sense of calm and reassurance, aligning with the site's purpose of providing support for individuals dealing with anxiety. To achieve this, I selected images from Unsplash.com, a resource known for its high-quality, royalty-free images.
In curating the visual elements, I prioritised images that shared a consistent style and colour palette. Soft and muted tones were chosen to create a soothing atmosphere throughout the site. This cohesive visual language helps to ensure that the user experience is both calming and visually appealing.
The hero section features an image of a lighthouse on a hill, symbolising guidance and stability. This image was masked into four layers to create a 3D parallax effect, adding depth and engagement without overwhelming the user.
By maintaining a consistent aesthetic, the website not only supports the textual content but also enhances the overall user experience.
This thoughtful art direction underscores the importance of visual harmony in creating an effective and empathetic digital space.
Development
Combining the Power of Webflow, Custom CSS & Javascript
Utilising Webflow, I implemented the design with meticulous attention to detail.
Key elements include:
3D Parallax Hero Section: Using scroll animations to simulate depth.
Lottie File Animations: An animated hamburger menu icon and a personal brand animation for the full page menu.
JavaScript: To block page scrolling when the full screen menu is open.
Testing & Launch :
Although the site has not received formal user feedback, it was thoroughly tested for functionality and responsiveness. External links to mental health resources were included to enhance the site's value.
outcome & Results
The ANXT Anxiety website successfully demonstrates my skills in UX/UI design and Webflow development. The site is visually engaging and offers valuable resources for users.
Reflection and Learnings :
This project reinforced the importance of detailed research and user-centric design. Future projects will continue to leverage these insights, with a focus on gathering user feedback to refine and improve the final product.
Conclusion :
The ANXT Anxiety website showcases my ability to design and develop engaging, user-friendly websites. For more information or to discuss potential projects, please get in touch.