Style Guide
Navigation
The navigation will be easy to follow with a navigation bar, or bread crumbs, letting the user know where they are at, see example item 1. To go between the different sections of the web site, the user will have tabs right under the main logo, see example item 2. Inside each tab there will be links on the left hand side to navigate to the other pages, see example item 3. This is to increase usability. Any page added to the web site must be accessed by one of these tabs or one of the links inside the tab.
Typography
Headings
- Georgia font
- h1 heading
- Black
Subheadings
- Georgia font
- h2 heading
- Black
Body
Color
The background color for all pages will be light gray #969EA1. The writing will all be black and the outline of the tabs and buttons will be black. The subnavigation will be light brown #BAAA96. The other color on the page will come from the actual pictures.
Logos
The logo for the page header is the PhotoHughes.com name with pictures on both sides (see example item 4). This is the only logo to be used for the header. The tabs will each have a logo with a picture from the collection with the tab name on the top. The name must be legible and must be part of the logo.
Graphics
All graphics must be sole property of PhotoHughes. The graphics used in each page will be pictures taken by the photographers employed by PhotoHughes. If the graphic is not a picture, it must be created by a PhotoHughes employee.
Content
Photohughes.com is designed for e-commerce. The pages included on the site are to sell pictures and services provided by PhotoHughes. Wording must be limited on each page. The only pages that need a good amount of writing will be the contact us page, about us page, pricing/how to order page and this the style guide. All others must mainly show our work and a brief explanation. The content of the pages is to make sure the user is interested at all times and is not required to process a lot of information.
See example item 5.
General Best Practices
The web page must meet the validation standards for xhtml 1.0 transitional. All the styling will be done with CSS and also must pass the CSS validation. The validation for the XHTML is found at http://validator.w3.org/ and the validation for the CSS is found at http://jigsaw.w3.org/css-validator/. The site must always have an elegant appearance and must always be user friendly. It must be easy to understand and navigate. Any thing that you might think looks questionable should be changed to look elegant. Any outside web sites that would like to be advertised on photohughes.com, must be approved by management. All links in the site that lead outside photohughes.com must also be approved.
Example Page Layout
