Students conduct project-based research of advanced topic in multimedia design.
Course Competencies:
Upon completion of the course, the student should be able to:
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:
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.
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.
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:
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.
Lecture: Presentation of final project
Lab: All documentation and final project due by end of class, no exceptions.
Homework: none.
The course objectives state:
Upon completion of the course, the student should be able to:
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:
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.
|
Karina Baylocq Pretty Placeholders | process specifications
William (Steve) Fuller Josh Baize | process specifications
Adriana Nottestad Star Dogs | process specifications
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
Jenna Gerberding | Final Project (Rhythm n' Dance Center)
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)
Interesting typographic web designs
mastering-css-styling-design-elements/