Website Design
Design your Site Structure and Personality
Continue to work on your website project by creating a text document or web page with two sections, a development guide and a design guide. A sample document may help clarify what to aim toward. I will provide feedback on your draft document before you get too far into the creation of your actual website.
Development Guide
- Site Directory Structure - List the names of the folders and subfolders that will be included in your site. Include at least an images folder, and a css or styles folder. Include other folders appropriate to your website.
- Main Navigation - Create a navigational flow chart or outline, showing each unique page of the site and how they are linked together.
- HTML Template - Build an HTML template for your site that includes self-documenting HTML sections for the main elements of your site. Your template should at least include an identity section, a navigation section, and a content section. Add the HTML necessary to define your main navigation
- Wire Frame - Using your HTML template, build web page for each of the navigation sections of your site. The pages should be un-styled: black and white, with text headers and navigation links, but linked together. Clicking on any link should display another one of the pages in your wireframe which give the name of the section and lists the topics that will be included in that section of the site when complete.
- Interactivity List (optional)- List appropriate forms and script ideas along with their purpose and any necessary information.
Design Guide
- Layout or Storyboard – A visual reference that shows the general layout of the site. This is usually done with pen and paper first, then mocked up with Fireworks or Photoshop. For this project you may do just the pen and paper version. (Feel free to experiment with Fireworks or Photoshop if you have time.)
- Color Palette - A table showing the color palette appropriate to your site's personality that you plan to use to create the site. For each color, provide the hex value, the color chip and a name (for this page, I named some of my colors 'mute yellow', 'mustard', 'light maroon' and 'dark red'.) Your site color palette should include at least five different colors, not counting white and black.
- Style Guide – An initial list of style rules - not necessarily the styles themselves - just which styles you anticipate needing. You can add to this later as necessary.
- Media Assets – List any media files that you might want to use - along with information about these files including where the originals are located and licensing information. Typically, media files might include digital photos, graphics, music, video, and flash files - For this project you will most likely only have images and graphics.
Upload the completed documents to your course portfolio
- Upload your completed Development Guide and the Design Guide draft documents to your course portfolio site week 8 or drafts section. Link it to the appropriate index.html page.
- Be sure your page is viewable at http://studentfolders.student.cascadia.edu/bit112/