Style Guide

Navigation

My navigation bar will appear the same on every page. It will be on the left hand side of the screen and take up the left 18% of the page. Font will be times new roman. The links on my navigation will follow traditional link standards with all links being underlined and look blue. After the links are clicked they will turn purple. This is because I feel that it is more important to have a clear navigation that follows standards then to have something more flashy and less practical.

Topography

The topography of my website will consist of a header at the top taking up approximately the top 250 pixels, a navigation of the left hand side taking up 18%, a content section taking up the right 82%, and a footer taking up the bottom 20 pixels. I have decided to forgo a secondary navigation bar to enhance the ease of use of my website.

Color

I have chosen a grean and blue color scheme for my website. I will use various shades of blue and green for all background colors. This is important because I feel it has a soothing subtle color tones which I feel go well with the art of origami.

Some of the specific colors that I will use are:

  • Navigation - #B3ECFF
  • Body - #B3C6FF;
  • Content - #CCDAFF

Logos

There will be a logo in the header of the website which will appear on the top of every page in the website.

Graphics

I will keep the use of graphics of my website to a minimum. As mentioned previously there will be a graphic logo on the top of each page. I will also include necessary graphics to show examples of origami and to show instructions on making origami, but for the most part, the website will use relatively few graphics.

Content

The content of my website will be focused on both appreciating origami and making things in origami. The content of my website will be black, arial. and 16 pixel.

Best practices

  • Images will be kept to a minimum to ease loading time and to prevent giving the website a cluttered look.
  • All links will be underlined.
  • Div tags will always be used when appropriate.
  • Graphical headers will always be avoided.