Noah Franklin Hotel
- Nov– Dec 2020
- Role
- Sole Designer
- Duration
- 1 months
- Tools
- Balsamiq
- HTML & CSS
- Adobe InDesign
- Features
- Fully developed site
- Wireframes & Style Tiles
- Live Product
Brief
- Final assignment for my first Web Design class, DVC's Web Design I Class
- Design a website for a fake client, The Noah Franklin Homestead Bed & Breakfast in Provincetown, Massachusetts
- “Client” provided page contents as a .txt file & photos, but no additional specifications on the design
Design Process
After reviewing all the information provided, I came up with a couple conclusions that drove my design:
- Because The Noah Franklin provides lodging, photos will be an important part of establishing trust with customers.
- The Noah Franklin is meant for a specific audience: travelers looking to experience colonial New England first-hand.
- Of all the content the client provided, the room photos speak the best to that effect.
And so I highlighted the rooms and their photos where possible.
Wireframes
- Created using Balsamiq
- Designed large cards to link to each room with its associated photo as the background
- Created a Booking Page not delineated in the original text in anticipation of the client's need
Style Tiles
- Created using Adobe InDesign
- Designed client branding from scratch, no prior training
I first played around with the Style Tiles, trying to push my boundaries with different aesthetics, and then combined the most successful elements of those Tiles into my final design.
Colonial Style Tile
The text content and images the hotel supplied heavily emphasize its colonial architecture and interior design, so I experimented with the rustic, old Americas style. I used the hotel room photos and previous knowledge of historical colonial U.S. aesthetics to make my design emulate Colonial New England.
Quirky Style Tile
The next Style Tile focused on the unique, homey feeling of a bed and breakfast, but with the last one I wanted to experiment with the layout.
Experimental Layout Style Tile
I tried to create a layout beyond the typical header-body-aside layout. The photos described the hotel in ways text could only approximate, so I expanded the photos to make the audience feel like they were there, standing outside the Noah Franklin's front door.
My layout experiment failed; I ended up making the photo a nearly full-screen hero image, with the body connected to the header only by accent color. Instead, I shifted my focus to other important design elements before moving on to my final design. I even ended up using one of the fonts I found, Cabrito Didone, into my final design.
Final Style Tile
In the end, I integrated the historical Colonial New England aesthetics into a quirky, yet warm and professional design aesthetic that speaks to the unique brand of The Noah Franklin Homestead.
I took my original Colonial New England color scheme and made the colors more inviting, with warmer and more saturated hues. The fonts felt classic and formal like the colonial era, but still kept some charm and quirkiness in their serifs to highlight the uniqueness of the B&B.
Finished Website
Prior to completing this project, I had never made more than single pages of layouts in HTML & CSS. Partly because the last time I had made a “fully developed” website HTML iframe tags were commonly used as main content areas, but mostly because all coding I had done was ameteur hobbyist work.
This project, requiring knowledge of Semantic HTML, basic SEO and meta tags, and several pages of coding marks my beginning as a professional web designer.
Please note: the code displayed is the refactored version I finished after the class ended.