Graphic Design Considerations

Graphic Design Considerations for Course Websites

Design tips for non-designers.

Text for the Web

In general, the following guidelines will yeild the most appealing results:

Choose easy-to-read sans-serif fonts for text that will be read on a computer screen (this page includes examples).
Block or chunk text and balance with white space to give the eye a place to rest.
Avoid overuse of CAPITAL LETTERS, WHICH CAN BE MORE DIFFICULT TO READ on screen.
Avoid mixing too many different font styles and/or colors. Too much variation competes with the eye for attention and can appear cluttered.

Some commonly recommended screen fonts are listed here, along with text examples. These are most easily read (and appealing) online. In general, these fonts are called "sans-serif" fonts. This means that the type face is simple and clean, lacking any detailing (or serifs) on the ending strokes of characters.

Arial: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nisi velit, pellentesque at, eleifend nec, pellentesque et, neque. In eget neque. Aliquam tempor. Fusce facilisis purus sed nulla. Morbi lobortis, nibh in euismod dictum, eros massa elementum neque, quis pretium turpis enim ac ligula. In molestie eros a nisl. Mauris pellentesque, nulla eu ultrices pellentesque, velit mi porta lorem, nec aliquet est tellus sit amet sem. Pellentesque dignissim rhoncus tortor.

Verdana: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nisi velit, pellentesque at, eleifend nec, pellentesque et, neque. In eget neque. Aliquam tempor. Fusce facilisis purus sed nulla. Morbi lobortis, nibh in euismod dictum, eros massa elementum neque, quis pretium turpis enim ac ligula. In molestie eros a nisl. Mauris pellentesque, nulla eu ultrices pellentesque, velit mi porta lorem, nec aliquet est tellus sit amet sem. Pellentesque dignissim rhoncus tortor.

Comic Sans: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nisi velit, pellentesque at, eleifend nec, pellentesque et, neque. In eget neque. Aliquam tempor. Fusce facilisis purus sed nulla. Morbi lobortis, nibh in euismod dictum, eros massa elementum neque, quis pretium turpis enim ac ligula. In molestie eros a nisl. Mauris pellentesque, nulla eu ultrices pellentesque, velit mi porta lorem, nec aliquet est tellus sit amet sem. Pellentesque dignissim rhoncus tortor.

Tahoma: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nisi velit, pellentesque at, eleifend nec, pellentesque et, neque. In eget neque. Aliquam tempor. Fusce facilisis purus sed nulla. Morbi lobortis, nibh in euismod dictum, eros massa elementum neque, quis pretium turpis enim ac ligula. In molestie eros a nisl. Mauris pellentesque, nulla eu ultrices pellentesque, velit mi porta lorem, nec aliquet est tellus sit amet sem. Pellentesque dignissim rhoncus tortor.

Using Images & Color

Even if you are not a professional graphic artist, with a few moments of attention to some design fundamentals, your course site and materials can be as aesthetically pleasing as they are intellectually beneficial.

Tidbit:
In accordance with the Americans with Disabilities Act and Section 508, some agencies and organizations are required to make all web-based information accessible to persons with disabilities, such as sight impairment. Even if you do not believe that you have any students or colleagues with disabilities participating in a course, designing your site and your materials according to 508 compliance standards actually improves the quality of the site and materials for all participants.

The accessibility guidelines were created and are recommended by the World Wide Web Consortium (W3C); read the complete guidelines at http://www.w3.org/TR/WCAG20.
Fast Facts for Faculty - Guidelines for Creating Web Content Accessible to All (Ohio State University)

Choosing Colors

When considering color schemes, look for inspiration from sources nearby - nature, an attractive room, a textbook or picture book that you think is attractive. When in doubt, choose just a few colors and use them consistently.

Use aggressive colors sparingly (bright red, bright blue). Be wary of elements of a page that compete for attention; if all of the words on the page are red, it will be challenging for students to determine what's most important at a glance.
Consider using combinations with strong contrast; these will be easiest to read in electronic form and most friendly to those with visual challenges.

Remember that persons with color-blindness have difficulty distinguishing reds and greens. Be careful about using these colors in conjunction.

Preparing Images for Use Online

Use alt (alternative) tags to provide a text-based description of images for the visually impaired or for those persons accessing web content with a text-only technology. This will clarify the information that the image provides for those who cannot see the image. The images on this page include alt tags and you can view an alt tag by hovering your mouse over an image. Most web editors (Dreamweaver, FrontPage), course-management software (Blackboard) and even word processors (Microsoft Word) will include features for easily adding an alt tag to an image.
Optimize images to reduce file size. Optimizing an image is the process of reducing the size of the file (not the size you see, but the amount of space that is required to store it in the memory of your computer) while retaining an adequate picture quality.

The space on your computer screen is measured in pixels. The number of pixels that your screen displays is its resolution. A computer screen that has a resolution of 800 x 600 for example, displays 800 pixels across and 600 pixels down. The higher these numbers, the more area your screen can display. A typical image designed for use in print, like a glossy magazine or poster, may be in a high resolution format, 600 pixels (dots) per inch (dpi). However, most human eyes cannot discern detail in an image displayed on a computer screen at resolutions higher than about 75 or 100 dpi. A 600 dpi image may be large, in terms of the computer memory that is required to store it. That same image, reduced to 100 dpi may look the same to the human eye, when viewed on screen, but consume significantly less space to store. Why does this matter? The larger the image, the more time it will take to download from the Internet. For course participants with limited Internet access, this can represent an unnecessary barrier to your course content.

You will need an image editor (Photoshop or similar software, some of which is available for free) to compress images and get the best results.
- Optimizing Images for the Web (Tutorial by Alan Flum, Celestial Graphics, Inc).
- Optimizing Graphics for the Web [using Adobe Photoshop] (Gelardin New Media Center)

Other File Types and Compliance

In general, it is good practice to provide your content in multiple formats, when feasible. Here is information specific to some of the most popularly distributed course file types:

Adobe PDF: People using screen-reading devices generally are unable to read documents directly in PDF format, unless they have an accessibility plug-in installed on their system along with the Adobe Acrobat Reader. This plug-in is available at NO CHARGE from Adobe. Adobe also has online tools that will convert PDF files to HTML on request. Adobe provides comprehensive information about creating accessible PDF content, and available plugins on their web site.
Microsoft PowerPoint: Microsoft PowerPoint files are not ADA compliant. In order to meet accessibility requirements, it is recommended that whenever PowerPoint is used as vehicle for course content, instructors should also provide a text-based alternative, such as a transcript.