Home   CGS 2820C
  Web Development
#01 Grading Criteria for:
Design Phase, Site Mockup, and Deadline Schedule.
Using Microsoft Word, Adobe or another editor.

Description: During this class you will use Notepad, then later a web editor, such as Dreamweaver or Expression Web, to build at least a 5-page "portfolio" Personal or Business website for yourself or for a real or perspective client. At minimum, by the end of the semester, your website will have a Home page with Navigation links to a Resume page, a Portfolio page (often with a collection of images and short descriptions showcasing things you have done or services you offer), a Newsletter (or an About our Services page), and a working "Server Side" Contact Form.

Try to use this as an opportunity to have a professionally prepared online resume and also a place to show off your talents and creativity and skills so that you can be ready to apply for any potential employment opportunity or promotion that may open in the future. Note: if you build a business site for someone else, you still must create and submit an online resume, even if it is not part of the overall navigation.
(Do NOT build your site by filling in the blanks of one of the online Template forms that are provided by hosting companies for users without web skills.)

This first project is the very important Design Phase of your website Development. It will include a site Design Mockup, sometimes called a WireFrame (a page schematic or visual guide that may only use boxes to represent the skeletal framework of how a website in organized, but not necessarily how it looks), and a sitemap flowchart or Story Board. It will show where the masthead is located, if the navigation is horizontal or vertical, how many columns will be on the page... This document will also include phased delivery Deadlines (clearly describing the features and maximum number of pages - to avoid scope creep), with an area for Client Sign-off. At the bottom you will include Guideline hints. The entire Mockup will be saved as a .PDF document. You can use Microsoft Word (choose Save as Type: PDF) or an Adobe product or another software package to create this project.

If you are doing a website for someone's business, try to learn about their business before your first meeting. When you meet your client for the first time, ask relevant questions, such as:

  1. What does the company do?
  2. Who will give final authorization for this project?
  3. Who are the company's clients or web site visitors or target market?
  4. What is the goal of the website?
  5. Does the company have a logo and/or color theme?
  6. What is the project budget for building the site?
  7. Will your site need future updates?
  8. What is the project budget for maintaining the site?
  9. What is the project deadline?
  10. Do you have the original or legally authorized graphics (that do not infringe on copyrights) that will be needed for this site?
  11. Do you have text content (that will not violate copyright laws) for the website?
  12. Will this site connect to an online database?
  13. What are potential problems that might arise during the development of this site?

For accessibility (allowing individuals with motor and visual limitations to easily navigate your site) and with plain old logic in mind, try to organize your site's navigation in a left-to-right and/or top-to-bottom manner. This is important because screen readers, such as JAWS for Windows and Dragon Naturally Speaking, start reading from the upper-left corner of the Document window.

Keep your page layout, header, logo, and navigation consistent to ensure a good user experience. Design your site so any user can click through the pages in your site without getting confused.

For an online Dreamweaver tutorial on Planning your website design, see:

For Web Authoring Rules see (it may take a little while to load):
http://www.studiobast.com/sb_students/content/WABC_Book.pdf Web Authoring Rules Chapter 3
For Planning Your Website see:
http://www.studiobast.com/sb_students/content/WABC_Book.pdf Planning Your Work Chapter 5

Click here for Creating a Flowchart in Microsoft Word (5:20 min. YouTube video) (It may take a few moments to load)
I realize you are not doing a programming flowchart for this process, but this video does show how to use Shapes in Word

It is simply the Design Phase Mockup. It is NOT supposed to work   : -)

For samples see: http://faculty.scf.edu/WinterF/0ClassFolders/2820Web/SamplesMockup/
For a short helpful Design video from a DreamWeaver Tutorial series see:
For Free Design software see: http://www.gliffy.com/flowchart-software/
ALL assignments MUST be submitted online through the Canvas [Assignment Dropbox].
I cannot assign a grade to an empty [Assignment Dropbox] item.
Topic Directions Points
Find Three Sample Sites that you like.

To the right of or under each link, mention what you like specifically about that site.
Find three (3) sites similar to your proposed site, then in a Word Processing document or in Adobe, copy and paste the URL links to each of them. (Usually you ask your client to do this for you before you begin.)
To the right of or under each link, mention what you like specifically about that site. For example:
   Existing sites that resemble site to be developed:
   http://siteName1.com (good overall look)
   http://siteName2.com (great navigation)
   http://siteName3.com (good header)
Screen capture your favorite sample site Go to your favorite of the three sites and tap [Alt] + [Print Screen] (holding both keys down at the same time) to do a screen capture of its home page and paste (Ctrl + V or Edit > Paste) the screen capture into your document. (Usually you ask your client to do this for you before you begin.) 10
Do a site Mockup or WireFrame.
It is a mockup, showing the basic proposed future layout - it is not supposed to work.
In Word Processor, Adobe, web page editor or paint program do a Typed Mockup or WireFrame, perhaps with a Story Board of each of the 4 required pages (Home page, Resume, Portfolio page, Contact Form.) This is a very rough copy with very little detail and just place holders for images. If you use a paint program, paste the images into your Word Processor document. Optional
Layout Header and Content areas for each of the 4 or 5 pages on your proposed site. Show the column layout where appropriate. On your mockup design page show the top Header (or Masthead) and where the basic page Content will be. If multiple Columns or divisions will be used, show them and some mockup of their content. 20
Layout Navigation - vertical or horizontal
Home | Portfolio | Resume | Newsletter | Contact
On your mockup design pages show the basic concept layout of how either the top Navigation or side Navigation bars will appear and what the Nav links will be. 10
Image layout Show or describe the layout of Images. The actual images are not needed at this time, you can just use place holders. 10
Deadline sheet with Client Sign-off
The Deadline list may include:
Finish Design Mockup
Layout Home page
Design Style Sheet
Finish Home page
Finish Resume page
Finish Portfolio Page
Finish Contact Page
Make final modifications
Create a item by item Deadline list with Client Sign-off lines (the client may be real or you for educational purposes) for approval as each section of each page is completed.
   __/__/__ Completion Design Mockup ____
   __/__/__ Completion of Home page and CSS ____
   __/__/__ Completion of Portfolio page ____
Web Design Guidelines Do a Web search for Web Design Guidelines that you will follow as you complete your site. List 10 on the most important Guidelines that you will follow as you build your website. 10

Save Mockup, Deadlines, Guidelines as a single document .pdf file.

Note 1: .pdf files can be opened on the Web more readily than .doc files.

Note 2: .pdf files are less likely to have a virus.

Note 3: .pdf proposals are harder for someone else to modify or falsify.

All of the above should be neatly typed and laid out as a single document on a Word Processor or in Adobe. If you used a Word Processing document save the final project as a PDF. If you used Adobe, save the final mockup project as a PDF.

Note: In Microsoft Word choose "Save As" a PDF Page which will automatically add a .pdf extension. (Do not use spaces in filenames that will be put on the web.)

When done, go to the 01 Mockup assignment dropbox in Canvas and upload your file.
If you do not see anything there, you did not successfully submit it and I cannot assign a grade to it.
Upload your .pdf or .doc or .docx or other file to the SCF Canvas online site in the [Assignment Dropbox]. Do not print this assignment out.
You will upload it to Canvas online course management site before the due date so it can be graded.
You will lose 3 points for each day late.