"Birch & Glen"
Website Case Study
Overview
Description
This project involved the design and development of a six-page brochure site for the “Birch and Glen Wellness Spa,” a fictitious spa and facial treatment center located in downtown Glens Falls, New York (on the corner of Birch and Glen Streets). The site was constructed using the MODX CMS platform.
Goals
Develop a website that ideally reflects the needs of a lifestyle-oriented business that serves a mid-sized
Upstate New York community, as well as several tourist enclaves throughout the surrounding region (Lake George, Bolton Landing, Saratoga Springs).
To help accomplish this goal, a series of highly flexible, modular and minimalist technologies were chosen for the architecture of the site;
Foundation 6 (CSS presention layer), Alpine.js (for interactivity) and MODX (for content management).
Use of Generative AI
Throughout the project, AI-based tools were used to help assist in the creation of content:
- All imagery on the site was developed using Adobe Firefly, an AI-based image generator
- The text and copy throughout the site were mostly created using ChatGPT. A substantial advantage to using chatbots and LLMs for text creation is that often within seconds copy can be generated for deliverables which can be tailored to specific, targeted audiences or demographics.
Project Scope
Desktop/Mobile Website, Branding
Key Features
- Custom MODX theme built with reusable chunks and templates
- Dynamic menu navigation using the Wayfinder snippet
- Foundation 6 responsive grid system
- Custom utility CSS layer inspired by Tailwind syntax
- Color utilitues imported from Tailwind CSS
- Alpine.js powered UI interactions
- IntersectionObserver-based scroll animations
- Optimized image loading with loading="lazy"
Role
Web Developer (Front-End Design/Programming)
(Lifelike images that were created using Adobe Firefly, an AI image generator, which appear throughout the "Birch & Glen Wellness Spa" website.)
Design Process
Logo/Typography
Color Palette
For this project, the entire suite of color utilities was imported from Tailwind CSS to help streamline the selection of colors.
tw-teal-950
tw-teal-900
tw-teal-800
tw-teal-700
tw-teal-600
tw-teal-400
tw-slate-100
tw-slate-50
tw-teal-50
During testing, the text-to-background color contrast ratios met AAA conformance levels, the highest rating under the Web Content Accessibility Guidelines 2.1 (WCAG 2.1) criteria which is often used to determine ADA compliance.
User Interface Design
(The home page layout of the "Birch & Glen Wellness Spa" website in both dark and light modes which displays based on the settings of the user's operating system.)
