Style Guide
Required Elements
John Beck Family Website will have the following elements on every page
- Navigation Bar
- Beck logo (includes a link to home page)
- Copyright in footer
- Contact us in footer(with link to a contact us page)
- Left Navigation Panel
- Background color (#FFFFDD)
- Font Color(660000)
Fonts
All text will be writen in the font Trebuchet Ms.
Navigation
There are two crucial elements devoted to navigation on JohnBeckFamily.com and they are required on all pages. The first navigational element is the Header Navigator
The navigational header can take the client to any main page of the website. The following tabs must be included with the navigational header: Home, Photos, Future Vacations, What’s New, and Search. Another important feature to the navigational header is the Beck Logo. It is required to have a link returning the client to the homepage
The left navigational bar is given to allow users to simply navigate to subpages quickly. I have decided to use a breadcrumb approach but also to show the other options given for each step, but it is important that I do not have the following options of each step.
The title says “Page Index”. This text might be different. If you notice, all the main page options are available to the user for a quick change in different parts of the page
I have also included sub pages. In the example on the left you can see that I clicked on the main page called photos photos, then I clicked on the sub folder Colorado, and then I selected Christmas photos. You can also see different places I have been(but not different visits I have had) and different times I have been to Colorado
Images
There are various types of pictures used on JohnBeckFamily.com On pages that contain many photos there will be a thumbnail picture being 150 pixels across linking to photos of about 900 pixels. This allows clients to view higher quality pictures, but still be able to have fast load times. On some pages there will be large pictures. An example of this is the homepage. These pictures will be under 900 pixels. The will also have a similar format between them with faded edges.
Best Practices
To help viewers of JohnBeckFamily.com experience a simple and themed experience, here are a few guidelines to follow while creating website pages for JohnBeckFamily.com.
- The navigation bar will remain the same throughout the website making it easier to navigate.
- All links will appear the same on the website
- The color and theme should remain constant throughout the site
- The website must validate
- Design of the pages must be easy to read and easy to convert to HTML 5 when that becomes the standard