Introduction to Web Design

Art 101 · Fall 2020

Introduction

Although web sites come in many different forms, most take one of three formats, and each of these formats is used differently. Understanding these differences, how they function and how design principles can fail if misapplied, helps in understanding the how to best design a particular site. Each asks for a particular set of principles and a focus on what problems are being solved. Much bad web design is based on trying to apply an idea that works for one form to another where it doesn't - for instance, density to extended text.

The three are a story, a collection and a visual. Details and examples of each can be found in the Presenting Information chapter (p.19) in Simple and Useful.

1. A story - Extended text, as is found in many online newspapers, blog entries and news magazines. Because these are read like essays, many of the traditional guides for print typography can be applied effectively to stories and other narratives - like font size, line length, line height and white space.

2. A collection - Information presented as tabular data - like tables and related formats. They can be organized a number of ways and combinations of these ways, - by alphabet, number, location, kind, time or sequence and in an order of relationships, a hierarchy. ‘Density is the new whitespace.’ Ellen Luptonʼs advice in Thinking with Type, is good advice for on line collections (as it is in print collections - dictionaries, catalogues, want ads and phone directories) because they are scanned for a particular bit or bits of information, not read over a period of time. Efficient (and dense) ways of organizing information are at the center of their usefulness.

3. A visual - Single message sites, like ads, maps, photographs, gateways and videos. These are like a snapshot, an aphorism or a doorway - words or images or a function taken in quickly, at a glance. They make a point, but make it as an image, not as tale told over time or as a grid filled with information.

This course will also be focused on working with HTML5 so your work will present information clearly and succinctly, use bandwidth as efficiently as possible and be available to everyone, regardless of their physical or technological limitations. As well as making sure our work can reach the largest possible audience in the most responsible way, we will look at how well designed and structured sites can be rich and varied visually and embrace a wide range of content.

The best software for designing “what you see is what you get” Web sites is Dreamweaver, but you may use a text editor, if you like to hand code. Both are available on all the lab computers. Please do not use Frontpage or MS Word, they do not generate standards-based markup and make most sites twice a large as they need to be. The primary software for working with images you will using are Photoshop and Illustrator.

The software we are using is the industry standard and although there is other software that can do many of the same jobs, I encourage you to use these so you will be familiar with the most widely used tools for web design.

Required text:

Simple & Useful, A Guide to Web Design, 2nd edition
Jerrold Maddox
ISBN 9781465290526
The eBook is available at the Penn State Book Store, and from the publisher, Kendall Hunt.

More resources about html and web design more may be found in the Research Databases of the Penn State Libraries, which also includes on line books about Dreamweaver and Photoshop.

University Policies and Rules Guidelines states that academic integrity is the pursuit of scholarly activity in an open, honest and responsible manner. Academic integrity is a basic guiding principle for all academic activity at The Pennsylvania State University, and all members of the University community are expected to act in accordance with this principle. Consistent with this expectation, the University's Code of Conduct states that all students should act with personal integrity, respect other students' dignity, rights and property, and help create and maintain an environment in which all can succeed through the fruits of their efforts. Academic integrity includes a commitment not to engage in or tolerate acts of falsification, misrepresentation or deception. Such acts of dishonesty violate the fundamental ethical principles of the University community and compromise the worth of work completed by others.
Penn State welcomes students with disabilities into the University's educational programs. If you have a disability-related need for reasonable academic adjustments in this course, contact the Office for Disability Services (ODS) at 814-863-1807 (V/TTY). For further information regarding ODS, please visit the Office for Disability Services Web site at http://equity.psu.edu/ods/.
In order to receive consideration for course accommodations, you must contact ODS and provide documentation (see the documentation guidelines at http://equity.psu.edu/ods/guidelines/documentation-guidelines). If the documentation supports the need for academic adjustments, ODS will provide a letter identifying appropriate academic adjustments. Please share this letter and discuss the adjustments with your instructor as early in the course as possible. You must contact ODS and request academic adjustment letters at the beginning of each semester.