DESIGN CONSIDERATIONS
"Putting together a web site is a unique blend of publishing, user interface design, and technology.
The three main activities of visiting a web site are reading text, viewing images, and interacting with the interface."
Check out other sites carefully and make note of designs you like and those you don't.
Here are some sites to get you started:
Colorfully Simple Design
Elegant Use of White Space
Very Snazzy Background Graphic
Everything Under the Sun
Our Resources link has more hints, tips, and examples.
These tips will help you design clear pages easily viewed by the majority of web users (not everyone uses Netscape on a large 17" monitor). If you are trying to reach a specific audience that you know can take advantage of some of the newer HTML features, feel free to use them.
Planning Your Site
Web Page Layout
Navigation Devices
Color Considerations
Incoporating Graphics
Maintaining Your Site
PLANNING YOUR SITE
- Start with Pen and Paper
- Define Your Goals
- Identify Constraints
- Identify Resources
- Plan for Maintenance
- Define Your Visual Identity
- Take the Next Step
- Draft on paper a flow chart illustrating your pages and their links
- Identify the lowest common computing denominator of the audience you need to reach. Will every member of your audience use Netscape and have 256+ color monitors? Or will some of them have text browsers, use Mosaic, have 16 color or monochrome monitors?
- Decide whether you are going to stick with HTML 2.0, which is the current version usable by almost all browsers, or do you want to venture into HTML 3.0 and the Netscape extensions, which will give you some great effects but are not usable by all browsers.
- Identify the person who will be maintaining the site and how much time they can spend. This decision will affect many others:
- whether to use several short pages or one long page
- how many links and where to place them
- what types of navigation devices to include and where
WEB PAGE LAYOUT
Remember that you have very little control over how your site will look to each visitor. Design for flexibility.
- Monitor/Platform Differences Are Challenging
- Differences in platforms (DOS, MS Windows, MAC, UNIX), monitors (16, 256, thousands, or millions of color), processor speeds, internet connection speeds, and browsers (Netscape, Mosaic, Lynx) will cause your pages to display differently.
- Remember that most people have relatively small monitors. Be aware that some images and important text may not be readily seen if you don't design for smaller monitors.
- Macintosh, MS Windows, and UNIX machines use different color palettes to display graphics. What looks great on one machine may not be recognizable on another.
- Remember User-Configurable Features
- Viewers can change font styles, colors, and sizes. Design for flexibility and make sure your page is easily viewed in a variety of font styles and sizes (for example: 10 point Times and 36 point Helvetica).
- Viewers can change background colors. Don't create graphics or text that rely on the background remaining a certain color.
- Viewers can choose not to load graphics. Include hypertext navigation devices if you are using image maps for navigation.
- Keep the Interface Uniform
- Make It Easy to See What's New and What's Changed
- How Can Visitors Tell What They Have & Haven't Seen?
- One Long Page vs. Several Short Pages
- Decide which is right for your site:
- Long pages take longer to download, but are quick to move around once they are loaded. Short pages are quicker to load, but viewer must wait each time they link to another page.
- It is easier to print information from one long page than from five short ones.
- Visitors tend not to scroll more than two screens down. If you think your audience may be using small monitors, use small pages or links within the large one.
- Keep Your Home Page Small
- Make sure your page loads in under 15 seconds (important when Internet traffic is heavy and things slow down)
- Websurfers have short attention spans and may not wait for your page to load
- How Do Your Pages Print?
- Print your pages and see how they look
- Put your URL somewhere on each page (Netscape 1.22 for Windows prints URLs at the top of each page)
NAVIGATION DEVICES
Be consistent. Have the same controls perform the same action throughout your site.
- Have a Home Link on Each Page
- Remember that people may enter your site at any page and may not know how to get to your home page or table of contents
- Use Meaningful Icons
- Arrows are very intuitive for moving forward, but not so for moving back
- When moving back, users prefer references to specific destinations. Try using tiny icons of previous pages or repeating a strong graphic element.
- Consider Using Navigation Bars
- Navigation bars contain links to the major elements of your site (maybe the first page of each section). They can be image maps or text bars.
- Used correctly, navigation bars appear in the same place on every page.
- They are very easy to maintain and quick to update.
COLOR CONSIDERATIONS
- Use Color to Convey Information
- Use as a navigation aid with different colors in different sections
- Be Cautious With Color
- Maintain good contrast between background and text colors: light background/dark text or dark background/light text
- Color may evoke emotional reactions in users
- Limit use of color when beginning
- Remember Monitor/Platform Differences
- Colors display differently on different systems
- Check your site on variety of platforms, at different resolutions, to make sure colors are viewable (note: the microlabs have machines running a variety of platforms)
INCORPORATING GRAPHICS
- "Choosy Web Publishers Choose GIF"
- Use GIFs for inline graphics
- Use 2 or 3 color GIFs whenever possible
- Interlaced GIFs don't stay loaded in cache, JPEGs do
- Use JPEGs for photos
- Don't Exceed 72 dpi Image Resolution
- Maximum Width = 500 Pixels
- will display well on standard 14" monitors
- Save Images with an Adaptive Palette
MAINTAINING YOUR SITE
- Check links regularly and update
- Maintain site diagram with HTML file names or create a 3-D model of your links
- Create a template page with uniform formats and styles so you can quickly create new pages
- Format your HTML text files with blank lines and white space so they are easy to read
- Have other people test your site
- Include your e-mail address and request feedback
- Pay attention when people tell you they had trouble with your site
[Return to top]
[Return to home page]