RISD Division of Continuing Education :: Spring 2005

Principles of Designing for the Screen :: Melissa St. Laurent

Homeˆ401-683-1380, Cellˆ401-369-2487

risd@gagnet.net

Class Resources: http://www.faculty.risd.edu/cefaculty/MLAURENT

 

MISC Info:

Supplies for this course:

            Students are encouraged to bring any existing graphics work to class.

            1 3-Ring Binder

            USB Key for storage and file transportation

 

Reading List:

1. Required: The Non-Designers Web Book By Robin Williams

 

Grading:

Grades will be based on class participation, attendance, grasp of technical material, and projects

 

Homework Assignments:

The required reading should be completed throughout the class. I would like you to try and read the entire Non-Designers design book as well as the handouts. Assignments must be completed by the start of the following class.

 

Attendance:

As in any creative and/or technical learning situation, class attendance is extremely important. In the event that an absence is unavoidable, contact the instructor prior to class via e-mail.

 

 

Class 1: Introduction

Basic overview of design principles and their relationship with digital media.

 

Expectations Ð Class Format and structure, assignments, materials, grading and final project overview.

Handout distribution

Complete ÒStudent experience SurveyÓ

Discuss classÕs knowledge level and expectations for the course.

 

In Class project: Discussion of Non-linear media and what that means to the designer. Landscape VS. print design and the differences between the two. How TV and computers have changed our our way of viewing media and the way we read and respond to advertisements.

 

For next Time: Bring a print piece that correlates to an online website. Examples: post card, business card, letterhead, flyer, in magazine advertisement etc.

 

Reading: Elements of design handout.

 

 

Class 2: Basic Design Overview and Examples

Introduction to Basic Design Principles including: unity, contrast, balance, proximity, rhythm, alignment, and others.

 

In Class Presentations: Each student will present their print piece and corresponding website. An all class discussion will follow.

 

Assignments: Start thinking about the design concepts. Sketch out designs that employ the principles to be scanned and created digitally during the next class. Begin sketching design ideas for our interfaces that employ the design principles. This is a good time to create a self-promotional piece and decide what type of output you will need examples include: DVD Menu, CD-Rom presentation, Kiosk Menu etc.

 

Reading: The Non-Designers Web Book By Robin Williams Chapters 5, 6 and 7.

 

Class 3: Planning Information and Graphics
Creating organizing and managing information while incorporating design principles with screen principles with brainstorming, storyboarding and research. We will be covering the following:

á       Screen Real estate and Screen Design Considerations

á       Information levels and structure

á       Target audience

á       Storyboarding and Flowcharting

 

In Class Project: Scan sketches and begin to roughly design your mockup presentation.

 

Assignments: Work on the mockup to the point that is completely designed but does not have to be functional. Begin storyboarding your ideas for a web page.

 

Reading: Planning Handout.

 

 

Class 4: Screen Design Considerations

More on screen design principles, discussion of web design principles.

á       The digital color palette / web palette

á       Screen resolution expectations for different mediums (TV, Computer screen, website, kiosk).

á       File structure and file naming.

 

In Class Project: Mockup project presentations.

 

Assignments: Create a storyboard and flowchart of a website. Be prepared to begin designing this during the next class.

 

Reading: The Non-Designers Web Book By Robin Williams Chapters 1, 2 and 3.

 

 

Class 5: Web Design Tutorial

Build a 3 page website in 3 hours.

 

Assignments: Continue working on your web project.

 

Reading: The Non-Designers Web Book By Robin Williams Chapters 4, 8 and 9.

 

Class 6: Web Design Lab

Web design lab. Layout your own project.

 

Reading: The Non-Designers Web Book By Robin Williams Chapters 10, 11, and 13.

 

Class 7: Image Formatting and Compression

Graphic File formats and their uses. Including:

JPG, PNG, and GIF

Flash file formats, use of Director, and projectors

HTM, CSS, and Java script

á       Image Compression

á       Flash export

á       Optimizing rollovers

á       Download time considerations and bandwidth

á       Cd-Rom speed and DVD Compatibility

 

In Class Project: Saving for the Web Demo, Image Ready Demo.

 

Assignments: Continue working on your web project.

 

Reading: The Non-Designers Web Book By Robin Williams Chapter 12.

 

Class 8: Typography
Type categories, Font Sets, Concordant, conflicting, and contrast type, Weight, direction and color. Also user feedback and rollovers.

 

Assignments: Choose your font(s). Finish all of your buttons with user feedback.

 

Class 9: Review and Lab

Open lab for review of web design and individualized help.

 

Assignments: Finish up your web page. Begin to finalize your work from this class into a small interactive portfolio.

 

Reading: The Non-Designers Web Book By Robin Williams Chapters 14 and 15.

 

Class 10 LAB

           

Assignments: Work in class making revisions for final critique.

 

            For next Time: Continue revisions.

           

Class 11 Testing, Publishing, and Burning

Uses of FTP and Publishing also CD and DVD Creation

           

Assignments: Finishing up all of your interactive design. Put design to practical work. Burn your CD or DVD, if itÕs a web page, publish it.

 

For next Time: Have your project finished and ready to be viewed by the class. Be ready to point out any revisions since your last critique.

 

Class 12 Final critique!