On the Creation of the Nighthouse Website: Design and Branding

This is a quick design overview of nighthouse.info for anyone who is interested in our process.

Mikey and I collaborated extensively on the design of the site and I think we built something that is both visually impressive and technically user-focused. You’ll see throughout that each element was thoughtfully considered. You can expect the same level of care and detail with the websites we build for your company or brand.

Beginning with the Nighthouse wordmark – this was a several day process of different attempts at creating an interesting logomark to take the place of the “N” in Nighthouse and pairing it with the correct typeface that conveyed both an approachable and a regal subtlety, and simultaneously played well with the mark itself. Many designs later we found a logo design that works well on its own but also flows well into the whole wordmark. It makes the brand name memorable because it is a visual representation of a house and could stand completely alone and still remind you of the whole word.

The navbar at the top of the page was an interesting but thoughtful choice. Normally words like “Home,” “Blog,” and “Contact” are better in certain applications than symbols. But because most of the information necessary to understand what we do, how we can help, and how to contact us is on a single page, it is not entirely necessary to spell out where they go. The envelope is a universal symbol for mail and should be entirely identifiable by all users, but the light bulb is a little more mysterious. However, the user will likely know that a light bulb is typically a metaphor for ideas and will be rewarded when they click it and land on the blog page – a place for our ideas. We wanted to encourage exploration-lite without too much ambiguity.

Scrolling down the page you’ll find our clearly stated mission, a blurb about how we take care to make your site beautiful, and the various services we offer. We didn’t want the copy to be wordy and feel like in most cases it is not necessary or effective. We also wanted the entire page to tell a story visually. You can see the big picture of the floating alpine lake and then down into the pillars that we’re using to build your site. At the bottom you reach the night house and a call-to-action to contact us. Finally after the contact slider are stylized versions of our faces to remove anonymity and give the user a sense of who they will be interacting with. We want to humanize the web.

All the colors of the site are on a fairly restrictive palette barring a few exceptions where we wanted to convey a new idea or add a pop of color to break things up. The cool blues and purples should be calming and inviting. All the links on the site are in a single color so that a user will intuitively understand what is clickable or not.

We want the site to have very few words but also make the user aware of our abilities. The illustrations and animation should show that we are able to make compelling visuals without needing to spell it out.

The site works across all devices. The copy is based on view width and not pixel size so it will scale to huge resolutions. We took a small performance hit on desktop to implement large images to match, but we feel that it is worth it to make it compatible as screens get bigger. Mobile is still well-optimized.

Every choice is a branding decision as well. Our palette and illustration style will be consistent across all future media (until the inevitable redesign). Our SOWs, business cards, and social media presence follows the design of the webpage – it all flows from a single source. When you think of Nighthouse we want you to instantly recall the colors and the style we have brought to the web.

We hope that our design choices have made a compelling website that is both user-friendly and aesthetically pleasing.

5 2 Votes
Post Rating
Notify of

Inline Feedbacks
View All Comments
Nighthouse Website Design