Site Plan
This document will be ever changing as I develop the concept for my website. This page was last updated on 15 Dec 2011.
Site Purpose
The purpose of this site is to be my own personal online portfolio where I may publish my photos, recipes, thoughts, assignments, and before-after shots of sites I have designed.
Audience
My intended audience is anyone who has an interest in me or my work. This includes, but is not limited to, my family, friends, and potential employers.
Available Content
The content that I will have available will be:
- Photos I have taken
- Thoughts/feelings about things
- My own original recipes
- Screen shots of sites I have designed
- Assignments and other school related content
Sections
Tentatively, my site will have the following sections:
- Home - A place to start
- About Me - Learn various things about me
- Photo Gallery - a gallery to showcase photos I have taken
- Site Gallery - a gallery to showcase sites I have designed
- Writings - a blog of my thoughts and feelings on various things
- Assignments - a place to put all my school-related assignments
- Recipes - a collection of my favorite original recipes to share with others
Sample Content
Folder Structure
Tentatively, my site will have the following folder structure:
- /
- /meta
- /courses
- /creations
- /contact
Database Implementation
I plan to use a database to create the functionality for my recipes. You will be able to search by ingredient or recipe title. You will also be able to select "double recipe" and it will double the measurements for you, etc.
Dynamic Components
The dynamic components will be displaying the current date, an implemented Wordpress for my blog entries, and all the recipe functionality mentioned above. The site will say "Good Morning", etc depending on the time of day.
Sketches
Here is a brief sketch of the design for my site I am considering. It outlines the layers of circles.
The left side represents the main home page. The right represents the layout for all other pages. All pages will feature a vertical navigation bar on the left and the title of the current page across the top. The temple is in the foreground on the home page and in the background on all other pages. Another object in place of the temple may be used in the final design.
Style Guide (Rough)
Navigation
- All pages should have a link to the main home page.
- The "Chris Staber" logo should be function as a link back to the main home page on all pages.
- Main navigation titles and sub navigation titles should make as much sense as possible for easy navigation.
- If using rollover images as links, the file sizes of each should be very small to allow quick loading on slow connections.
- The footer should contain links to pertinent information about the site and it's interaction with web users.
Typography
- Use San-Seriff Fonts only.
- All fonts used should be standard, well recognized web fonts.
- Text sizes should make sense (ie: using h2 tags for main headings and h2 tags for sub-headings).
- Proper grammar and punctuation should be used at all times, unless the text is in quotes.
Colors
- Color schemes should match the graphics that are used throughout the site.
- For site unity, all pages should use the same color scheme.
- Font colors should fit well into the color scheme and be very readable.
- Use EARTH/FARM colors.
Logos
- The scripted "Chris Staber" logo is required on all pages.
- A smaller version may be used on all sub-pages as long as the main page still contains the original full-size one.
- Logos should almost always be placed in the top left-hand corner or at least, at the very top.
- The logo on each page should function as a hyper-link that takes the user back to the main page.
Content
- All code on all pages must validate!
- No content should be wider than 750px to accommodate old people.
- All images must contain meaningful alt attribute.
- Content should be located in the same general area on all pages throughout the site.
- Images used should not exceed 400k in file size.
Best Practices
- Use text headers or if using graphics, make sure file sizes are very small.
- Keep all image file sizes as small as possible to make the site more accessible for users on a slow connection.
- Keep all content length reasonable. If the content of a page gets too long, break it up into separate pages.
- NO FLASH!