Ruben Maldonado's Online Portfolio
Style Guide
This is my Style Guide
Navigation
I first want to have two navigation bars. One that is constantly right above the main content of the page and the other constantly on the left side of the page. I also want another navigation bar at the top right of my header that is constant for all the web pages as well that is at 8 size font, Times New Roman for the font style, and color black for the font color. For the first navigation bar that is right above the content of each page, I want it to be light blue, with the color code #CECEF6, as my background. I want the size of my font to be at size 12 with Times New Roman font. I want the color of the font to be black. I want these same sizes, font styles, and colors to also be used, for my left navigation bar that is always left of the content. Within my first navigation bar, I want three options to choose from, them being personal life, professional life, and contact info. I want these three as my main places to navigate to since they are my main focus. For my left navigation bar I want a list that from top to bottom lists, resume, mission statement, resume, and references. All of these options would be the only way of navigating though my website. This is how I would want my navigation set up.
Typography
Header
For the header, I would want my name to be right at the top with castellar font style and the font size at 20. I want my name to be centered with the color black as the color of my font. I also want on the top right of my header to have, About Site, and Purpose with normal size 8 font and black as its color and times new roman as my font style. The color I want for my background would be light gray, color code #E6E6E6. I also want my website address to be at the bottom right, slanted to the right at font size 10, black as the color of the font, in times new roman.
Navigation
For the navigation, I would want the font color to be black, with the font size being size 12, and using times new roman as my font style. For the background color I want #CECEF6 as my color for my navigation
Left Navigation
For the left navigation, I want the font size to be 12, with the font color black, and my background color as #CECEF6, as my color code.
Content
For my content, I want my background color to be white. I want a heading, h1 code, at each page to have a size 16 font, with the color black, and in times new roman style of font.
Footer
For my footer, I want my text to be located at the bottom left side of each page. I want the font size to be size 8, with the font style being times new roman, and color of the font black. I also want the background color to be #E6E6E6 color code.
Color
For the background color of the entire page, I want it to be white. For the color of the different fonts that I have I want them to be all black. For the different sections of the page, I want the header background to be light gray, color code #E6E6E6. I also want the background of my footer to be this same color. For the content I want the background color to be white. For the navigation located on top of the content, I want the background color to be light blue, color code #CECEF6. I also want my left navigation bar to have the same color code of #CECEF6.
Logos
For a logo, all I want is my initials. I want my logo to link back to the homepage so that users can click on it and reference back to the beginning of the website. I want the font color to be in black located on the far left side of my header. I want the font style to be castellar, with the font size being 35.
Graphics
I want a picture of me under content on my homepage. I also want two other pictures, one under my professional page and the other under my personal page. I want them to be small pictures where I can focus in on the quality of the image. I want them to be 100px wide and 75px tall. All images will be in black and white and have no color.
Content
For my content, I want it to cover 90% of the page with the other 10% left for the left navigation bar that I will have. It will have a background color of white and always have a heading code of "h1", to help the user know what the main subject of the page is. The font will be in size 12 with times new roman as its font style. The color of the font will be black.
Best Practices
Some of the best practices I know of are to first, place your logo on the top left side of your page. Always put it there because that is generally where most websites place their logo at. Also another good practice is to make your logo a link back to the home page. Most websites are set up for the user to click on the logo and get sent right back to the home page. Another good practice is to make sure that all links within your page are underlined. This will help the user know what they can and cannot click on. Another best practice is to always have your navigation bar above your content. This is the primary location to have navigation as the user of your website is browsing your page.