logo type image

Web Design: Whisperpine

This project is a prototype of a single-page website for a fictional bed and breakfast called "Whisperpine Lodge B&B". I worked with Erin Smith, another Web Developer on this project. View the protoype by clicking here.

01

02

03

04

05

06

07

08

09

10

Banner Image
The Whisperpine landing page with branding

Layout & Typography

A prototype is meant to be a draft of the structure and basic frontend functionality of the website. It is used for client review and user testing to help make determinations on design decisions to refine the design. For a single page website, the basic layout is vertical scroll, and we use parralax as an approach to interleaving the images and copy.

The typography is made up of Palatino Linotype for headings, and Roboto for the copy. The copy is of course stand-in "Lorem ipsum" and has not been provided by the client at this point.

Image of Location
Image of Gallery

Color

The color approach is understandably driven my the photographic content as each panel's color is a direct selection from the image associated with it. The photos used are royalty-free photos from the Unsplash website. The selected photos are from Kalen Emlsey, Anthony Robin, Nei Neves, Brooke Lark, and Annie Spratt.

The gallery is a good representation of the grid system used in the prototype which utilizes the Foundation CSS framework.

Banner Number 2 Image