Style Guide for: theupdowns.com
Navigation
When the URL is entered, the first page that will be displayed is the homepage. The home page can be accessed by clicking on the site logo located in the header.
Navigation of the site will be done by a navigation bar located just below the header/site logo. The navigation bar will include five links to certain sections of the website:
Local Movie Places | Upcoming Movies | Reviews | Links | About Me
Every page in the website will feature the navigation bar just below the header so navigation can be done from any place in the site.
To help users know where in the site they are located, the navigation bar will highlight the current page they are on.
Typography
The titles will use verdana font, size 12 font, bolded, and will be colored dark blue e.g.:
Title
The body text will use verdana font, size 11 point, and will be colored black e.g.:
Text
The sidebar links will use verdana font, size 9 point, and will be colored orange e.g.:
Sidebar Links
Examples:
body text font:
a b c d e f g h I j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R ST U V W X Y Z
1 2 3 4 5 6 7 8 9 0
Titles Will Look Like This
This is what a paragraph looks like. All articles and reviews will have this font setting. Be sure to visit theupdows.com now!
Sidebar Text
Current Posts
Old Posts
Color
I will be using this tetrad color scheme of orange, yellow and blue throughout my site. This will be the site’s main color scheme. This color scheme will be fully represented in my site logo too.
Besides the tetrad color scheme, there will be two other colors added to the site. Gray will be the supporting color for the tetrad color scheme.
White will be used as background for my website articles. The white will be contrasted with the black text so that reading will be made easy.
Logos
The above picture is a prototype of my websites logo. The final version will be colored with the websites theme of orange, yellow and blue. To add a movie theme to the logo, it will feature a film reel to the right the website name, as seen in the picture. Below the website name, there will be a slogan, “your local movie news in Rexburg”, which is a small description of what the site is about.
The website logo will be seen on every page in the site. It will be located in the header. The logo will also be a link to the homepage so that user can easily access it.
Graphics
Each blog article will have a picture that will be sized for 550 x 340 pixels. This size will complement the page width that I am choosing (it will be a thin page width).
The other pictures that would be used will be the site logo. It will be 800 x 120 pixels.
The final graphics that I will use will be in the navigation bar. Each section of the site will have its own tab in the navigation bar. Again, those sections will be Local Movie Places, Upcoming Movies, Reviews, Links, and About Me.
Content
The purpose of my website is to inform about the local movies playing in Rexburg. As stated earlier, my website will feature five sections. Also featured is the homepage.
Homepage – this will be my main page. This will have an introduction that will inform users about the website. Also in the homepage will be local movie news.
Local Movie Places – this section will give information of all the movie sources that could be found in Rexburg. That will include movie theaters, movie rentals, Red Boxes, and university movie nights.
Upcoming Movies – contained in this section will be information of the upcoming movies that will be showed in Rexburg. This will inform users of which movies to look out for.
Reviews – this section will contain local movie reviews from BYU-Idaho students.
Links – this page will have links to other movies sites that users might have a interest in.
About Me – this will contain a little info about the author of the website, Alvin Pineda.
Best Practices
-Every page will contain a site logo in the header, a navigation bar, and a footer containing legal information
-The website should be updated at least once per week to keep content fresh
-The website should have a simplistic look, clutter is bad
-All class assignments/web web pages should be completed early before due date
-All pages will be made will the doctype xhtml
-The website should be validated to make sure that all code is correct