The Brief
ENVISION is a concept project intended as a Squarespace template with three available purchase tiers:
ONE - a single page layout for sales pages or one-page sites.
CLASSIC - a ten-page option with essential pages and section layouts.
PRO - twelve additional pages including shop, course, portfolio, scheduling, video collection and event calendar.
The brand concept is a retreat and environmental learning center in remote Colorado requiring a new website that showcases their programs and elicits support for its nonprofit mission.
The goal is to leverage Squarespace's built-in features with minimal coding, creating a responsive website that not only evokes the wonder of nature but generates brand awareness and leads for ENVISION’s offerings, including retreats, courses and gear - and establish the website as a template that can be adapted to varied use cases.
Royalty-free photography and video obtained through Pexels and Unsplash.
Challenge
Create brand concept, visual expression and imagery for ENVISION.
Develop multi-page website from wireframe using only essential CSS and Javascript to achieve the desired design.
Establish website as a template available for purchase.
Process
Develop brand mission, purpose, values and articulate the brand’s buyer personas.
Establish brand visual expression with color palette, typography and graphic motifs.
Source and prepare images and videos.
Global configuration of color palette and typography.
Establish navigation based on template tiers.
Build for responsiveness on common device sizes using both fluid engine and classic editor sections in Squarespace 7.1
Intermittent testing for accessibility, including keyboard navigation, proper markup and page outline and Lighthouse report
Page performance and SEO checks
Render available demo website and three template options.
Provide video walkthroughs to guide end users in customizing template.
Key Features
Use of video and parallax animation to create visual interest and movement
CSS & Javascript Customizations
Hide embed blocks info bar causing spacing issues
Style summary blocks header font and ‘read more’ links
Implement BACK TO TOP sticky button
Adjust button styling
Implement Google Icons
Tools & Technologies
Figma
Squarespace 7.1
Chrome Inspector & Lighthouse
Web Developer Chrome Extension
