NaturiSpa
Naturispa is a showcase site for a chain of spas. It is designed primarily as an informational brochure site.
Challenge
Building a site that reflected the calming nature of a spa that was both informative and intriguing to prospective clients. We wanted to mirror the zen-like experience of being at a spa and from a design perspective we set ourselves the goal of using elements, colours and animations that were viscerally relaxing.
Solution
The result is a calming site design that features some unique user-centric animations. The structure is clean and organised into informative sections and the flow of information is logical and clear. The end result is a site we can easily modify and expand upon for future clients.
Design
Typography
For the typography we used ‘Frank Ruhl Libre’, a font designed by Yanek Iontef. This clean and elegant serif font was the perfect choice for a spa website. We paired this with ‘Open Sans’ for the body of the website.
Colour Palette
It was important to use healing, calming colours throughout the site in order to give a sense of relaxation to the user. We choose a forest green for the accent colour supported by an aqua blue and earthy browns.
Features
This sample industry spa site features clean lines and simple, well demarcated sections that relay all the necessary information.
Opening Video Animations
The landing page features a video animation effect on load that engages the user immediately.
A brief introduction then leads on to a longer video introducing the business fully.
Feature Sections
We designed a minimalist feature section advertising the saunas and swimming pool facilties. The icons are custom-themed as per the page palette.
Main CTA
The main CTA is positioned in the middle of the landing page with a slightly more decorative background to draw the user in.
Multi-Levelled Tabs with Sliders
To elaborate on the offer, the page then features a tabbed slider with the choices of Massage, Facials or Reflexology. Each tab has it's own animated slider.
Flowering Animation
The series of informational sections is briefly interrupted by a beautiful flower user-centric animation. The user's mouse movement controls the opening and closing of the flower.
responsivity
The site is designed to be fully responsive on a range of devices. As a brochure site that details treatment lists and prices, it is important that mobile users can access this information clearly & easily.
