Take a Hike
A hiking website designed to showcase a number of interactive features.
Challenge
To build an attractive hiking-themed site with a delightful scrolling parallax effect that relies on layered illustrations. We also wanted to implement an infinite slider with hover effects as well as an informational box that opens on user scroll.
Solution
All features were successfully implemented. The scrolling parallax in particular works very well with illustrations as there are no real limits to the amount of potential levels and layers that can be animated. The effect is arresting and engaging for users.
Design
Typography
We wanted this site to feel fun & youthful. We chose ‘Bungee Shade’ as the main title font which encapsulates that tone. We paired it with ‘Bitter regular’ and ‘Bitter bold’ which add some solidity to the website body.
Colour Palette
Taking inspiration from Arizona hiking trails, we blended burnt oranges with muted peach tones and aqua blues to create the impression of a sunset hike near a lake.
Features
The site is designed as an informational brochure site and potential shop, but the primary features are the three interactive ones we previously mentioned.
Parallax Scroll
The parallax effect is best known for being used with fixed images on sites, but more rarely is it implemented as we have done with multi-layered illustrations. The effect has huge flexibility and scope for customisation. The scroll speed and the levels of 'fixedness' of each of the layers can all result in huge differences in how the effect looks and works. The result in most cases is interesting and definitely enhances the UX.
Infinite Slider
The slider works well, when it reaches the end, it loops around again to the first item. There is a development flaw here though, as in order to create the infinite effect, we must double up all the slides, which is not best practice, so perhaps a custom JavaScript solution would be better.
Information Box Animation
As the user scrolls down to the particular hike information, the slider image animates out and the effect is super.
responsivity
The design is currently only partially responsive. The main purpose of this project was not to develop a final product but to explore the aforementioned features. The features themselves are fully responsive, the parallax scroll works perfectly on mobile and tablet, as do the other animations.
