Designed and built this website refresh for Gutter Shutter to go along with their new branding. I also created and coded an all new mobile nav for the site, which will be incorporated onto other websites for the Treehouse Internet Group.
The website's main message features a CSS animation with custom illustrated leaves and wind, individually set to fall at different times. They hit the pictured Gutter Shutter system and glide off of it, showing that the system does not get clogged with leaves and debris.
The mobile nav was designed to target specific problems with some of the Treehouse's other sites. It adds a designated top section featuring the most important and highest converting pages of the site, and is designed in a way that ensures the user will see pages from each category on the site.
It achieves this by creating folding accordions in the Services and Our Work sections when they reach a certain number of child pages, so companies can pick their top pages in each to display at all times before the user has to start scrolling. In addition to the accordion sections, the nav is set to a fixed height that maxes out at the height of the device window. This allows the highest converting "Free Estimate" button to stay visible at all times, and the user is able to scroll through the remaining pages if needed.
A screenshot of Gutter Shutter's previous website is pictured below the new design.
Note: Updates have been made to the live site (linked below) since my departure from the team.
View: Gutter Shutter & Treehouse Internet Group
Tools: HTML, CSS, JS, Illustration, Foundation 6
