Syllabus

Course Syllabus*

Graphic Design 67
Web Design 3

Class 01

Topics: Syllabus, Core Skills, Constraints, Web Design: What is Interaction Design? Domain Name Registration, Web hosting, WordPress, XHTML, FTP
In-class: Create biographical web page in XHTML using TextEdit or Dreamweaver and post to the class server.
Reading: “Core Design Process” (Chapter 2), “Gathering Information” (pages 40-48) and “Understanding Your Audience” (pages 49-58) from Web ReDesign 2.0.

Class 02

Core Design Process – Defining the Project

Topics: W3C Discussion, Accessibility issues, Constraints, User preferences & Target Audience(s), Personas
In-class: Using moma.org as the client site, sketch a website 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.
Reading: Analyzing Your Competition (pages 59, 259-276) from Web ReDesign 2.0

Class 03

Design Site Structure:  Content, Wireframing, Sitemaps

Topics: Presenting content on the Web, What is Information Architecture?, Wireframes
In-class: Please bring a print-out of your work to class. We will look at homepage re-designs from last week.
Reading: Understanding Discovery, Determining Overall Goals, Preparing A Communication Brief, Creating a Project Plan (pages 60-67) Setting the Budget, Creating Schedules, Assigning Your Project Team, Setting Up Staging Areas, Planning for user Testing, Kicking off the Project (pages 67-85) from Web ReDesign 2.0

Class 04

Design Visual Interface

Topics: Web Standards, Visual Design for Web and Interaction: layout, grid, visual flow
In-class demo: 2-Column Structure & CSS
Reading: Addressing content, Auditing Existing content, Outlining content, Creating a content delivery plan, Sitemapping, Addressing Existing Site Organization, Determining Site Structure, Setting naming conventions (pages 86-106) from Web ReDesign 2.0

Class 05

Design Visual Interface

Topics: Navigation and Interface design, Web Critiques
In-class demo: 3-Column, Faux Column Structure & CSS
Reading: Wireframing, Addressing Navigation, Naming and Labeling, Defining Key User Paths, Developing the HTML Protosite, Creating User Scenarios (pages 107-116), Testing for Usability (pages 211-232) from Web ReDesign 2.0

Class 06

Build, Integrate, Launch

Topics: Design Comps/Mock-ups, Prototyping, Using Dreamweaver and Flash as Prototyping Tools
In-class demo: CSS Box Model, 3-Column, Faux Column Structure & CSS
Reading: Starting the creative process, Defining Smart Design, Reviewing Site Goals, Developing Concepts, Design for your audience, Presenting Design and Gathering Feedback, Confirming Flow and Functionality, Testing Functionality, Designers as Problem Solvers, Creating Graphic Templates, Creating a Design Style Guide (pages 118- 140) from Web ReDesign 2.0

Class 07

Build, Integrate, Launch

Topics: CSS Selector Tyoes, Typography for the Web, CSS.
In-class demo:  Dreamweaver and CSS
Reading: Working with Complex Functionality (pages 233-258) from Web ReDesign 2.0

April 15 — Spring Break — No class

Class 08

Build, Integrate, Launch

Topics: Building website prototype: more XHTML markup, CSS, in-class lab time
In-class demo: Integrating Flash, audio & video

Class 09 — April 29

In-class: Midterm Project Critiques: Present website design for final
Break into assigned groups. Choose design direciton for final project. Assign roles to individual members of your group: Content Developer, Information Architect, Visual Designer, and Technical Producer. Select a name for your “studio.” You will need to create a WordPress blog where everyone can post entries regarding the design process for the final project.

Class 10

Topics: What are current best practices?, Mobile Web Critiques
In-class: Working with team
Assignment: 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.
Deliverables due for next week: Defining Project & Audience (All)– use the Client Survey, Content Outline (Content Developer) Sitemap (Information Architect)

Class 11

Topics: What is Social Media? Using Flash to build mobile web interfaces
In-class: Working with team
Deliverables due: Schedule (All), Budget (All), Wireframe (Information Architect) Design comps (Designer)

Class 12

In-class: Working with team, Client meeting
Deliverables due: Final Content (Content Developer) Final Design (Designer)

Class 13

In-class: Working with team, Client meeting
Deliverables due: Home page & landing page (Technical Producer)

Class 14

In-class: Working with team, Client meeting
Deliverable due: Mobile web prototype (Technical Producer)

Class 15 — June 10

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

* syllabus subject to change