Marketing for Libraries Logo

Information Architecture Section: Design

Once you've determined that kinds of information that should be included in your website, it's time to consider the design. How will the website be structured? How will information be accessed? What will the pages look like?

Architects must consider both functionality and visual appeal. In other words, a client might like the look of a flat roof, but it may not work well in a rainy or snowy environment. Although a spiral staircase sounds cool, many homes also have a traditional staircase.

Web developers must consider the visible and invisible design elements of the website. In other words, file naming and organization are just as important as cute animated graphics.

This page contains two elements: technical design and web design.

readRead!
Read Web Design Guide for some background information on designing web pages.

Read Top Ten Design Mistakes from Jakob Nielsen's Alertbox.

Optional Reading - Read Chapter 12: Design and Documentation in Information Architecture for the World Wide Web, 3rd edition by Peter Morville & Louis Rosenfeld.

Technical Design

The technical aspects of your website are essential for success. Although anyone can learn to use HTML, it takes patience and planning to develop a functioning and successful website. For example, your website must be designed to function well for a variety of browsers and plateforms.

try itTry It!
Explore the resources at Webtips. Consider elements that are critical in the design of a website that will be truly cross-browser and cross-platform compatible.

File Management

File management must be considered from the beginning of the design.

File Naming

Keep file names very short. When possible, file names should be less than 8 characters plus a file extension. The file extension can be .htm or .html. It doesn't matter. However try to maintain consistency.

File names should be all lowercase letters. Some web servers are case sensitive. Do not include any spaces. If you want to separate words use a dash - or underscore _.

Your home page should be called index.html or index.htm.

Folders/Directories

Create a folder for your website. Keep all files in this folder. Create subdirectories or additional folders for major areas of your website. The core page for each of these sections should be named index.html.

Media Elements

Some people like to keep images, audios, and videos, in a separate folder. Others like to keep these files in the same folder as the web page. It's really up to the developer. However be sure to remain consistent. Develop a scheme and stick to it. Don't move files around or the links and images may not function properly.

Images

Images should be saved as gif or jpgs. In general, photographs look best as jpgs while clipart look best as gif files. Resize images so they are the size that you need for the screen. Photographs that are 150-300 pixels in height are a nice size. Also be sure that the image is only 72 dots per inch. That is the highest quality the computer screen can handle. Any higher is a waste of valuable space.

Navigation

All web pages should point back to the home page and any other important "first level" pages.

Standards

Standards keep the Internet functioning efficiently. There are standards related to hardware, software, graphics, email, and almost everything related to the Internet. Standards usually start with a new invention or tool. As people start using this new thing in different ways, people get together to talk about a standard everyone can agree upon. Sometimes standards are created by large agencies or governments. Other times they are pushed by companies with particular products.

Open standards are published so everyone can access and use them. For example HTML is available to everyone. Open standards encourage expansion and use. Proprietary standards are owned by a company and licensed to specific users for a profit. Sometimes these catch on, but at other times they are abandoned in favor of open standards.

readRead!
Read the off-site article Examining the Role of DeFacto Standards on the Web by Heidi Adkisson in Boxes and Arrows.

try itTry It!
It's a good idea to create a list of things you need to remember regarding web standards. This includes a vocabulary list of words and definitions.

 

Web Design

Even if a website contains quality content and runs well, it won't be effective unless it is well-designed including layout, text, visuals, audio, video and other components.

As you plan the elements in your website, keep in mind the overall interface design. Always keep the users in mind.

Layout

Simplicity and consistency play a key role in usability.

Consistent. Your pages should look like they were all created at the same time. Your CSS can help with this consistency. Repeat common elements such as navigation elements, colors, styles, text elements, visual elements, and formatting from page to page. Each page should look like it belongs to the whole. In addition, be sure to maintain a consistent alignment of objects.

Color and Contrast. Think about what draws you eye to the page. The strongest visual elements should be the most important. In other words, the largest, most colorful aspect should be the most important. Avoid items that will compete with each other for attention on the page.

Clean. Provide lots of white space around objects. Consider proximity. Items that are close together should be related in some way. Also be sure that your website is accurate and free from errors. Check spelling and grammar before posting pages and check links regularly.

Screen Issues

