#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.
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:
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):
Click here for Creating a Flowchart in Microsoft Word (5:20 min. YouTube video) (It may take a few moments to load)
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.
|Find Three Sample Sites||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.) Ex:
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.||10|
|Layout Header and Content areas for each of the 4 or 5 pages on your proposed site.||On your mockup design page show the top Header (or Masthead) and where the basic page Content will be. If multiple columns of divisions will be used, show them.||10|
|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.|