MM4403 Senior Project Development

image of bookStudents conduct project-based research of advanced topic in multimedia design.

Class Information

Course Competencies:
Upon completion of the course, the student should be able to:

  • Research technical and design needs of project.
  • Develop technical specifications for project.
  • Understand and apply principles of structural design to produce prototype project.
  • Debug and refine project based on prototype testing.
  • Effectively meet deadlines of production schedule.
  • Produce an original interactive project that incorporates multimedia elements.

Class Meetings: Section A. 11weeks, 1pm - 4pm, room 309. Monday, April 1, 2013 – Monday, June 10, 2013. Punctuality and attendance are expected. Points are deducted for excessive tardiness (more than 3).                                                                         
Session/Year: Spring 2013 
Instructor Name: Sharon Kaitner, M.Ed.
Email Address: skaitner@aii.edu                                                                 
Phone/Website: Please consult my website, http://casabasa.com, for updated course information.
Instructor Availability Outside of Class: Immediately before or following each class and via email.

 

Weekly Course Outline

Week 1:

Lecture: Research a topic and formulate an effective project proposal. Review of past projects/brainstorming for final portfolio project. Students will demonstrate their current portfolio planned for graduation. Class discussion on what can be considered for final projects.
Lab: In lab, students will begin research for their final project. In class, create an asset list of proposed technologies to be used.
Homework:

  • Read en passim this article on the value of creating technical specifications.
  • Write strategic section
    • Under strategic, please explain why you chose this senior project to be included in your portfolio. Cite two (2) similar sites for competitive analysis. State what works and does not work with each and how you propose to make your site better. Clearly state in the beginning and final paragraphs your purpose, goals, target audience and the kind of site it is (e.g. e-commerce).
  • Email me your homework link. Updates are due Sunday morning of each week.


Week 2:         