Screen orientation is a common problem. In other words, don't assume that everyone has the same size screen or resolution setting. Design your pages so they will be accessible to everyone. Here are some tips:

Accessible Design

People come to your page using a variety of technology. Provide an interface that's flexible enough to meet diverse. Although the latest technology might be cool, avoid technologies that involve plug-ins that might not be available to all users. If you decide to use a new technology, be sure to provide an alternative.

Because some people may be using older computers and slow connections, provide quick response time. This means compressing images, using small visuals, and avoiding large downloads. Visuals will load faster if you include height and width for each. If you're providing large documents or videos, consider dividing them into smaller pieces.

readRead!
Read Web Style Guide: Interface Design for some background information on designing web pages.

Information

Once you've explored the spectrum of web projects and done some brainstorming about the content, you're ready to start collecting and organizing the information for your web project.

Ideas

Are the ideas, materials, and products being posted generated by librarians, teachers, students, customers, patrons, or community members? The more users are involved in the design of the web contents, the more they will take ownership of the project. Encourage users such as students and volunteers to become involved in decision making at all levels, from the color of the background to the order of the index. For example, consider using a teen advisory board for your entry page design.

Information

What sources of information will be used? There's no reason to reinvent the wheel. If the information has been posted at another location, it's easier to link to it than to retype it. In some cases you'll need permission to link to a website. For example, some websites don't allow "deep linking" which means linking beyond the first level.

try itTry It!
Go to eGovernment Resource Center - Issues in Deep Linking. Skim at least three articles related to this topic. What are the issues? How will you handle links to off-site web resources?

What unique perspective can you provide on the information? Do you have primary source materials such as letters, diaries, stories, editorials, debates, or reports that your local families or students have created that could be posted?

Be careful when using already published information from your textbook, trade books, or other sources. Review the copyright law before using materials from any source other than your own creations. Will students or patrons be creating original content for the project such as research reports, fictional stories, or drawings? As you collect information for your project, address the following questions.

Links

Will your pages link to other pages within your organization, school or library, or will you connect to external resources around the world? Linking is a powerful tool and an important new skill. Students need to evaluate the quality of information at other sites and decide whether the information is important enough to be linked to their site. If available, use primary source documents in your web pages.

Activities

What will people do with your site? The web provides an opportunity for a very active learning environment where students can explore information, share ideas, and solve problems. It providess library patrons a place to share ideas and connect with new friends.

You may wish to develop activities that make use of the information at other sites. On the other hand, your activity may not need external information to be successful. For example, if you're posting a short story you might not need external links.

Projects

If it's an educational site, consider classroom projects. How is your web page connected to other projects or local community activities? You may find that some activities require computer use. However, you may be able to print out the web page and distribute a printed version as an alternative for people without web access.

Lesson Plans

If it's an educational site, consider lesson plans. Will teacher information be provided? There may be teachers who would like to learn more about your project. As a result, you may wish to develop lesson plans that will go with the web pages being developed by and for students. Again consider your audience. Do you envision students, teachers, or both using your pages? Develop lesson plans.

Services

Examine your mission statement. Think about what services you offer now and what services could be provided in the web-based environment. How does the web allow you to reach beyond the walls of you library, school, or organization?

Formats

What's the best way to communicate information about your project? Text, tables, graphics, videos, audio, animation and many other media can be integrated into web projects. Consider the multiple intelligences of your children. How do they communicate best? Where do they need practice? The web is a great way to explore alternative communications.

As you plan your projects, consider the following elements:

Communication

Will your project be self contained or will it really use the power of the Internet as a communication tool? As you design pages, consider interaction. Can email, chat, discussion groups, or desktop video conferencing be used in your project?

Make connections to resource people in your local area as well as around the world. What kinds of information could you share? Why would people from other locations be interested in your projects and website? Think beyond your classroom or library. What's the value of collaboration and sharing? What unique resources do you have in your local area that might be of interest to students in another part of the world? How could you connect with some local experts to develop an "ask an expert" project?

Design active communication projects. Share information, then ask for input or feedback.

Go beyond simply posting projects. Ask for interaction. For example, the Email Essay project posted student projects and asked for email reviews. The reviews were then linked to the projects. Collect and share data from surveys or scientific experiments. Collaborate on writing or artistic projects.

Environment

