Northwater Lodge
A resort website should make you want to go, then make it easy to work out where to stay. Northwater does both jobs in one page.
Concept build. Nobody commissioned this. I built it to show what the work looks like for this kind of business, and everything in it — the name, the prices, the photographs — is made up for that purpose.
The brief
Northwater Lodge is a made-up resort in Minnesota’s Brainerd Lakes area. I built it to try a more careful approach to hospitality websites: strong photos, enough space to enjoy them, and useful details near the point where a guest needs them.
The visitor has two questions. Does this look like the kind of place I want to spend a weekend? And which cabin fits the people coming with me? The page answers them in that order.
Start with the place
The opening screen is a lake at sunset, with the dock leading into the photo. Large serif lettering gives the page its character. The smaller navigation and practical details use a clean sans serif. Deep pine green and warm paper tones carry through the cabin list, the planner and the footer.
The writing stays close to an ordinary trip up north. Coffee on the dock. A book on the porch. Room for everyone at breakfast. Short sections leave the photos space to do their work.
I used real photos and kept the photographer credits on the site. They set the mood of the concept. They do not document one working resort.
Make the next decision easy
The three stays hold different numbers of people. The Pine Cabin sleeps two, the Cedar Suite four, the Shore House six. Guest counts and bedroom details sit next to the names, so visitors can narrow the choice without opening every one.
Each cabin opens into a detail view with its description, what it includes, and a sample nightly rate. From there the guest can look at dates. The planner checks the date range, filters cabins by party size, and works out a sample total for the nights chosen.
The same planner opens from the header and the date strip. It gives the page a complete browsing journey while keeping its limits clear. This is a demonstration. There is no real availability, no reservations and no payments.
Keep the feeling on a phone
The mobile layout keeps the photo and headline big. Cabin cards drop to a single column. Navigation moves into a compact menu. The planner rearranges its controls for a narrow screen. The screenshots below show the real page at 390px wide.
Movement is restrained. A slow entrance for the opening photo, small hover responses, and sections that appear as you reach them. If a visitor has asked their device to reduce motion, those effects turn off. Dialogs close on Escape and handle focus properly, and the gallery and tabs work from the keyboard.
Build for a light page
The public demo runs on plain HTML, CSS and JavaScript. No client framework. No animation library. Images are compressed WebP files, with smaller versions for narrow screens. Photos below the fold load as they come into view, and fonts are served from the site itself.
Those are build choices, not a claim about a score. I checked the desktop and mobile layouts in the browser, along with the navigation and the planner. No Lighthouse score and no booking results are claimed for this concept.
The finished piece
Northwater is a complete hospitality website concept. A visual identity, a responsive landing page, cabin detail views, a working sample planner, an interactive experience section, a photo gallery and practical FAQs.
The write-up and the demo are published together, so the design can be read about and tried in one visit.
A closer look
