Syllabus

Course Syllabus*

Interactive Design 1
Section: CGR-251-02

* syllabus subject to change

Week 01

Topics: Course Introduction, Syllabus, Core Skills, Constraints, Why Web is different than Print, What is Interactive/Interaction Design?, How the Internet Works, WordPress, Project File structure, HTML.
Technical Experiment: With TextEdit, create a HTML page with an external CSS file and post to the class server.

Week 02

Topics: HTML tags, Dreamweaver Basics, Constraints, User preferences & Target Audience(s), Personas.
Design 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.
Technical Experiment: Using Dreamweaver, create a biographical page about yourself using the HTML tags we discussed in class. Create an external CSS file and add styles to your bio page. Post the page to the class server.

Week 03

Topics: Visual Design for Web: Layout, Grid, Visual flow, Page layout using HTML & CSS, AP divs, Prototyping.
Design 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). You will need to do some informal research so you know something about the “tween” market. A microsite is an individual web page or cluster of pages which are meant to function as an auxiliary supplement to a primary website.
Technical Experiment: Create a 3 page website using biographical content. (It could be a simple portfolio site). You need to add content, images, and navigational  so the pages link to one another. This is demonstrated in the lynda.com videos below. Post your 3 page website to the class server. Be sure to use the proper file structure for the organization of your files.

Week 04

Topics: Divs & CSS, Navigation and Interface design, Web Critiques.
Design 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). Post your thoughts and decision-making process for this exercise on your WP blog.
Technical Experiment: Complete  HTML & CSS exercise: AP divs & Div tag. Build a basic structure using divs to create a 2-column web page layout 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. Be sure to create an external CSS file for your page. Post your web page to the class server.

Week 05

Topics: Divs & CSS, Visual Design for Web and Interaction: Typography, Web fonts, Midterm Project assignment.
Design Experiment: Re-design the page from last week 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.
Technical Experiment: Complete  HTML & CSS exercise: Div tag. Build a basic structure using divs to create two web pages: a 3-column layout and a faux column layout 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. Post your web page to the class server.

Week 06

Topics: Design Process, Design Comps/Mock-ups, Wireframes, Prototyping.

Week 07

Topics: Web Graphic Formats and Optimization, Image Slicing. Web Typography.
Technical Experiment: Image slicing exercise.

Week 08

Topics: Studio time: Working on Midterm Projects
Technical: Review: Using AP divs.

Week 09 - Midterm Due

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

Week 10

Topics: CSS Box Model. What is a mobile web site?
Design 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 experience 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.
Technical Experiment:  CSS Box Model, 3-column & Faux column structures: HTML & CSS exercise.

Week 11

Topics: Using Flash to build interactivity. Flash: timeline, layers, tweening, symbols: graphics, buttons, movie clips.
Design: Bring in Design Comp for home page of final project.
Technical Experiment: Column structures: HTML & CSS exercise. Creating simple animation in Flash.

Week 12

Topics: Using Flash to build interactivity. Flash: ActionScript, Creating animations and interactivity.
Design: Bring in Design Comp for 3 additional pages of final project.
Technical Experiment: Column structures: HTML & CSS exercise. Creating simple animation in Flash.

Week 13

Topics: Studio time: Working on Final Projects.

Week 14: Final Due

Topics: Final Project Critique: present website and mobile web comp.