This page reviews ideas from the Research and Strategies steps of the Information Architecture planning process as you prepare to produce your materials. Keep in mind that you don't have to be designing a large website to benefit from planning the environment.

Whether you plan your project on paper or in your head, it's important that you have a clear idea about what your web page will accomplish. Ask yourself: What function will this page or website serve? Who is likely to use it and why? What is the purpose of the website?

Analyze Potential Users

Start with an analysis of your users. To whom will you be speaking, sharing, and interacting? What are they like as explorers, web users, and learners? How do they typically behave when using the Internet? Will they be passive users or active participants within your web environment? What special considerations will need to be made based on the age, maturity, gender, cultural background, and reading level of the users?

Identify Your Purpose

Also ask yourself about the purpose of the page. What's your mission? What are you trying to accomplish and why? Try not to focus on the technology itself. If you find yourself saying that your mission is "to make a website", you have a problem. It's not the website that's important. The focus should be on the communication of information. Why are you creating the website in the first place? Why should the audience be interested in your web pages?

State Expected Outcomes

Consider the outcomes you expect. In other words, what do you want your users to accomplish from using the page? Do you want them to be informed on a topic or persuaded to take action on the issue?

Organize Your Content

Once you've identified your users, developed a mission, and created a clear set of outcomes, you're ready to select content for your page. What are the most important pieces of information? Can they be organized into categories? Can information be clustered together? Is there a hierarchy or sequence to certain pieces of information?

Think in nonlinear terms. Develop a concept map of your ideas. The center of your map or web will become the core page or index of your project. Each circle could represent a connected page or link to an outside resource. The more you plan now, the easier it will be to create the pages later. Many people like to create their concept map on poster paper. Others like to use the computer. A software package called Inspiration is a popular tool for organizing ideas. Your map will serve as the blue print for your project.

Create a Preproduction Plan

Regardless of whether one or one hundred people will be involved with your project, it's helpful to begin with a preproduction plan. This plan will serve as a guide for your entire project. When developing a preproduction plan, be sure to include all your ideas, resources, and activities. By creating a master list of options, you have many possibilities to explore. At this point, you're not committed to any outcomes or activities.

Develop a Theme

Your project will come to life quickly if you identify a theme, logo, metaphor, or analogy to go with your site. For example, you might design a cute creature such as your school mascot that will lead users through the pages.

Consider a logo or standard screen design such as a small icon to represent each major category or a different color to represent each page.

Many people use metaphors and analogies as part of their sites. For instance, you might create a virtual field trip and use the information highway analogy. Many people design their site like a museum with different levels, rooms, and exhibits.

You could create a web site that uses a board game graphic as a main menu, a pie that shows the parts of the project, or a puzzle where users click on pieces. Use your imagination and make your site interesting and appealing to all ages.

Design Your Layout

Create a structure for your site. How will the pages be organized? Most sites are organized in a hierarchy. In other words, there's a core page that serves as the main menu, followed by a series of submenus and content pages. Consider drawing a diagram of the organizational structure to help with development of the pages.

Will the pages be self-explanatory or are they part of a larger project or unit of instruction? What will the pages look like? What fonts and sizes will be used? What will the headings look like? Will graphics and animation be used to support the text? Will the users be involved in some way? Will they answer questions, search for information, or be guided to additional information if needed? Where will users go for help?

The diagram below of a project called Rocks Rock! In addition to three main areas, the site also links to a credit section and a participant list.

rock diagram

The Types section contains student reports and background information. It also links to lots of cool rock and mineral sites. This area is a great resource for all project participants as well as others who are interested in rocks.

The Rock World section contains data from two global projects. The first project is called Rocks Near You. In this project, students identify and chart rocks in their area and submit them to the master web page list. Students then compare the data to geological maps of the world. The second project called Famous Rocks asks people to write about a famous geological site in their area and share it on the website. The Uses section highlights how rocks are used in our world including the areas of fun, art, and products. Part of this activity involved emailing people who work with rocks as part of their job and asking questions about their use of rocks. Students also took pictures of rocks in the community.

As you design your web environment, consider the following steps:

Pages

You're ready to create your pages. Now what?