Lecture: Develop technical specifications for project. Technical specifications describe "the basic approach and technologies that will be used in the markup and layout of the site, but not the functionality. This spec will address issues such as whether the site will be database-driven, have cascading style sheets, require plug-ins, or be optimized for a particular color depth, screen resolution, platform, or browser." from website briefs.
Lab: Strategy Documentation: research scope of content. In teams, discuss proposed technical specifications for final project. Using the asset list of your chosen project, begin writing a technical brief. A technical brief "describes the visitors’ equipment, including their monitor size, connection speed, computer processor speed, amount of RAM, color depth, installed plug-ins, etc." from website briefs
Homework: Create a concept model that illustrates underlying conceptual structures.

  • Read this overview of web development fallacies (especially #4) and how you can communicate those aspects to your clients.
  • Write the technical specs from lab.
    • The technical section includes what your user needs to successfully view your project, as well as an asset list of all your proposed multimedia elements: type of html, css requirements, javascript libraries, video, sound, databases, programming scripts, graphics, xml, Flash, plug-ins, ram, sound card, resolution size, viewport, medium (desktop, tablet, smartphone, other), screen (projected?), platform, bandwidth, etc. As this is a senior level project, part of your grade is the successful incorporation of many of these items, and knowing their effect on your user should be clear as you design the paper prototype of your final project. Cite one (1) reference minimal on the type of user and explain how you will use this information within your design. Cite one (1) reference on the effect of one of your multimedia elements on the usability AND accessibility of your project.

Week 3:

Lecture: Understand principles of structural design. A good foundation leads to a solid project. This is why we spend time spec'ing out our project. Today focus should be on your user while you write your functional specifications.
Lab: Apply principles of structural design to produce prototype project.

  • The functional section will be a description of the interactions your user will experience. DO NOT describe in technical terms, but more in generalities. “Users will be guided through the page by clicking on a persistent navigation bar.” “I plan on using a large graphic in the upper left corner to draw the user in.” “There will be an infographic centered on the page to quickly orient the user to the page’s content.”  This section should clearly state what the user will get out of your site.

Use lab time to speak to others as you think about the design process and what you want to do. As a creative exercise, we will look at infographics and think how we may use within our final project.
Homework:

  • Review a template you can use for website specification, and this other site spec article for ideas.
  • Finish functional section of midterm research paper due week 6.
  • Begin infographic. This should be completed week 6 and will be included on final project due week 9 or 10.
  • Email me your production schedule. This schedule is included in next weeks homework but I want to know that you are already on top of your project.

Week 4:         

Lecture: Testing usability
Lab: Debug and refine project based on prototype testing. Getting creative: how do you think on behalf of your user?
Homework: Test interface and navigation items. Write creative section.

  • The creative section details the site and includes the “story” of your site. This will include the navigation and any call outs to help guide the user. Include flowchart of proposed pages with interactions noted (navigational items, click-throughs) and two wireframes of suggested home pages. In this section, state your navigational intentions, as well as the visual hierarchy. Note where the entry point of the page is visually and cite two (2) sources about user interaction or user experience.

    http://support.balsamiq.com/customer/portal/articles/107999-specifying-interaction-with-mockups

Week 5:

Lecture: Adding interactivity and multimedia
Lab: Write scripts and test.
Homework: Create template of inner pages. Post sketches to production log/homework page.

Week 6:         

Lecture: Reality check: where are you in the project. Debug and refine project based on prototype testing.
Lab: Presentation of documentation and project to date
Homework: Complete icons and visuals.

Week 7:         

Lecture: Debug and refine project based on prototype testing. HTML5, CSS3 and JQuery libraries.          
Lab: Update processes in production log. Link your project documentation to your homework site. Send copy to me. 15 points.
Homework: Continue work on final project.

Week 8:         

Lecture: Testing usability. [Quiz]
Lab: Debug and refine project based on prototype testing.
Homework: Test interface and navigation items. Send your project to two outside reviews and note comments in production log (online documentation).

Week 9:         

Lecture: Responsive web - Please make sure you are thinking of smartphones and tablets. Outside reviews due.
Lab: How-to's of testing your product.
Homework: Document user testing. Continue work on final project.

Week 10:       

Lecture: User testing and critique
Lab: Lab time to work on project. Individual meetings with instructor.
Homework: Complete final project.

Week 11:       

Lecture: Presentation of final project
Lab: All documentation and final project due by end of class, no exceptions.
Homework: none.

Final Project Requirements:

The course objectives state:
Upon completion of the course, the student should be able to:

  • Research technical and design needs of project.
  • Develop technical specifications for project.
  • Understand and apply principles of structural design to produce prototype project.
  • Debug and refine project based on prototype testing.
  • Effectively meet deadlines of production schedule.
  • Produce an original interactive project that incorporates multimedia elements.

Consider your final project for this class to be the equivalent of a master’s thesis. The first half of your 30-point grade is the research, due midterm week 6. You will research the technical needs for a portfolio quality interactive website. This research document will have four sections: Strategic, Technical, Functional and Creative.

Under strategic, please explain why you chose this senior project to be included in your portfolio. Cite two (2) similar sites for competitive analysis. State what works and does not work with each and how you propose to make your site better. Clearly state in the beginning and final paragraphs your purpose, goals, target audience and the kind of site it is (e.g. e-commerce).

The technical section includes what your user needs to successfully view your project, as well as an asset list of all your proposed multimedia elements: type of html, css requirements, javascript libraries, video, sound, databases, programming scripts, graphics, xml, Flash, plug-ins, ram, sound card, resolution size, viewport, medium (desktop, tablet, smartphone, other), screen (projected?), platform, bandwidth, etc. As this is a senior level project, part of your grade is the successful incorporation of many of these items, and knowing their effect on your user should be clear as you design the paper prototype of your final project. Cite one (1) reference minimal on the type of user and explain how you will use this information within your design. Cite one (1) reference on the effect of one of your multimedia elements on the usability AND accessibility of your project.

The functional section will be a description of the interactions your user will experience. DO NOT describe in technical terms, but more in generalities. “Users will be guided through the page by clicking on a persistent navigation bar.” “I plan on using a large graphic in the upper left corner to draw the user in.” “There will be an infographic centered on the page to quickly orient the user to the page’s content.”  This section should clearly state what the user will get out of your site.

In addition, please include a production schedule of how and what you intend to complete. Break down in weeks, with final project due week 10 if you are not in your final quarter, week 9 if you are a graduate-to-be.

The creative section details the site and includes the “story” of your site. This will include the navigation and any call outs to help guide the user. Include flowchart of proposed pages with interactions noted (navigational items, click-throughs) and two wireframes of suggested home pages. In this section, state your navigational intentions, as well as the visual hierarchy. Note where the entry point of the page is visually and cite two (2) sources about user interaction or user experience.

Since this section wraps up your research, include in your creative section how you will test your project to see if it meets your goals. Develop and include a ten question list you plan on using to test your project prototype (week 9). Items to include can be:

  • Did you know what to do when opening the project?
  • How easy was it for you to explore?
  • What did you like/dislike about…?
  • Did you want to know more?
  • How informative?
  • Download fast?
  • Clear branding or theme?

These are suggestions; you are expected to develop your own. Be sure to include markup and layout specs, as well as font sizes, hex colors, graphic sizes and any multimedia limitations, as you need.

The other 15 points belong to the final project itself, with the project due week 10 if you are not in your final quarter, week 9 if you are a graduate-to-be. There are two rubrics that follow. Rubrics are how the projects are graded on an objective level. They list certain items an instructor looks for to guide their grade. The first rubric is on your midterm research project and the second one lists the qualities you should keep in mind when constructing the final project.

Your final project is up to you but is based on the needs of your portfolio, and being portfolio quality. There are two firm requirements: the use of an infographic and that it is a “real” project. Instructor and student agree week 2 what your final project will be and include.


 

MM4403 Senior Project Development: Final Projects

Spring 2013

Karina Baylocq Pretty Placeholders | process specifications

William (Steve) Fuller Josh Baize | process specifications

Adriana Nottestad Star Dogs | process specifications

 

Past Student Work

Oscar Barajas | http://www.obarajas.aisites.com/mm4403/ | Lego Community (educational site)

Alfonse Surigao | http://alfonsewebdesign.com/school/mm4403/# | geolocation-based web app (html5 site with api)

Rizal Dingsalan | http://www.echoraven.com/syncalendar/proposal.html | SynCalendar (database driven social calendar) | process book

Cynthia Kong | http://ckongdesigns.com/mm4403/index.html | Tiny Turtles Daycare (e-commerce site) | process book

Melissa Picardo http://melissapicardo.com/dev/ | Secondhand Blessings (charity site) | process book

Age Nodado | http://ageiscool.aisites.com/spd/index.html | Ced.crimes (dj music site) | process book

Federico Clasing | http://fclasingr.aisites.com/classes/mm4403/ | Salon V (commercial site) | process book

Kelley Zerga | http://kzerga19.aisites.com/fall2012-senior_development/ | Life coaching (information site) | process book

Spring 2012

(documentation | link to final project)

Konstandinos Goumenidis | Final Project (St. Basil's Church)

Susan Lei | Final Project (Fugnai Construction)

Ian Sayre | Final Project (musician database)

Roman Diaz | Final Project (musician database)

Ricky Navarro | Final Project (Laura Guido Clark)

Ross Patton | Final Project

 

Winter 2012

Jenna Gerberding | Final Project (Rhythm n' Dance Center)

Helpful Links

UX Design Website
http://www.tutorial9.net/photoshop/
http://www.webdesignbooth.com/30-easy-to-follow
http://www.usabilityfirst.com/
http://logopond.com
http://www.internetonlinewebsite.com/
Color Tools: 
http://kuler.adobe.com/
http://www.colorsontheweb.com/colorwizard.asp
http://colourlovers.com
http://colorschemedesigner.com
Lorem Ipsum Text Generator:
http://www.lorem-ipsum.info/generator3
Contracts
http://www.wilsonweb.com/worksheet/pkg-con.htm

CSS Codes cheat sheet

http://blog.themeforest.net/tutorials/vertical-centering-with-css/

http://inspiredology.com/21-grid-based-websites/

What makes good web design? The psychology of the web user.

Page size design: what is optimal?

What is the best size (WIKI answers)

Browser stats

Interesting typographic web designs

Smashing Magazine

mastering-css-styling-design-elements/

Simplicity in Good Web Design

 


Scroll to top