Lab 1: Design Document
Point 50
start Jan 9
due Jan 22 , 11pm
Objectives: Work with a (ficticious) client to understand web site needs. Create design plan and present to class and client. Learn and apply Internet searching and researching techniques to gather
information.
Definition of Problem:
You will find (or serve as your own client) with a need for the creation of a information-based website. Ideally, I would like to to work in an area of interest to you or related to your career goals. For example, if you are studying psychology you might create a sight that represents a professional site for counselors to share or a site geared towards education in psychology or possibly even a counseling office that has with it informational pages. You will work with client to understand needs and from this develop a detailed design plan.
Your site should have:
FOR THIS PROJECT YOU ARE ONLY DELIVERING THE DESIGN DOCUMENT. We will be implemented parts of this web site in different labs throughout the course.
Website Requirements
As part of the proposal, you will give a detailed plan that will describe the company and what it does and the purpose of the website. Minimally, this site should include the following features:
- One or more navigation bars - these link to primary and secondary,etc. pages in your site. BE CONSISTENT ---- every (may be a few exceptions) page should have a (the main?) navigation bar(s) present.
- Logo/Name - Every page should have clear identity of the website. You can have small logos/ names but, they usually will be at the top of every page in the website. (visit real websites with similar missions to yours to see examples of this).
- Entrance Page (index.htm) - need to have a dynamic and insteresting entrance page ---think about filling the page with appropriate, dynamic and important information
- Contact Page (contact.htm) - this page must contain an XHTML form that accepts users name, email address, and comments and a submit and reset button. You may add other elements to your form and ofcourse need appriate labels.
- About Page (about.htm) - give the mission statement of this website and some (ficticious) history about the underlying organization. This page will have a feature in it that lists the location using google maps (something we will do in a later lab)
- Blog Page (blog.htm) -- here you will link up to a wordpress.com blog you will create later in another lab
- Facebook Link - this will be a link to a "facebook page" you will create later in another lab. You can use the facebook logo (they have images they publish for this use) and link from there. Make it small but, in a location a user might look for such things (follow us on facebook, twitter, etc).
- Informational pages
- Information and/or services offered (give detailed information about each topic/ service).
- Minimum of 3 PRIMARY categories of information//services -- each represented by at least one page linked off the Main navigation bar
- for example if you had a "professional site for counselors" you could have the categories of :
- Certificate Guidelines (describes for national certification, the education requirements and continuing education requirements given, also may give forms to be filled out to apply for certificate, testing dates and times for any tests required, etc.)
- Courses ( gives listing of upcomming continuing education courses offered state by state for this month)
- Resources (this is page that links up to online educational material, webinars, and videos related to counseling).
- The filename of the category pages should be appropriate to the category itself (e.g. "Courses" could be called courses.html). The content of this page should be full and appropriate to the category and these are things you may strongly consider having:
- secondary navigation bar if you have a lot of content that goes under this category
- images and media --- keep in mind loading time.
- good and interesting layout --don't just have a long vertical list --think about organizing across the horizon, use layout structures, think about color or spatial blocking.
- NOTE: for each primary page (like resources) you may have a secondary navigation bar to link to the many sub-pages you might have ---or you could have a indexed set of pages to go through --like in search results.
Additional Requirements:
- Design should be visually pleasing, professional, and should support the page content.
- Design should be appropriate for its intended audience.
- SEE Lab 3 for some minimum requirements for static artwork you will include in your website
- The site design should be controlled with CSS (we will learn what this means later in the course)
- The images should be well designed and complement the overall site design. They should not be distorted and should not include negative graphic effects. The images should be optimized and should download quickly. All images should have ALT and height and width tags (we will learn what this means later). If necessary the images should be resized using an image editor and not via the image height and width tag. Images from the Web can be used as long as you have obtained appropriate permission.
- Multimedia objects should be used with care.
- All images should be optimized and download quickly.
- One appropriate Flash file should be used. This movie may include photos, text or drawn characters and shapes. (note you have a tutorial on creating and animated banner in Flash...consider doing this).
- Notes: Unless otherwise approved by the instructor all graphics should be original and your own artwork. Graphics should look good: No jagged edges, text should be the same size on all buttons and be easy to read, colors should coordinate. When you're creating your graphics ask yourself "Would a real company use this?"
- The layout should not be cluttered.
- The background and text colors should be readable.
- Visitors who use a 1024x768 monitor should not have to scroll horiztonally (left to the right) very much or at all.
- Font sizes should be appropriate for the audience.
- Navigation should be obvious and easy to maneuver.
- and should be easy to find. The throughout the site. Folders should be created to store related files. A site map should be used so that visitors can find what they are looking for easily.
- Everything on the site should work. There should not be any missing graphics or broken links.
- The layout and design should work on both a PC and a Mac.
- Sites should work in all of the major browsers. Site will be checked with IE and Firefox.
- The site should download in a reasonable amount of time.
- Generate original art as much as possible (get instructor approval for use of non-original art and ask for permission from sources). Outside sources should be credited appropriately.
- The site should contain keywords and description meta tags. The site should be registered with Yahoo.
- The site should be XHTML compliant (transitional) and you should validate all pages prior to submitting it to your instructor. http://validator.w3.org/
|
Deliverables
- For the design Document use the
following MS Word template. (Example design document done for a n exercise not this project ...but, give you more ideas) TURN in to Blackboard->Labs->Lab1.
|