Once you've created a diagram, it's a good idea to sketch your individual pages. The first page that will appear in most projects is called the core page, home page, default page, or index page. It should welcome your users and introduce them to your site. This page must load quickly or users will become frustrated and leave. As a result, you need to combine an eye-catching, descriptive title and attractive contents with a fast loading system.

Limit your graphics to those that will have high impact. Carefully select a background, small graphics, and colored lettering to attract interest. You need to begin with an introduction and statement of purpose. These should provide a quick glance at the mission of your project. Next, provide an annotated index. You may wish to include a "what's new" and "awards we've won" section.

Most core pages end with a request for feedback, survey, guest book, or other tool to collect information from users. You may also wish to include links to software that is necessary to run movies or use your pages. Include contacts for the webmaster including name, surface mail, email, fax, and voice mail. Update and copyright notices should come last.

Other informational and instructional pages should also contain an attractive title. This will be followed by text, graphics, sound, animation, and video information. Chunk information so that the text is not overwhelming. Be sure to include spaces between paragraphs and helpful headings and subheadings. Add interaction by including questions, activities, links, and opportunities to input information.

You'll also want to provide other kinds of pages. A review or conclusion page may be helpful. Also consider a credits page. Some projects require a help or map page that can assist users in navigating the project.

Once you've got a draft of your website, review other websites again for additional ideas. Also, ask others for ideas!

readRead!
Read Web Style Guide: Page Design for some background information on designing web pages.

Read the article Once Past the Front Door by Leo Klein in The Library Journal. Learn about designing second tier pages.

As you design specific types of web pages, look for the following elements:

Organization

Consistency is the key to an effective web site. Users expect to find information in the same place throughout the site. For example, a heading may appear at the top of the page and a row of navigation tools may appear across the bottom. Creating a template will insure this consistency. In other words, design the outline of the page including the placement of separating lines, headings, technical information, and navigation tools. Then, make a copy of this page and fill in the information. Go back and use a copy of the template for each of your pages. Of course you may want to vary some elements to draw interest. For example, you might use a different color of text, background, or logo for each page with a particular topic or category.

Titles

Is a formal title included across the title area of the document? Is this title simple, yet descriptive? Are visually pleasing titles also included at the top of each page to identify the content? Highland Park in Austin Texas has lots of great examples. The title for the Wildflowers of Texas incorporates photographs. A is for Austin uses children's drawings.

Headings and Subheadings

Are headings and subheadings used to highlight sections? Do the headings relate directly to the content? Do the headings motivate and draw interest? Are sizes and colors used to draw attention to particular sections? Are graphics or icons used consistently to help identify sections or areas of the project?

Chunk Information

Rather than using endless paragraphs of information, consider chunking information into small pieces. Separate paragraphs with spaces and use indentation to show levels of importance. Or, use tables to organize major areas.

Footers

Many webmasters place a line at the end of their document and then provide the types of information often found on a title page. Include the author and or webmaster on each page. Include names, addresses, email, and institution. The date of origin and updates should be included and annotated.

Disclaimers

You may wish to include a disclaimer reminding users that you aren't responsible for dated or inaccurate information. In addition, you could include a note about copyright and use of information.

Credits

It's a good idea to include a page or area for credits and acknowledgments. You'll want to include resources used in the project and give credit for audio, animations, or graphics used. You may also want to thank any sponsors.

Contact Information

Be sure to include contact information somewhere in your web site. It could be a simple email address or you may wish to develop a comments form or a guest book.

As you explore the organization of websites, look for the following elements:

Navigation

Navigation is a critical element of an effective website. Use the following resources to learn more about navigation.

Link Types

Links are an important part of the web environment. They allow users to follow a train of thought, access additional information, or jump over irrelevant information. If you use lots of links, be sure to keep them up to date. Users hate "Link rot". Link rot happens when links aren't updated and lead to error messages rather than useful information. As you develop links, consider the following four types:

Links Within A Page. A list is provided at the top of the page and the links jump to anchors on the same page. For example, a table of contents may be provided at the top of the page. Clicking on a topic or question will jump the user down the page to the particular topic. Users can click on the words Introduction, Task, Resources, Process, and Conclusion. When a hot word is clicked, the user jumps down the page to link. These links are useful when you have a number of key ideas you wish to present on a single page. =

