Gulfway Barbers
Contact Name
Lee Mack
Timeframe
ASAP
Last Update
July 4, 2010
Planning
The desired URL of http://www.gulfwaybarbers.com/ is available for 1 year @ $8.95 or 2 years @ $18.95. Hosting plans are avialable through
Layout Sketches. Each page of the PDF file is a separate layout option.
Layout 1: Uses a vertical navigation on the left. Barber pole helps maintain the left edge and will be animated. The header spans the entire width of the design, and will primarily consist of the logo with possibly an image to fill out the rest of the space. The content will take up 2/3 of the design. The sidebar can be used to display specials, advertisements, sponsors, or social networking data. The footer also spans the entire width of the design and will be short vertically. This will contain the legal, copyright and contact information, as well as my design credit.
Layout 2: Uses a horizontal navigation across the top, just under the header. Like the previous layout, the header will be primarily the shop's sign/logo. Under the navigation will be some whitespace to allow the visitor to focus on the important content. For the homepage, I can place a large Flash animation here. Again, the footer will contain legal, copyright, contact info, and the design credit.
Layout 3: Uses a vertical navigation on the right. Unlike the first design, if there is more content on the page, the navigation will stay locked in relation to the browser and always be visible. This design also has the main content taking up 2/3 of the design, on the left-hand side this time. The footer matches the width of the content to allow the navigation room to scroll. The logo on this header will be centered, with faded images on either side.
Design
Layout 3 was chosen, and I've now begun working on the design. Since no images have been captured yet, everything in the mockup is a stock photo or illustration. Also, I created a temporary logo for Gulfway Barbers until I know for certain what typeface is used on the shop's signage. The gradient behind the logo hopes to mimic the glass door. All the text is Lorem Ipsum dummy text and will be replaced with actual content later.
I've used a solid black background for the body, which the visitor will see around the edges of the design. The main content area will used a white background with black text, which is more readable than the reverse. The light-gray borders should reinforce the chrome trim used in the shop. The navigation will have a wood background to remind the visitor of the wooden benches that will be shown in the shop photos. Main headings are dark red with a slight black shadow (the shadow will not be visible in Internet Explorer). The footer background color uses the same blue within the logo, with white text.
Content links will be the same blue in the logo, and footer, originally. After a visitor clicks on one, the link color will change to the same dark red as the main page heading. Navigation links will be white, but th color will change to black when hovering over an element. Footer links will be white originally, but turn to the same light-gray as the border after clicked.
Development
Has not begun yet.