Interface Design for the World Wide Web -   Eric Paul Meier eric@epmdesign.com
RISD CE Fall 2006

------Helpful web sites

Webmonkey --
http://hotwired.lycos.com/webmonkey/

Flash Kit --
http://www.flashkit.com/

Flash Kit B-Boards --
http://www.flashkit.com/board/

Macromedia Forums --
http://webforums.macromedia.com/flash/

Moock.org/Javascript --
http://www.moock.org/webdesign/javascript/

Javascriptcity --
http://www.javascriptcity.com/

Webxpertz/Forums --
http://www.webxpertz.net/forums/


------reference WEB SITES online

FOR YOUR CONSIDERATION:
(recommended books)

Don't make me Think
by Steve Krug

Creative HTML Design
by Linda Weinman

Deconstructing Web Graphics
by Lynda Weinman
(anything by Lynda Weinman)

Understanding Media
by Marshall McLuhan

Stop Stealing Sheep and find out how type works
by Erik Spiekerman and E.M. Ginger

Designing Web Usability
by Jakob Nielsen

Envisioning Information
by Edward Tufte

Information Architects
by Richard Wurman

Working with Computer Type 2
by Rob Carter

Interface Culture
by Steven Johnson

(recommended periodicals)

Communication Arts Magazine

ID Magazine

Wired

 

 

Eric Meier - http://www.epmdesign.com

Eric Paul Meier is currently the Director of Interactive Media in the Communications + Design division of Rhode Island School of Design [RISD]. Eric actively participates in the strategy/design/development of all Web projects for RISD.

Prior to RISD, Eric was the Director of Interactive Services at RDW Group in Providence RI - one of the largest ad and marketing agencies in New England. Eric joined the agency in 1999 to create this new department for RDW - implementing procedures and standards, staffing and equipping it to handle the new media needs for the agency. Eric was actively involved in responding to RFPs and the art direction/design of new media projects including: Web site strategy, design and development, CD-ROM/Web -based multimedia presentations, 3-D animation, and video storyboarding and post-production.

Prior to RDW Group, Eric worked at Fidelity Investments for 2 years as Internet Design Director for the Internet Commerce Group. While there he designed/built transaction based and independently branded Web sites for financial advisors and investment professionals. Prior to working for Fidelity, Eric designed the first Web site of the Providence Journal Bulletin - in 1996.

A graduate of RISD Illustration department [1986], Eric has also been a part-time faculty member at Rhode Island School of Design for 12 years and currently co-ordinates the Web Certificate Program, teaches intensive workshops and classes in Web site design . [

------SYLLABUS-----------

Interface Design for the World Wide Web

Interface Design - includes various skills and principles necessary to make people interact naturally and accurately with screen-based applications and publications. This class focuses on practices and issues with creating compelling and easily used web sites.

This syllabus was written with the intent of introducing students to User Interface issues associated with Web site creation. I've written this syllabus to allow for flexiblity in order to accomodate everyone. It is my goal to help you learn how to create smart, usable web sites and to understand the expectations of the medium.

By the end of this course you will know:

- how to approach the project from a designers perspective

- how to deconstruct a web site

- how to create a usable interface for your web projects

- good usability practices for web site creation

- how to process images for the web

- how to create treatments for a web page design

- the organizational needs of managing the project

YOUR FINAL PROJECT WILL BE THE CREATION OF A COMPLETED WEB SITE

Please start thinking of a project that you would like to work on while in this class.
NOTE: Creating real projects will make this class a more rewarding experience. Please see me to discuss your final project at any time.

Work = assignment

12 weeks:

Week 1 : Introduction to the class - discussion of essential terminology such as: user interface, icons, buttons, usability [Jacob Nielsen], smart usability testing, information architecture, bandwidth, Flash ,CSS, Ajax, linear navigation versus non -linear, scrolling issues, screen resolution issues

Work : Please go online and search for 3 web sites that you feel are successful or unsuccessful. Be prepared to discuss your choices with the class.

Week 2 : review and discussion of sites selected by students. Overview of elements involved in creating interfaces for the web. Common terms: slicing, rollovers, state, icons, and bullets. An introduction on how content design [information architecture] impacts interface design.

Work : Using the risd web site -or another major web site -deconstruct the information architecture of the web site on paper

Week 3 : Review deconstruction work of students. Review portal sites, publications sites, portfolio sites, different attributes. Fixed and variable widths. Flash issues. Definition of semiotics - signs. Icons. Index. Symbols. Creating icons/symbols for the web. Review the Mapping process. Grouping like areas - defining hierarchy in the user interface experience. Naming issues. Good production habits. Demonstrate design process for creating web sites.

Work : Create a map of the project that you would like to complete during this class. Please account for any horizontal navigation that may be necessary.

Week 4 : Continued: Demonstrate slicing process for creating web sites. Discussion of the process of creating designs that work with the web. Keeping the designs fluid to shape with the content. Assignment in class and for homework.

Work :Select a web site that you like or visit often and create a series of icons for a navigation bar. Using the main content areas of the site for the types of icons. Create them in any media but make sure that they communicate in a small space. Use the restrictions of a site designed at 800 x 600 pixels. Create a rollover state for them as well.

Week 5 : Review icon assignment with class.

Work : Take the Icons that you worked with in the previous assignment and develop a design of the site with the icons integrated into the layout. Create a subpage with the design if you have the time[final work in photoshop].

Week 6
- Critique of homework. Begin homework assignment.

Work : Select a large web site that you think has a poor design and redesign its homepage. Presentation of 3 versions of the site due the following class. Please try to take a different strategic communicative approach in each of the three and be prepared to discuss your strategy.

Week 7 - Review of Dreamweaver and creating a web site with it. Production phases of creating a web site will be reviewed.

Work : Using PhotoShop, create 3 [flat] versions of your project homepage and a subpage for each. Refer to you map for information regarding button names and site needs. Please be prepared to show the "rollover" and "expanding menu" states

Week 8 : Critique of original designs.

Work : Revise designs based upon critique

Week 9 : Critique of second round of designs - finals to be selected for production

Work : Revise designs based upon critique

Week 10 : Workshop for class to work on their projects

Work : Complete project

Week 11 : Workshop for class to work on their projects

Work : Complete project

Week 12 : Final group critique of projects.



x