Different Page, Same Site. This approach is used when you want to access a series of pages within the same site. Rather than linking to an entire URL, you simply link to the document. For example, the word "Photographer" might be highlighted. When it is clicked, the user goes to the Photographer page within the same site. Developers may use a table of contents, next and previous buttons, or a visual map to assist users in navigation.

Different Page, Different Site. When you link to an external website be sure that users know they are leaving your website. You may even want a disclaimer to appear stating that the library or school is not responsible for the content at external sites. When using frames, the user may not realize they have moved to another site unless they study the status line while the page is being loaded.

Other Action. There are many other types of links. For example, you can link to an email address or a movie. Users might download a document such as a PDF file, QuickTime movie, audio file, use ftp to download some software, or email someone using an email link.

There are many things to consider in designing your links. For example, keep the user informed. If they will be leaving the site, provide instructions for returning. Keep your links updated. "Mystery" links that go to the wrong page can be discouraging. If your program is under development, don't activate your links until the pages are done. It's frustrating and a waste of time for a user to link to an empty page with the words "under construction."

Link Layout

Some people like to place links in paragraphs, while others like to place them in lists. It depends on your goal. Sometimes the links are more meaningful within the context of an example or sentence. The user can choose to click for more information or continue reading. In other instances, you might wish to provide a link with a brief description or activity. Consider your users. Also, make it clear whether the link is "required" for understanding or simply an option.

Information should never be more than three clicks away. Don't build complex webs that require users to go through many menus before getting to information.

As you select your text styles, consider the link color. Underline is difficult to read. Instead use a contrasting color for your link. Also think about changing the color for the hover so people will know that it's a link.

Links Page

Most schools provide some type of "favorite links" page. Consider a format that will be easy to use. For example, the Teacher Tap page contains links with short descriptions. These lead to pages on particular topics. If you plan to include a "favorite links" page, be sure to keep it current. It is frustrating to go to a site and find that most of the links no longer function. This would be a good student project. Assign a student to check a particular page weekly or monthly to look for changes.

Navigation

Users must be able to easily find their way around your site. Every page should contain navigation tools. These are most frequently placed at the bottom of pages. Use icons to enhance your links visually, but also include a text option. Provide links forward and backward through linear sections of your project. In addition, provide links back to your main menu page, core page, or school site.

Tables. A table of contents is a logical way to set up a class or project. Tables are also useful in presenting a table of contents.

Visual Map. Some people like to use an interesting visual as part of their site map.

Icons. Some people like to use icons along with headings as part of navigation.

The Design

As you think about your end user, keep in mind that this may be their first trip to the website. They need help moving around. Here are a few tips:

As you develop links, consider the following designs:


Text

Text is a logical element of a web page. You'll provide information, label diagrams, and provide help for users. You can enter text directly into your web page or store it in a word processing document.

Keep a style sheet showing the fonts, sizes, styles, colors, and indentation for each page to maintain consistency.

Fonts

The default font is dictated by the browser that the viewer is using. Although it's possible to change the font, the default works best in most cases.

CAPS. Avoid using ALL CAPS. They are difficult to read, particularly on a dark background.

Font Size. The sizes are relative. In other words, you can only make them larger or smaller but not dictate a specific size. The font size of this paragraph is good for reading large chunks of information. Use the standard size. The next size larger or a bold style is good for headings and subheadings. Stick to two or three sizes and styles of text. Think readability. If your font size is too large, the text will spread across the page onto multiple lines. If your font size is too small, your information will be difficult to read.

Keep in mind that the end user controls the fonts through their web browser. If you use a small font, you may remind them that it can be adjusted using the VIEW menu in most broswers.

Font Styles. You can use styles and colors to add interest. Italics is difficult to read when it is small.

Color

Use caution in applying colors. Be sure to provide enough contrast. Also, avoid competing colors.

Scrolling Text

If you have to scroll more than three or four screens, break up the page into multiple pages. Be sure to use headings if you have long scrolling pages. Headings can help a person find their place. It also helps if you provide a space between paragraphs.

Justification

Left justified text is the easiest to read for multiple lines of information. Many web developers center their text which also makes it difficult to read.

Headings and Subheadings

Use the standard formatting tags for establishing heading and subheadings. Then, stick to these for a consistent layout.

readRead!
Read Fine Points: Little Things that Make a Big Difference. Examine their design ideas. Create your own list with examples from your favorite websites.

