Request a meeting room reservation at Northside Learning Center
Help! I need to design a website! frown icon
 

Introduction

Web pages and/or sites must be treated as official publications and should therefore be designed. Too many sites are put together in a seemingly random fashion. Don't let this happen to your website! A little time and effort can pay off in a big way, with a useful, professional-looking site.

Getting Started

What / Who is the website or page intended to serve?
Answering this question will help you to make a lot of the important decisions in the design of your site. A teacher page used to post resources for elementary students will have a different look and feel than a page intended for parents, for example, or a page used to post personnel forms for employees to download.

What websites or pages do you like?
Browse around and look for inspiration! You're looking for examples of:

  • Page layout ideas
  • Color combinations
  • Navigation menus
  • Clear, attractive fonts
  • Banner designs
  • Use of images to make a page more attractive
  • And much more!

Remember: you don't need to use a design as a whole. You may wind up combining ideas from several websites into your finished product. This is not stealing! You aren't using someone else's information or work, but rather looking for ideas for better ways to create your own images and present your information.

Here are some (of the many!) websites that were looked at while designing the NISD Student Connection:

Click each image below to visit the website.
Washtenaw Community College Student Connection screenshot San Diego School of Creative and Performing Arts Parent Connection screenshot Old Dominion University Division of Student Affairs screenshot

Start sketching!
If you can't draw a design, you probably can't create it. You don't have to be an artist, but you need to draw enough to get an idea of what the finished page might look like. Use colored pencils or pens, highlighters, etc. This is a good place for notes about colors, fonts, and other aspects of the design.

Web page design sketch
Web page sketch. See the finished page.

Don't Re-invent the Wheel: Reverse Engineering Existing Sites

If you're using a program like Dreamweaver, it's easy to reverse engineer a site on the Internet. This may not work if the site is built with database tools like PHP and MySQL, but many websites will reveal their secrets with this method.

Saving a web page
Saving a Web page
Save the Web Page to Your Computer

  1. Open the page to be reverse engineered in your Web browser.
  2. Go to File > Save As and save the Web page. Be sure to select Web Page, complete (*.htm; *.html) in the Save as type: box.

Open in Dreamweaver

  1. Open Dreamweaver
  2. Select File > Open, browse to the page you just saved, and open it.
  3. Now play with the site in Dreamweaver to figure out how it was made!

Reverse-engineering a Web page with Dreamweaver
Reverse-engineering a Web page with Dreamweaver

Setting Priorities: What do you really need?

Content is King!
We often get wrapped up in fun technology that really doesn't improve the presentation of information. Animated images, popup menus and slideshows are cool, but are they really needed?

Add the Bells and Whistles Carefully
Things such as Javascript slideshows or Flash-based content can prevent some users from fully using your page. Javascript in particular can cause a warning message to appear when someone visits one of your pages.

"Branding" Your New Site:  Banners and Colors

Part of your design should include a color scheme and a banner to make your site immediately identifiable. Even a CMS Outreach page can benefit from a banner. Clip art is not a substitute for a banner.

Be careful with color. Use color in accents, such as Horizontal Rules (HRs), rather than using it as a page background color. Unless carefully chosen, background colors can make a page hard to read.

Banners
  • Use a program that allows the creation of layers, such as Fireworks, Photoshop, or Photoshop Elements. Each part of the layer  —  the various pieces of text, images, etc.  —  require a separate layer.
  • Keep it simple and easy to read.
  • You might want to create a smaller banner for pages within your website.

Design Hints

Keep it simple!
Visit one of the media sites, like ESPN.com, to find out what "too busy" looks like. Busy pages make it hard for visitors to find anything. They are also more difficult to build and to maintain.

Important Content Should be in the Top-Left Part of the Page
The top-left corner is the part of the page that always displays when a page opens. If a visitor is using a device with a tiny screen -- such as a Blackberry or a cell phone -- most of the page will requre scrolling to view. The most important content in your pages should be as close to the top-left corner as possible.

Don't Make Wiiiiiiiiiiiiide Pages
Very wide pages require horizontal scrolling to read the content. This is such a pain that many visitors will probably just leave. Remember that a wide variety of devices are being used to browse the Web now. Many of them do not have wide screens. Here are some suggestions for widths in Web pages:

  • Maximum page width: 750 pixels
  • Maximum page width if people need to print it: 650 pixels
  • Comfortable text width for reading: 500 pixels or less

Use Good Images, Not Clipart!
Clipart always looks like clipart, and much of it has been used before. There are some good sites for free photos and images that can be used in an educational site without violating copyright restrictions. Two of the better ones are Wikipedia and morgueFile. See the Resources at the bottom of this page for more information.

Some Design Models

HTML table
Simple layout, with a table
Hint: Use Tables!
Tables may not be the cutting edge, but they work very well for positioning page elements, and they are not hard to use.

Keep Your Tables Simple!
Simplicity is a recurring theme here, and for good reason. A complex table structure slows down the page and is usually not needed, if you plan your page well.

The image to the right shows a basic table with three cells. For many pages, this may be all that's needed. A table like this is easy to make:

  1. Create a 2x2 (two rows, two columns) table
  2. Merge the cells in the top row into a single cell for the banner.

Vertically Align Cells to "Top"
Make all of the cell contents "float" to the tops of the cells. This keeps the navigation menu from "drifting" down to the middle of the page if the main content area is larger than the nav. menu.

Table Trick
"Table Trick"
Use the "Table Trick" to Make Table-Based Pages More Accessible
A table constructed like the example to the left will "read" differently with screen reading programs like JAWS. Screen readers are used by people with visual disabilities. In a traditional table, the first row of the table contains the banner and the second row contains the navigation menu and the contents, so JAWS reads the page in this order:

1. Banner (program reads the Alt text).
2. Navigation menu.
3. Main content area.

This means that a visually impaired person would have to listen to the contents of the navigation menu of every page, before he or she could hear the main contents of the page. If the navigation menu is very long, this will be a frustrating experience for the person, and it will make the website less accessible to the visually impaired.

With the table trick, the cell with the invisible (transparent) GIF image is in the second row with the main content. The navigation menu is in the third row, so JAWS reads it last:

1. Banner (program reads the Alt text).
2. Invisible GIF - The Alt text with this transparent image is empty, so JAWS skips it.
3. Main content area.
4. Navigation menu.

Table in CMS Outreach
Using a Table in CMS Outreach
Tables for CMS Outreach Pages
Tables are an excellent tool for laying out content in CMS Outreach. They make it easy to position various page elements, as well as enabling the designer to use background colors and other features.

CMS table buttonTo create a table in Outreach, just click the table icon (shown to the left) and "draw" out the table that you want to use. See your campus CIT for help in modifying tables. Remember that CMS tables aren't really difficult to use, once you get some practice with them.

Organization

A new website can be a liberating experience, and a chance to get rid of a lot of clutter. Plan to keep your site organized from the beginning.

Create Folders for Images, PDFs, etc.
Keep files such as images in folders to prevent clutter in your root directory.

Get Rid of Clutter!
Avoid at all costs the temptation to copy all of the files from the old site into the folders for the new site. Old sites are often full of unused files and pages that are not used anymore. Take the time to browse through the old files and use only what you have to.

A Few Free Resources

Wikipedia (en.wikipedia.org)
Free or Fair Use images. Browse for any subject and click any image you see to find out if you can use that image. Many of the images are either Public Domain or are available for Fair Use by educators.

morgueFile (www.morguefile.com)
Free images. The morgueFile database is quite extensive, and images are searchable by subject.

Printer-friendly version of this exercise (PDF)