I. Purpose
The purpose of Flowchart and Storyboard assignment is to formally document the interaction design for the Website that you will create at the end of this semester. The flowchart and storyboard document is a major deliverable of the design phase of the Web development process. The document should demonstrate attention to detail and accurately reflect the intended design of your Website.
II. Steps
1) Review the example Flowchart and Storyboard documents (template and examples) on Blackboard (in the “Project 2” folder) to gain an understanding of the format and content for these documents. Be sure to study both the template and the completed documents.
2) Using the project company type that you wrote about in your Review Paper (Project #1), pick a fictional company that you will use to create your own Website. For example, if you wrote about a Non-Profit organization then your fictional Website should be a Non-Profit organization.
3) Consider the design of Websites that you researched, and use your own creativity and multimedia design knowledge to envision the design and interaction for your own fictional Website. Once you have an idea about the type of Website that you want to design, you will formally document your design for this assignment.
4) Using the template and examples provided on Blackboard (in the “Project 2” folder), develop a flowchart and storyboard for your fictional Website. It will be a single MS Word document containing the flowchart and storyboard for your Website as follows:
• The first page of your document will be the flowchart of your Website.
• The Home page of your Website should be based on a responsive web design (RWD), so the layout and content adjust according to different device and screen sizes, i.e., desktop (769px~1232px), tablet (481px~768px), and mobile (480px and below).
• The rest of the document will be your storyboards. There will be three storyboard pages for the Home page (i.e., desktop, tablet, and mobile) and one storyboard page for every other Web page in your Website.
• Your Website will have a minimum of 8 pages; therefore, there will be a minimum of 10 storyboard pages in your document (in addition to one page for your flowchart).
• One of the pages of your Website will be a Site Map (see https://cos.gmu.edu/sitemap/ for an example of a Site Map).
• Your site should include a location for a logo (Project #3) as well as a 20-second animation commercial (Project #4) which is no larger than 800×600 and delivers some message about your organization. These will be designed in later projects; for now, just make sure you identify where they will go.
• Your site should include a navigation bar/menu/tab with rollover buttons/links, which can be graphical, link or CSS-based.
• You will define all font information and color specifications to be used on each page of your Website by specifying the hexadecimal code or illustrating the actual color in your storyboard.
• Use of FRAMES is not permitted!
5) Submit your completed Reviews via Blackboard using the Assignments Tool (“Course Tools” “Assignments” follow the “Project 2: Storyboard” link).
Note: This storyboard will be used to grade your final project to insure that you have followed what you stated. Overall, the Storyboard will be one page for the flowchart and at least eight pages of storyboard, for a minimum of thirteen pages in total.
III. Grading
Description Points
Flowchart and storyboard is submitted as a single MS Word document. 1
Flowchart is the first page, followed by a minimum of 10 storyboard pages. 1
Document includes three storyboards for the Home page (i.e., desktop, tablet, mobile) 3
Document includes a Site Map. 1
Flowchart follows the sample and guidelines documents. 3
Header Information: All fields are complete and accurate for all storyboard pages
• Client Name – provide the Company Name here
• Project Title – “Company Website” or some other meaningful name
• Last Update – date of last update
• Name of Designer – your name
• Panel/Page ID – name of HTML file (e.g., “SiteMap.html”)
• Panel/Page/Frame No – Descriptive name of Web page (e.g., “Site Map”) 2
Copy Text: Copy Text field is complete and descriptive. Section is clearly written and free of spelling and grammatical errors. Font information and color specifications are included. Fonts are not too large or too small. 2
User Interactions: User Interactions field provides descriptive details of the navigation for the Website. 2
Hyperlinks: All appropriate hyperlinks are listed for each page. The hyperlinks should include all button and text hyperlinks that are shown in the Panel Layout. 2
Audio/Video Inclusion Controls: If appropriate, specify any audio/video elements. If none needed, the field should indicate “None”. 2
Color specifications: Colors are specified in the hexadecimal code or illustrated the in the Panel Layout section. Colors are aesthetically balanced and provide good contrast. 2
Panel Layout: The Panel Layout section conveys the look and feel of the Website through a visually detailed mock-up of each screen
Sample Solution