Read Web Style Guide: Typography and Website Style Guide: Editorial Style for some background information on typography and editorial style.

As you develop text, consider the following designs:

Graphics

Photos, charts, graphics, and line drawings are all effective visual tools. Before you insert graphics, consider the need. Does the graphic add to, supplement, or distract from the purpose of the page? How long does it take to load the graphics? If the page loads too slowly, users may get frustrated and give up.

The visuals you use should be relevant. They should also load in a minimum amount of time. If users don't begin seeing images in 10 seconds, they may give up and leave. Limit the number of graphics per page.

Be sure to consider accessibility of your visual elements. Provide clear, detailed alternative descriptions of each visual element.

There are many tools for producing high quality web images such as Photoshop or Fireworks, but low end packages such as AppleWorksKidPix, and PhotoElements work well too. Software such as Adobe Image Ready will help you prepare existing visuals for web publication.

try itTry It!
Go to GIMP.
Try this open source graphics package at no cost!

Background

Backgrounds can add to or distract from the atmosphere of a project.. Rather than a fancy colored background, consider using a white background with colored lettering and bright colored graphics. Or, use a very dark background with yellow or white lettering for emphasis. The key to backgrounds is contrast. Your background and lettering should be opposites such as black on white or navy on yellow.

Clip Art

Carefully select clip art to add interest and appeal to your project. Use clip art to illustrate book reports, stories, poetry, report covers, signs, multimedia projects, banners, papers, and homework assignments. Discovery School Clipart contains lots of great graphics for kids. You'll find icons, lines, bars, and all kinds of graphics. Be sure to check the copyright policy of each site. Some sites ask the user to include a citation when copying pictures. Some sites only let you copy a small number of graphics without an additional charge.

In Netscape or Explorer you can copy or save most pictures easily. You click and hold your right mouse button on a picture and up pops a list of choices. You can also use software such as Capture to grab the picture. Once you've got the picture, you can put it in almost any document including a web page. Make sure you create a citation for where you found the picture even if it comes from a clip art source.

Create a web page with your favorite clip art or your favorite clip art sites. Use these pages to quickly access the pictures or resources you need.

Maps

You can also use maps to show the location of your project. Many school pages show the location of their country, region, city, and even street. You can even embed Google Maps on your location page.

Timelines

A timeline is very helpful in understanding historical events and their place in history. Use Tom Snyder's Timeliner software to make an attractive timeline.

Graphic Banners

Any paint or draw program can be used to make great graphic titles for your page.

Horizontal Lines

Lines are an excellent way to separate areas of the screen. You can use the standard line that comes with most web development tools or surf the web for unique lines that incorporate color and graphics. In most cases the standard horizontal line can be made thicker or thinner to add interest.

Bars, icons, logos

Use icons with care. Make certain users know their purpose. Icons are great for navigation. Try to repeat the same graphics rather than using lots of different graphics. Since a graphic only has to load once, it can appear multiple times without having to be reloaded.

Scanned images

Scanned artwork is an easy way to incorporate student-produced work into a web page. Artwork created in chalk, crayon, marker, paints, pencil, and almost any other medium works well for web production. Ask students to draw pictures using pencils, crayons, or markers, then use the scanned pictures in student projects. Rather than placing the full-size visual on the web page, include a thumbnail that can be clicked for a full-size view.

Try to keep photographs small for easy loading. Or, provide a thumbnail that can be clicked to view a larger picture. Be careful when using color. Use the least number of colors. In other words, rather than using millions of colors for a scanned picture, use thousands or 256. These pictures will load much quicker.

try itTry It!
Go to the Allen County Public Library Photo Collection or the Anti-Saloon League Page from Westerville Public Library. Explore their digital library of historic photographs and documents.

Captured images

In some cases you can save or copy images from graphics packages and place them directly into your web project. Not all software allows you to easily copy or save pictures. However, you can usually use a screen grabber or capture program to copy a picture.

Be considerate of your end users. Try to make your pages load as fast as possible. Keep your images small.

Charts, graphs, diagrams, tables, frames

You may wish to build charts, graphs, diagrams, or tables into your project. Consider using software such as Tom Snyder's Graph Club or Graph Action to create the graphs.

Digital stills from camera or video

