Project 2: Flash Web Application
Assignment Date: Feb 23, 2010
Pre-production Materials: site outline, flowcharts, interface designs - March 2, 2010
Site Skeleton: March 9, 2010
Progress Check and Test Materials: March 23, 50 - 75% done - beginning of lab
Due Date: Tuesday, March 30, beginning of lab |
|
Background:
The purpose of this project is for students to demonstrate their ability to create a dynamic, non-traditional web application using a variety of multimedia. Specifically, students are to create a web application using the Adobe Flash development platform and a number of audio, video, animation, and interactive components. Students may create any type of application they wish as long as it conforms to the required project specifications and is sufficiently optimized for web distribution. Students must conduct basic quality assurance, usability, and assessment testing to ensure product validation. Project assessment criteria include technical proficiency, creativity, communication, aesthetics, interactivity, programming, and assessment and validation.
General Project Specifications:
- Platform: Created with the Flash Development Platform
- Connections: Incorporates external links
- Sound: Includes audio (where applicable) - background music, rollover effects,
voice -overs, etc...
- Video: Incorporates at least 1 video (where applicable) - usually included to showcase animations
and video work
- Optimization: Optimized for and published effectively on the World Wide Web
- Resolution - no less than 1024 x 768 if a liquid GUI is not being designed
- Download Efficiency - effective use of pre-loaders, separate movies, externally-loaded assets, etc...
- Embedded: Note that publishing to the Web does not simply mean referring to an .swf file located on a server. The application must be embedded in an HTML page named index.html.
- Testing: tested for quality assurance and usability
- Real World Competition: Many people apply for positions, but of course, only some will get hired. To
reflect this "real world" form of open competition,
only a certain percentage of "A's" will be awarded,
with "A" grades reflecting people who will be hired.
The remaining web sites will be graded on fairly, but will only
be able to receive the highest possible grade of 89%.
Content:
Any type of application is acceptable for this project, as long as it is commensurate with 5 weeks of work and is designed specifically for Web usage. Students may choose to create a portfolio web site for this project, but if they do so it should meet a certain set of criteria (see below.) Other possible types of applications include a wide variety of projects...the needs of which should be well-suited to developing with the Flash platform.
General Design Considerations:
- Be sure to consider demographics such as audience age, culture, connection speed, etc...
- Students should design their applications to function adequately at 56 Kb modem connections, or provide both low-speed and high-speed alternative versions.
- Generally speaking, students should design for 1024 x 768 resolution, even though 800 x 600 is still widely used.
- Web sites will be tested on both Internet Explorer and FireFox.
Optimization: The efficiency of web sites are just as important as their content. As such, web sites should be efficient in factors such as animation, navigation, and download speeds. Graphics, audio, and video should be optimized as much as possible, and pre-loaders used wherever necessary. Lack of efficiency in any aspect will result in a lower grade.
Junk Animation: Animation should serve a purpose, not just be included to make web sites more "flashy". The primary reason intro-animations are taboo in this class they usually do nothing other than make people leave your site. While creative, interesting animation will be considered positively, junk animation will result in a lowering of your grade.
Portfolio Design Considerations:
If students choose this type of application to develop, they should remember that it will be a showcase for their work and is one of the primary means of an employer’s evaluation. While the web site should be a representation of students and their particular styles, remember that style = specialization and that specialized sites might result in fewer options for employment.
The goal should be diversity and flexibility. For example, an e-business development firm may be hesitant
to hire a multimedia developer with a Grateful Dead portfolio
theme. While there IS logic in thinking,"Well, I wouldn't
want to work for an uptight company like that," you never
know what might turn an employer off. Usually, the best thing
to do is to balance creativity with professionalism.
Another tip to remember is that it may not be
a good idea for students to include portrait photos or personal interests on their
portfolio sites. While we hate to think of personal bias or preconception
as a hiring determinate, the sad fact is that people HAVE preconceptions,
whether they are conscious or unconscious.
For example, say someone
with a buzz-cut puts their picture on their web site, and your
potential employer was once bullied by a guy with a buzz cut.
Unconsciously, he may get a negative impression of your web site
without even knowing why, and choose to discard your application.
Let employers get to the point where they will first see your face at the interview where they
can form a balanced impression. It sounds ridiculous, but we are a ridiculous species. Employers
make those kinds of decisions, whether they are deliberate or unintentional
(especially at the pace they review material). Rather than contend
with these problems, the best solution is to try to minimize the
possibility of pre-conceived ideas on the part of the employer.
Previous Student Projects:
Portfolio Site Requirements:
Portfolio Web site Requirements: The web site is required
to include the following sections, although students can include more
if they think it will be beneficial:
- Home/ Main
- Resume
- Portfolio
- Contact
The Home Page is the most important piece of screen real-estate, and should be used effectively. It is the first (and often only) page potential employers see. Students should remember that most employers spend an average time of 30 - 45 seconds determining whether or not their sites are worth exploring. Any more than that, they're usually on their way to the next portfolio. This makes a 25-second pre-loader a severe limitation in this type of web site
The Resume should be available in both Web and Print versions. Usually a pdf document or printable web page will suffice for the print format, but the choice is up to the student.
The Portfolio: This will be the most involved section and it should be the most impressive (next to the main page). While it is always beneficial to be creative, remember that efficiency is key. Navigation should both be interesting AND intuitive.
For example, we have all seen the standard portfolio
interface "buttons here, image window there". You click
a square button and the image in the wIndow changes. As Homer
would say...... "BBBBOOOOOORRRRRING!".
However, the reason this type of interface this is so often used
is because its easy to put together and to navigate, which is
NOT a bad thing. We've also all been to some over-designed site
where we can't even figure out where the buttons ARE, let alone
navigate with them. So the message is....balance creativity with
usability.
Quality Assurance, Usability, and Assessment Testing:
Students should always test their applications....and their are many reasons for doing so. Doing so not only validates the quality of their products...it also shows potential clients and employers that they are capable of doing more than pushing pixels and writing code. Failure to implement proper testing procedures makes both the application and the developer extremely vulnerable.
For this project, students must subject their projects to one round of testing, analysis, and subsequent revisions. This should include both usability and assessment testing (quality assurance testing is assumed.) Areas of focus should include:
- Aesthetics and Graphics - visually pleasing, well-made graphics, color scheme, etc...
- Layout and General Design - placement of elements to convey site content
- Navigation and Organization - translates into ability to move within application and find content
- Media Elements - effectiveness of audio, video, etc...
- Communication - effectively conveys intended content
- Optimization - downloaded quickly and efficiently, smooth animations, etc....
- Creativity - novel, unique application
- Professionalism
The exact method for implementing testing will be left to the student, although it must include a written format just as a survey or questionnaire. Students will be expected to submit copies of these materials in a short Test Packet which should include:
- Cover Page: Name, class section, date
- Description: 1-2 paragraphs: Type of application created, description of intended audience.
- Methodology: 2-3 paragraph description of testing procedures, test subjects, etc...
- Data: Consolidation of test data obtained
- Analysis: Conclusions drawn from analysis of test data (strengths, weakness, what needs to be fixed)
- Revision Summary: Description of changes made to application based on analysis of test data.
Recommended Procedures:
To be successful, students must develop a flowchart (or site map), a brief outline describing the sections of their applications, and 3 interface design variations. Before students begin development they must have their preliminary and pre-production work approved. Failure to have this work approved will result in a lower grade. Additionally, once pre-production work is approved the project should not significantly deviate from the original design without the consent of the instructor.
- Concept: Determine the goals, tasks, and functions of the application.
- Demographics: Be sure to examine the intended target audience. Consider all factors such as experience, technology, etc...
- Organizational Design: Create an flowchart/ site map and outline depicting the organization of the application. The document/ chart should show how the application is organized while the site outline should describe the content that will be presented in various sections.
- Visual Design: Develop a visual theme or style for the application. Create 3 full-color interface designs using either digital or hand-drawn techniques. Poor sketches or unacceptable presentation (wrinkles in the paper, eraser marks, etc) will result in grade deduction. Students will need color prints for their final submission.
- Design Approval: Students will presents their designs to the instruction and get feedback and approval for the project. Students are not allowed to proceed with the project without approval from the instructor.
- Asset Generation/ Collection: Once students have received approval from your instructor, they should begin creating and collecting your assets (raster images, vector images, sound files, etc) Graphics created by the developer will generally receive a better grade than "borrowed" graphics.
- Development: Using their designs and assets, students should begin to create their applications with Adobe Flash. Provide the necessary level of organization and interactivity with ActionScript.
- Publication and Distribution: Students should publish web site to an appropriate location. This can be on their ics accounts or some other server accessible by the World Wide Web.
- Q/A Testing: Test your application for quality assurance. Find and correct any bugs or design flaws. This testing should be done concurrently and once the "beta" version is complete.
- Usability and Assessment Testing: Create a simple standardized test to examine your site. Run this test on a minimum of 5 testers and analyze the results.
- Revision: Revise your design according to the results of your testing. Publish the final version of your site.
- Project Submission: Students will submit an Itoya portfolio with all files and assets, including CD or DVD disk. The disk should have copies of all your assets, .fla files, .swf files, and associated HTML files. Make sure the URL for the published site is included somewhere that it can be easily found.
- Submit .swf files to the appropriate folder on the 'G' drive using the file naming conventions outlined on the course web site These files should reflect what is on the web server. (No graphic files or any other supplementary files are necessary.)
Deliverables:
All items in a Itoya portfolio labeled with students name, CGT 353-Lab #, Name of Instructor, the Assignment Name, and Due Date. The portfolios have a space on the spine for labels. Submit the following materials with the portfolio in the following order:
- Spine Label and Cover Page:
- Student name
- Class name
- Section number
- Semester and date
- URL of application
- Pre-Production Materials:
- Flowchart/ Site map
- Outline
- 3 interface design prints (color - either drawn or printed)
- References - images, URL's, etc...
- Test Packet:
- Cover Page: Name, class section, date
- Description: 1-2 paragraphs: Type of application created, description of intended audience.
- Methodology: 2-3 paragraph description of testing procedures, test subjects, etc...
- Data: Consolidation of test data obtained
- Analysis: Conclusions drawn from analysis of test data (strengths, weakness, what needs to be fixed)
- Revision Summary: Description of changes made to application based on analysis of test data.
- Click here to see a sample test packet
- CD or DVD with your .fla files, .swf files, image files and/or associated
HTML files. Use the submission conventions outlined on the web site
In addition to having the application files on a disk, the application must also be published on the Web and be accessible by
the instructor. Make sure the URL for the published
site is included on the cover page.
Students must also submit their published site to the
P2 submission folder on the "G" Drive. Students should place all files in a single folder entitled LastName_FirstName_P2. Students should make sure they place their folders in the correct section number and use the file naming conventions outlined on the web site
Grading Criteria:
Grades will be based on an open competition between students. In addition to instructor’s reviews, projects may be evaluated by other faculty. Since the majority of the class will have taken some design and web development classes, students will be expected to meet the expectations assumed in their passing of those courses. This includes a basic understanding of design and web development techniques. For those new to CGT or those who have not taken these basic classes, the instructor will work with those individual students.
All projects will be graded on the following criteria:
- Visual Design and Aesthetics:
- graphics
- layout
- navigation elements
- animations
- Organizational Design:
- layout
- file/ site structure
- menus, buttons, and other navigational elements
- Technical Implementation:
- ActionScripting
- Media integration - audio, video, etc..
- Other
- Optimization and Efficiency:
- Effective use of pre-loaders
- Division of files
- Downloading/ Playback
- Animation
- Creativity and Communicative Value:
- Pre-Production:
- Design mockups
- Site Outline
- Flowchart/ Site Map
- Other
- Usability and Assessment Testing
- Experimental Design
- Technique and Execution
- Results
- Insight and Interpretation
- Professionalism
- Professionalism
- Neatly submitted elements
- All components delivered
Above average grades will be awarded to those projects that
go above and beyond the general specifications of the project.
Implementation of the following elements will generally tend to
improve the project:
- Aesthetics - original, aesthetically pleasing graphics and overall design
- Animation - advanced but appropriate for project
- Production - additional quality content
- Advanced Interactivity - effective or unique use of ActionScripting or some other technology
- Unique, creative pre loaders
- Flexible/ Liquid GUI's
- Integration of external technologies - XML, Swift 3D, etc....
|
|
|
