"Brant Lake Paddle Tours"
Website Case Study

Image of 'Brant Lake Paddle Tours' Header

Overview

Description

The project involved the design and development of a ten-page customized WordPress website for "Brant Lake Paddle Tours," a fictitious paddle tour business on Brant Lake, New York in the Adirondacks.

Goals

Develop a small business website that incorporates a more simplified version of an enterprise WordPress architecture which involves template rendering. This project mainly established a workflow which uses the Twig Template Rendering Engine with the Timber plugin for more efficient data retrieval through Advanced Custom Fields (ACF)
For this website, I am incorporated a design system that utilizes Foundation for the grid system and many UI components, a custom utilities layer for spacing and padding based on Tailwind-style syntax (ie. u-py-4, u-m-3) and Alpine.js and light jQuery being used for interactivity.

Use of Generative AI

Many generative AI tools were used to help assist with the creation of content throughout this project. A substantial portion of the images were developed with Adobe Firefly using reference images from my own personal photography of Brant Lake. Most of the text was generated with ChatGPT.

Project Scope

Desktop/Mobile Website, Branding

Key Features

Customized WordPress theme using Twig template rendering engine
Foundation 6 responsive grid system
Custom utility CSS layer inspired by Tailwind syntax
Alpine.js powered UI interactions
jQuery-based scrolling animations and interactions
Optimized image loading with loading="lazy"

Role

Web Developer (Front-End Design/Programming)

AI generated image used in 'Brant Lake Paddle Tours' website

(Lifelike images that were created using Adobe Firefly, an AI image generator, which appear on the media wall section of the "Brant Lake Paddle Tours" website.)

Information Architecture (Sitemap)

A conceptual diagram of the content hierarchy of the "Brant Lake Paddle Tours" website.

Image of sitemap for 'Brant Lake Paddle Tours'

Design Process

Logo/Typography

Typography used on 'Brant Lake Paddle Tours' Website

A custom logo for "Brant Lake Paddle Tours" was created entirely manually in Adobe Illustrator CC.

Color Palette

#1e1e1e

#061e2e

#035559

#155868

#1f8388

#00b7aa

#fdfdeb

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

Screenshots of 'Beekman Cold Brews' Website

(The home page layout of the "Brant Lake Paddle Tours" website in both dark and light modes which displays based on the settings of the user's operating system.)

Challenge

Since the late 2010s, many modern WordPress sites have been built using drag-and-drop visual page builders, such as Elementor, Divi, WPBakery and the native Gutenberg block library. While page builders may be appropriate in certain circumstances, such as rapid prototyping, they often are slow, overbloated and can be difficult to maintain. Furthermore, page builders usually place substantial limitations on front-end developers who must design interfaces around the various constraints of the specific builder being used.

Solution

This project demonstrates the advantages of implementing Twig Template Rendering in a WordPress environment with its more modular approach that separates the front-end presentation layer from the back-end architecture. By using Twig, a staple of many advanced CMS platforms such as Drupal, I was able to make an almost pixel-perfect translation of my static “Brant Lake Paddle Tours” hand-coded prototype to WordPress. In addition, Twig’s efficient data retrieval approach allowed for me to create a series of standardized fields using the Advanced Custom Fields (ACF) plugin without having to write a single line of PHP code.

To further enhance performance, the “Brant Lake Paddle Tours” website uses a more traditional WordPress client-side editing approach which combines the Classic Editor with data entry fields that are designated in ACF. This method allows users to modify content in a more comfortable and familiar Microsoft Word-style setting without having to worry about breaking pages and other site content in a complicated visual page builder.

Results

This project produced a modular and highly customizable WordPress small business site that avoids the bloat and overhead of many of the most popular visual page builders.

View Project

"Brant Lake Paddle Tours"Website Case Study