Still pictures can be taken from a digital camera or video camera. For example, check out the images from a project where students created musical instruments. Notice that users click on the thumbnail image to see the large image. You can also go through the images like a slide show.

readRead!
Read Web Style Guide: Graphics for some background information on typography and editorial style.

As you develop graphics, consider the following types:


Multimedia

Some websites use large graphics, animation, video, and sound to draw interest to their school, library, or organization. Unfortunately, these elements can sometimes be overwhelming and distracting. They can also make the page load very slowly. Many websites are now using software packages such as Macromedia Flash and Director to produce high quality images and multimedia projects. Be considerate of your users. Use multimedia to add, not distract from the page.

Sound

Music, speeches, narration, and sound effects can bring a web page alive. There are many ways to incorporate sound into a page. Be sure the sounds attract rather than distract from your content. For example, many pages now start with MIDI music. If you play a ragtime MIDI to go with your early 1900's theme, it makes sense.

GIF Animation

Animation is an easy way to draw interest to your site. Choose animations that contribute to your theme. For example, you might use a rotating globe on your geography page. Try to use only one animation at a time so users don't get overwhelmed.

Avoid animated gifs that don't stop. They can be distracting when reading.

Videos

It's easy to include movies in your project; however, this is not always a good idea. Videos can take a long time to load. It's recommended that you include a series of still pictures instead. Some schools now have "streaming servers" that allow you to send live audio and video through the Internet. Again, check with your network administrator to see if this is a realistic option.

Data Collection

In some cases, you may wish to collect data from users such as a survey. You can also get users involved with chats, discussions, and other types of online information sharing. ThinkQuest projects often contain polls and surveys. The results are kept in a database and displayed on charts and graphs.

Multimedia

There are some really great websites that combine audio, video, and animation elements. Keep in mind that you can embed video, audio, and widgets into web pages.

Software downloads, players, and plugins

Multimedia and hypermedia software can be used to design materials that can be run on the web or downloaded from the Internet.

Many software packages provide an options for saving as a web page. For example, you can save a Word document or PowerPoint presentation as a web page. They can then be viewed on the web without the need for the software.

Widgets

Widgets are mini-applications that can easily be embedded into lirbary web pages.

readRead!
Read Widgets from High Tech Learning.

Go to Multimedia Seeds from Eduscapes for many ideas for integrating audio and video resources.

readRead!
Read Web Style Guide: Multimedia. Consider the pros and cons of incorporating multimedia elements into your projects.

As you develop multimedia, consider the following types:

Interaction

Provide opportunities for users to interact on your page. Rather than a single email link, provide a variety of choices. For example, you might incorporate polls, surveys, questions, and quizzes. How about a place for students to add book reviews, discuss a favorite book, movie, or website, or chat about current events?

Forms

It's easy to make a web-based form. It's much more difficult to make it work! Explore some examples of how forms are used in various schools and libraries.

try itTry It!
Go to Columbus Metropolitan Library. They have a place to renew your library card online.

Feedback Pages

You may wish to provide an area for users to email you their ideas about your site. You could keep this information for personal use or post it. Many online tools can be used to create polls and surveys.

References

Designing Web Usability: The Practice of Simplicity by Jakob Nielsen

Don't Make Me Think by Steve Krug

Expand Your Project - multimedia resources

Find Sounds - locate sounds

Media Builder - web tools to design, create, and animate

The Non-Designer's Web Book by Robin Williams and John Tollett

Prioritizing Web Usability by Jacob Nielsen and Hoa Loranger

Standards and Communication - Discusses the most common web development standards.

Style Guide for Online HyperText - This is a "classic" resources for developing effective, readable pages.

Web Pages That Suck - Great resources from Vincent Flanders for helping you build an effective, efficient, and appealing website. Don't miss the following articles: What would Amazon.com do?.

Web Standards Project - Provides resources and opinions related to web technology standards.

Writing Well for the Web by Catherine Titta - Learn how to write for the web including writing style, headlines, and common writing mistakes.


Some ideas adapted from Information Architecture for the World Wide Web, 3rd edition by Peter Morville & Louis Rosenfeld.


| eduscapes | IUPUI Online Courses | Teacher Tap | 42explore | About Us | Contact Us | © 2006-2013 Annette Lamb & Larry Johnson