Fun-damentals Design for the World Wide Web -   Eric Paul Meier eric@epmdesign.com
RISD CE June 21, 2005

------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/

Holy CSS
http://www.dezwozhere.com/links.html

CSS 101
http://www.createwebmagic.com/css101/


------reference WEB SITES online

FOR YOUR CONSIDERATION:
(recommended books)

Don't make me Think
by Steve Krug

Creative HTML Design 2
by Linda Weinman

Designing Web Graphics 4
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 periodic

(recommended periodicals)

Communication Arts Magazine

ID Magazine

Wired

 

 

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

Eric Paul Meier is currently the Senior Interactive Designer for the Design Marketing Collaborative 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 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-----------

Fundamentals of Design for the World Wide Web

The World Wide Web is a medium that is having an unprecedented impact on worldwide communications. This hands-on workshop introduces the basic issues involved in creating a Web site, including the possibilities and limitations of the medium, important concepts central to construction of a Web site, principles of screen-based design, and essential software and computer technology. Successful examples of Web site development are discussed and viewed on the Internet. Students learn the basics of the programming language HTML (hypertext markup language) as well as common Web development terminology, and gain an understanding of navigational aspects of Web design and good production habits. Moreover, students explore how to create images which can evolve and grow into more complex designs as they work on their own ideas for a Web site.

Fundementals for Web site design.

- Know your users - build the site for them

- Think more than they do - anticipate their needs and intentions

- Understand the environment - there are differences involved with communicating in this medium - embrace them

- Learn the skills - there are technical requirements for building compelling web sites - learn to like it

- Realize that you will never know it all - the technology changes every 3 years or so - be prepared to keep learning

By the end of this course you will know

- basic terminology of web designers

- what the HTML tags:
<b> <center> <a href> <img src> <body> <table>
mean and how they are used

- how to process images for the web

- how to create images for a web page

- how to link pages using hypertext and images

- the organization needs of designing for the web

- How to view "source"

- How to analyze web pages
- How to aquire images
- how to organize your web project
- what is site architecture?
- why is naming so important?
- what are the roles in the industry for web developers?
- some of the expectations? from users ?from environment?
- the phases of web site development?

- where to fine software and information regarding web design


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

DAY ONE -------------------------------------------------------------

INTRODUCTION: of the course some the materials to be covered. general discussion of some of the common issues and terminology in associated with web design such as: browser variation, load time, scrolling, screen resolution, cross-platform color issues, the dynamics of how web pages are served, FTP, the organization of a website, navigational concerns, java, javascript, cgi programs, shockwave animations, animated gifs, meta-tags, etc.
Bring in some terms or questions for the next class if you can think of any.

DAY TWO -----------------------------------------------------------

Organising a web site is one of the most crucial tasks. Being organized will help you tackle the project. We will cover fundamental work issues with organising information for web sites and web de-construction techniques such as:
  
How to view "source"
Font issues and color issues
How to deconstruct web pages
How to download images
How to organize your web project
What is site architecture?
Why is naming so important?
What are the roles in the industry for web developers?
What are some of the expectations?
What are the phases of development?

And we will build a web page using some of the basic tags of HTML -writing it by hand.
Sketch out a rough information outline of your proposed project


DAY THREE
----------------------------------------------------------

We will discuss image creation/processing the web pages and the benefits of "layering" and "slicing" in Photoshop along with organizational stratagies for image creation. We will embed tags into your html to make images appear. If time permits we will discuss basic tables. and rollover images.
Begin a design for a web site using photoshop

DAY FOUR -----------------------------------------------------------

General Q and A. Basic tableing continued. Revisit topics previously covered for additions and clarifications. Overview of Dreamweaver. Using Dreamweaver, we will create image maps and (possibly) navigational rollovers.Lecture regarding the production process and naming advice for building large web sites. Whatever questions you have or information you need to begin your final projects will be addressed during this time.

Create several tables using techniques we used in class. Prepare whatever content you may need for the next class.

DAY FIVE -----------------------------------------------------------

Work on your project for the class. Create graphics for navigation, scan images and write HTML tags that will call them into your web pages. I will be available for individual questions regarding web site design/development and assist you in trouble-shooting your projects.
Work on your projects as best you can.

DAY SIX ------------------------------------------------------------

Work on your projects. The last hour will be a class critique of web projects. Sigh of relief.

 



x