Fitness · Nashville, Tennessee
CrossFit Forte
A CrossFit gym whose website has to do something specific and hard: convince somebody who is intimidated by CrossFit that they can walk through the door on Monday.
Status, stated plainly. This site is finished, deployed and configured, but crossfitforte.com still points at the previous WordPress site. Until the owner switches the DNS, what you can scroll on the home page of this portfolio is served from my own machine, not from the live domain. I would rather say that than show you a Live badge that is not true.
The problem
Most gym sites are written for people who already do CrossFit. They lead with competition photography and vocabulary that means nothing to an outsider: AMRAP, EMOM, a metcon. The person actually worth converting is the one who has been meaning to start for a year and is quietly worried they will be the worst person in the room.
What I built
Twelve pages, and the shape of them is the argument. There is a terminology page, because the language is the first barrier. There is a page explaining what happens on your first day. Programs, coaches, schedule and rates are all separate and all reachable, because a nervous first-timer researches thoroughly before committing.
- 12 pages including terminology, get started, why Forte and a real schedule
- 99 photographs of the actual gym and the actual members
- Separate pages for the sauna and mobility offerings, which are their own reasons to join
- Consultation and join forms wired to the host's form handling
The design decision
The type system is fluid in an unusual way: the root font size is calculated from the viewport width, so one rem equals one pixel at 1440. Every size, space and radius on the site is expressed in that unit, which means the entire page scales as a single composition rather than as a set of elements that each reflow at their own breakpoint. On a laptop it looks composed. On a large monitor it stays composed.
The palette is a near-black with one blue, and the shadows are tinted with the ground's own hue rather than being pure black, so raised surfaces read as lit rather than as dirty.
What happens next
One DNS change. The hosting configuration, the redirects and the forms are all committed and ready.
