Personal trainer website design

The design brief. A site for an athletic performance coach working with rugby players and competitive athletes, built to convert visitors into bookings for training and motivational work. The category is saturated with interchangeable fitness sites — stock gym photography, generic promises about transformation — and the design's main job is to make one coach feel specific.

The split-screen hero. We divided the opening screen vertically: a narrow black column on the left carrying the name and navigation, and a photograph of an athlete in the starting blocks filling the remaining two thirds, treated with a heavy red duotone. The headline sits across the image with the operative word set several times larger than the rest of the sentence.

Why the duotone. Flattening the photograph to two tones does something a full-colour image cannot: it makes the picture behave like a graphic element rather than a photograph, so text can sit directly on it at any size without a scrim or a drop shadow. It also unifies the site — every subsequent image gets the same treatment, so photographs shot on different days in different lighting all belong to the same brand. For a personal coach who cannot commission a full photoshoot, that consistency is worth a great deal.

The vertical navigation. Menu items run down the left-hand column rather than across the top. This is a deliberate departure. A vertical rail keeps the navigation permanently visible while the content scrolls, it leaves the full width of every screen free for imagery, and on a site with only five destinations it reads as confident rather than sparse. A conventional horizontal bar would have eaten into the hero photograph for no benefit.

Typography as tone. Condensed uppercase sans throughout, tightly tracked and heavily weighted. The type is doing the emotional work here. Sports coaching is sold on intensity, and letterforms that are narrow, tall and packed together read as disciplined and forceful in a way that a rounded, friendly typeface never would. Setting one word of the headline at triple the size of its neighbours borrows directly from sports advertising, where a single word carries the message and the rest is context.

The introduction section. Below the hero, the coach speaks in the first person — his name, his position, a direct address to the reader. Around that text we arranged photographs in an overlapping asymmetric cluster rather than a neat row, with images breaking out of the column at different sizes and one partially covering another. The irregularity creates energy and movement, which suits the subject; a tidy three-column grid would have felt corporate and static.

Conversion design. Calls to action are small, solid red rectangles with short imperative labels — book, get in touch, training checklist. They are the only saturated colour on any white section, so they are impossible to miss without being large. The checklist offer is the most commercially interesting element on the page: it gives a visitor who is not ready to book a lower-commitment reason to hand over contact details, which is how a coaching business builds a pipeline rather than waiting on impulse enquiries.

Closing block. The page ends on black with a three-line motivational statement, a portrait, and a final call to action. Returning to the dark palette at the foot closes the loop with the hero and leaves the visitor on the brand's strongest note rather than trailing off into a footer.