Style Guide

FYI: To see any of the colors mentioned in the paragraphs, please scroll down to "colors". Also, to follow along with what I am describing, please refer to the Home Page design sample at the bottom of my Site Plan under the "assignments" link.

Navigation:

The main area of my navigation will be located on the left side of the screen. Each of the navigation buttons will be a medium brown colored font that highlights to a sandy brown color when scrolled over or clicked on. The buttons will remain that color as long as that tab is being used. My buttons will be center aligned inside a parakeet green bar that will be vertical down the web site. There will be another bar that is horizontal across the bottom of the web page and at the bottom of the vertical bar that will help my page maintain balance. The colors of this bar will be opposite of the vertical bar, so medium brown with parakeet green font for the navigation buttons.

Typography:

Headers/Navigation

Georgia font (18-24pt.)- The headers will be a medium brown and in bold. They will be found in my text boxes in the center of my web site. They will be 20pt. in size. The navigation buttons on the left side of my web site and along the bottom will be the same type of font as my headers, the left side being medium brown and the bottom being parakeet green. The left navigation will be 20pt. font. The bottom will be 14pt font.

Body Copy

Georgia font (14pt.)- The body copy will be found inside of my text box, and will also be a medium brown color. My links in the paragraphs, which will also be in georgia font and 14pt. in size, will be a lavish green so you know to click on them. They will change to a lighter tone once clicked on to show they are currently being viewed or have been viewed. These links will be the projects I have created for potential employers to view, or the assignments I have completed for my web design class. The colors and fonts used on everything in my web site will be easy to read and appealing to visitors.

Colors:

I chose colors that go well together, and the two greens are my favorite colors. They are simple to go with my simple design and also show my creativity at the same time. They are all used in many different ways.

Logo:

I will be using a flower logo I made last spring in my Visual Media class.It is simple but classy at the same time and will go perfectly with my website. It is the same parakeet green color that is used on my website. It can be classified as an icon that stands separately and represents my site. I will have my name in some creative font, most likely in medium brown, to go along with the flower logo. The logo will be located at the right hand corner of my website, and it will also be a link that can be clicked on to go back to the home page at any time. I would also like the flower to be in my Internet tab.

Graphics:

The graphics I will be using are pictures of me, since this website is to show who I am to potential employers. I will also have pictures of my projects I have created, and they will be found under my portfolio button under separate links. I might decide to use other graphics to fill in the picture boxes and give my site some variety.

Content:

The content will be short and simple and explain everything clearly to get the point across. Everything will be easy to find and navigate through. I want employers to enjoy their time on my site, so by not being too wordy I'm sure they will actually read what I have to say. I will use capitals for every beginning letter on every word, except in the paragraphs. Those will be set up like normal paragraphs. I will not have to worry about citing other sources because everything I will use on my website we be my own creations.

Best Practices:

-My navigation bars will be on all pages, except my splash page that you click on to get inside my website. This will allow for visitors to navigate through the different pages with ease.

-All my images should have ALT text describing them if needed.

-All my pages should validate HTML 5.

-I am going to avoid using flash elements. If I see it is needed then I will use it then.

-I am going to avoid the need for scrolling. This will keep my content clear, simple, and creative!