Style Guide

This the my Style Guide for ShaunHutchings.com

You will develop and publish a style guide for your web site. Your style guide, by necessity, will be a work in progress for most of the semester but must be complete prior to midterm. The guide will outline pertinent detail to govern your site development and must include the following sections: navigation, typography, color, logos, graphics, content and "best practices". You must provide detailed information for each section. Three sample guides are viewable at Penn, PPG and SilverOrange. The guide will be in xhtml format, and a link to the guide will be placed in the footer of each page in the web site.

Navigation

Navigation will be simple on my website. I will have mainly two locations for my navigation. The main portion for my navigation will be at the top of my website just right under the header. Here in the navigation it will take you to several of the main parts of my website. Here is includes a link to

  • Home- so you can get back home easily anywhere on the website
  • Personal- it will take you to a set of pages that outline my personal life
  • Professional- similar to the personal tab except it is my professional life
  • Contact- I really want the contact to be important so people can get a hold of me
  • SpotLight Jewelry- My wifes earring business because I am trying to promote it

Another portion of my navigation will be on the left hand side of my web site. This is called the sidenav. Here I will place links to important items in my website so people have the capability of finding them faster. These are not groups of items like the top navigation but specific pages that are important to the viewer. Here I will include:

  • CIT 230- This is a class I am taking in class which is web design
  • Resume- link to my resume so it is easily accessable at all times (work in progress)
  • Pictures- to show my gallery of picture (work in progress)
  • Other links that I deem important as the site is being built

And the final location for navigation will be in the footer. In the footer there will be links that people define the website, not about the topid of the website. It is kind of like the info hub to know more about the website. Here is some of the things that will be in there:

  • Copyright info
  • Contact Link- Like I said this is really important to me
  • SpotLight Jewelry Link- I really want people to go there and see
  • Site Plan- similar to this style guide will show the plan of my website
  • Style Guide
  • Colophon page
  • XHTML Validator

Typography

I decided to keep my typography fairly simple throughout my website. I choose the font of Arial because its a pretty simple font and I dont want people to get too caught up in how the font looks like but what the information that is describes. I feel with this font its easier to read.

The only other real adjustments that I made to my website in regards to typography is the colors (which I will explain shortly) and the sizes of the font. Here are the elements for typography I used:

  • h1
  • h2
  • h3
  • strong
  • code

Color

I wanted to keep color pretty universal throughout my website. There where several difficulties in regards to the green because I had a large range of greens. But here is a list of colors used in my website:

  • Dark Green: #233718
  • Light Green: #2E5417
  • Brown: #2D1300
  • white: #FFFFFF
  • Offwhite: #F2EDE7

Logos

I created all the logos personally using a banner creator program. At first I wanted a logo with an animal or cool design. I was looking into a picture of a bear, or a bear claw. But I did not feel that expressed the message I was trying to portray in my website. So I kept everything to my name Shaun Hutchings. The reason why I did this is because I wanted people to fee sure that they were looking at a website that was designed to show information about Shaun Hutchings. Not about bears, or other things, just about me.

I primarily created two logos. A small square one that only consisted of an SH (you can see this logo in the top left hand corner of the website, also in your browser bar). This was a small simple logo created for the purpose so I could have a universal logo for all my pages in case I wanted to change the main logo later on.

The other logo is the ShaunHutchings.com logo which was created to fill up heading of each page. This is what I worked most of the time on. I tried many things but when I created this logo that had just the name of the website, ShaunHutchings.com, I felt it looked and felt the best. I added in a quote later on. The quote is changeable.

Graphics

I did not want to have graphics on my website where you could click them and they get larger. I just wanted images to display where they could see pretty good quality pictures without the need to click on them. So I kept all pictures under 40kb. This way my page loads faster and it still looks pretty presentable. I really like the pictures in my webste. When I create my Picture Gallery I do want to create a way where the user has access to larger picture images in case they want to see in better detail the picture.

I also created several other graphics to help in the display of my website. Two of the graphics I even had to flip and put them on the bottom to create a symetrical feeling of the website. The first image is right here in content section of my website. You can see a fence looking image at the top and bottom. These images where provided free from a free graphic website. The other graphic is in the header and footer of the website. This was just a simple green bar that I created that can be repeated to create the look that you now see.

Content

I have primarily two sections of content currently. I have content that was made up for my CIT 230 class which includes Learning Report Assignments, Style Guides, Copyright information, etc. All this information I did not want to take up the priority of my website so that is why I create a link on the left hand side so people still have access to it but its not over taking the page.

The other section is the content I wanted to stand out, information about Shaun Hutchings. Here you can see links in the main navigation to content portions of the webstie which all share information about me or gives the user an oportunity to contact me.

Best Practices

Here is a list of Best Practices that I used in my website:

  • All Links in the content section and in my side advertisements are all similar in color and look.
  • I used textual headers
  • Avoid the use of flash, javascript, and other web site enhancement features. This reduces the load time and consistency.
  • Reduce the amount of words in paragraphs and descriptions. Used a lot of list and other organizational methods to help better express ideas.
  • Made every site identical, including the search results, so the user would not feel lost of like he is on a different website when he goes to different sections or pages.