Syllabus

Course Syllabus*

Interactive Design 1
Section: CGR-251-02

Week 01

Topics: Syllabus, Core Skills, Constraints, What is Interaction Design?, How the Internet Works, WordPress, XHTML
Studio
Experiment: Create XHTML page using TextEdit and post to the class server.

Week 02

Topics: HTML tags, W3C Discussion, Accessibility issues, Constraints, User preferences & Target Audience(s), Personas
Studio Experiment
: Using moma.org as the client site, sketch a web home page re-design in Photoshop/Illustrator exploring design directions suitable for your three personas. Post your process for this exercise on your WP blog.

Week 03

Topics: Web Standards, Visual Design for Web and Interaction: layout, grid, visual flow
Studio Experiment: Design the composition of a home page for a new website. The specification is to design a microsite for moma.org suitable for the target audience of 8-12 year olds (commonly referred to as the “tween” market). Your layout/grid and visual flow should take in consideration this target market. (You will need to do some informal research so you know something about the “tween” market!) I want you to complete two different design directions. The two sketches must represent two different grid systems. You can “break the grid” on one of the sketches if you’d like. Another specification for the design is it must contain images, text, and pull-quotes in addition to anything else you’d like to add to the site. Post your thoughts and decision-making process for this exercise on your WP blog.

Week 04

Topics: Divs & CSS, Navigation and Interface design, Web Critiques
Studio Experiment: Complete  XHTML & CSS exercise: Div tag. Create a basic structure using divs and a 2-column structure web page using TextEdit or the Code view in Dreamweaver. Change the CSS so you do not use the exact CSS I show in the example at the end of the class notes below. Bring your html and css files to class.

Week 05

Topics: Visual Design for Web and Interaction: typography, Web fonts, color, material and shape. Midterm Project assignment.
Studio Experiment:
The specification for the project is to take one of the designs you have created so far and to focus on the design of the navigation. For this project you will need to work on the design of the home page in addition to two levels of “drill down” pages. You will be responsible for designing one of the sections from the Main navigation– any section except the Home page. (level 1), a SubCategory page (level 2) and a Sub-SubCategory (level 3).  Re-design the pageS using a completely different color palette, typographical layout using fonts suitable for the web. Your design decisions should again be suitable for your target market. Post your thoughts and decision-making process for this exercise on your WP blog.

Week 06

Topics: Midterm Project assignment, Design Comps/Mock-ups, Wireframes, Prototyping, Prototyping Tools, Web Graphic Formats, Dreamweaver Intro.
Studio Experiment: Using HTML as prototyping tool. HTML & CSS exercise

Week 07

Topics: Building website prototype: Image optimization for Web, image slicing, CSS, more XHTML markup.
Studio Demonstration: AP divs, Tables and CSS

Week 08

Topics: Building website prototype: more XHTML markup, CSS, in-class studio time
Studio Experiment: HTML & CSS exercise on Faux Columns and 3-column structure

Week 09: November 4

Topics: Midterm Project Critiques: present website prototype. Final Project assignment

Week 10

Topics: Interaction Design Basics, What are current best practices?, Mobile Critiques, What is Social Media? Proposal for Final Project Due.
Studio Experiment: Create a “sketch” of an interface for the web project (home page only) for your final project. Think about how the website is used and ways in which you can create a “simple, compelling mobile web experiences that satisfies a real need.”  You may use this iPhone GUI (Graphical User Interface) PSD file if you would like to create the sketch in Photoshop. Post your thoughts and decision-making process for this exercise on your WP blog. Bring your sketches to our next class.

Week 11

Topics: Smart Applications and Clever Devices, Using Flash to build interfaces, in-class studio time
Studio Experiment: C
reate a “sketch” of an interface for a Web App for your final project including a feature of  Smart Applications and Clever Devices. (*See the class notes) You may also want to include some aspect of “social” or “new” media. I’d like you to explore solutions that lie outside of our current experiences so work on developing a concept we perhaps haven’t seen before. Post your thoughts and decision-making process for this exercise on your WP blog. Bring printouts of all your sketches from this week and last week to our next class.

Week 12

Topics: Using Flash to build interfaces, Bring in Design Comps for final project. in-class studio time
Studio Experiment: Using Flash as prototyping tool.

Week 13

Topics: Using Flash as prototyping tool, in-class studio time

Week 14: December 9

Topics: Final Project Critique: Present website and mobile device prototypes

* syllabus subject to change