The links in this sidebar take you to the main areas of the site. Click on a link to choose a topic: Design Theory Site Design Page Design MultiMedia Teacher Resources Table of Contents Home Page Copyright © 1999 by Bonnie Skaalid

Who Might Use this Site? What You WON'T Find at this Site How Do I Find My Way Around This Site? What do the Symbols Mean? What Will I Find in Each Section of the Site? Design Theory Site Design Page Design Media Teacher Resources Table of Contents Why was this Site Created? Copyright Information   Who Might Use This Site? Educators who want to know how to create an instructional web site based on research guidelines Researchers who want to know the research findings concerning design of instructional web sites Web site creators without a background in design theory who want to discover the concepts of design back to the top What You WON'T Find at this Site You won't find step by step instructions on how to create your own web site (but in Teacher Resources there are links to places where you can find that information) You won't find research guidelines about types of sites other than instructional (i.e. commercial, entertainment) You won't find information about the latest and greatest programming tips (but in Teacher Resources there are links to many sites out there that can help you with those queries) How Do I Find My Way Around This Site? The links in the sidebar to the left are the top level links to each section of the site, and provide a quick method of going from place to place The Home Page also gives quick access to most of the areas of the site The sidebar link to the Table of Contents gives you a text-based access to every page in the site. It will be useful if you know exactly where you are going The bottom navigation box can also be used to move quickly around the site. Elements & Principles of Design: [Line] [Shape] [Texture] [Value & Color] [Space] [Movement] [Balance] [Emphasis] [Unity] Main Level: [Home Page] [Design Theory][Site Design] [Page Design] [MultiMedia] [Teacher Resources] [Table of Contents] Above is an example of a navigation box. The top group of links are links between pages of the subsection you are located in - in this box you are located in the Elements & Principles level of Classic Graphic Design Theory. You are located on the Movement page, indicated by pink letters and no underlined link. The second row of links is identical to the left navigation box and is repeated so that you don't have to scroll back up to the top of the page to move somewhere else. What do the Symbols Mean? You'll find a few symbols or numbers which may be unfamiliar to you. Here's what they mean: This button will take you to the top of the page, up to the hyperlinked menu if one is available. Click the button at the bottom of this section to go back to the menu at the top. Hyperlinks to other sections are shown in this way: Teacher Resources Visited links are indicated like this: Teacher Resources These numbers [1, 2] are linked to references at the bottom of the page like the references shown directly beneath this paragraph. The reference may be a book, an article, or it may be a hyperlinked article found on the web. [1] Shneiderman, B. (1998). Designing the user interface: Strategies for effective human-computer interaction. (3rd ed.) Reading, MA: Addison-Wesley Publishing. [2] Nielsen, J. (Dec. 1997). Changes in Web Usability Since 1994. [Online]. Available: http://www.useit.com/alertbox/9712a.html What Will I Find in Each Section of the Site? Following are descriptions of each of the sections and what they are designed to do. Research by Jared Spool indicates that users are more likely to find what they are looking for if the links are more descriptive - hence the descriptions. (If you want to read Spool's research, a sample chapter is online at: http://world.std.com/~uieweb/bookexpt.htm#fig32 ) Design Theory This section of the site lays the groundwork for all the other sections by presenting relevant information about design, perception and computer design theory. The sections of Design Theory: Classic Graphic Design Theory presents an introduction to the elements and principles of graphic design for those with no design background Gestalt Principles of Perception discusses research related to perception which is useful to consider in design. Human-Computer Interface Design seeks to discover the most efficient way to design understandable electronic messages and is useful when thinking about the design of web messages **Note to Lynx users and those with graphics turned off - both the Classic Graphic Design Theory section and the Gestalt Principles of Perception section contain many graphics which are used to illustrate design concepts. It is probably better to turn on the graphics or find a graphic browser for these sections of the site. Site Design Site design deals with the overall view of your site and deals with issues such as how you can make your site feel like a unit (harmony and unity) and how you can make it easy for anyone to find information or move from place to place in your site. The sections of Site Design: Hypermedia Basics explains what hypermedia is, and discusses research studies which have been carried out about the effects of hypermedia on educational outcomes Metaphor discusses how metaphor can be used to give a site a feeling of familiarity Web Site Categorization discusses research which was carried out to categorize web sites according to their function Navigation discusses structure and orientation of a site and how to make a site easy to traverse Site Design Testing explains how you can test your site to make sure it is easy to use Page Design Page design can be thought of as the details of a site. Where site design looks at the big picture, page design considers elements like font, screen display, page layout and color on each individual page of a site. The sections of Page Design: Web & Multimedia Design Principles relates design specifically to multimedia and web projects and contains recommendations from other researchers for designing web sites which meet the needs of different audiences Screen Design Research discusses multimedia research pertaining to screen grid, line length, screen density, fonts, color, icons and menus Screen Resolution & Size discusses the maximum size of screen to fit all browsers Writing Style discusses the results of research on web writing styles MultiMedia This section presents the research regarding the use of various types of media, ie. animation, sound, video on the web. The sections of MultiMedia are: Multimedia Research profiles research on the use of multimedia elements in traditional software and multimedia Graphics & Pictures discusses the research on the use of graphic elements in traditional instruction and multimedia Animation discusses animation and when it should be used Video discusses when video should be used Audio discusses audio and when and how it should be used Response Times discusses research based on speed of screen display in multimedia and how this translates to the web Teacher Resources This section was designed to help busy teachers by giving them some links to resources and some pre-designed pages which they can customize for themselves, as well as links to exemplary educational sites for their students. The sections in the Teacher Resources section are: Instant Web Sites -Here's a section to get your web page up as quickly as possible, including templates for web pages, and several sites which will build simple pages for you Sources for Graphics and Animations -Check here for a few locations on the web which contain free graphics, backgrounds, buttons and animations for use on web sites. There are also some tools such as web page creation programs Web Tutorials and Design Resources -You'll find locations here for introductions to web design, HTML, Javascript and many other features of web creation as well as some sites about web design Web Resources for Educators Here is a list of sites which should be useful for educators. They include resources such as Web Quests, Judi Harris' Educational Activities, the Saskatchewan Evergreen Curriculum, and many sites designed for students to use Table of Contents The Table of Contents page gives an indepth index to all the pages in the site. Once you are familiar with the site, you can use this page to go directly to any page. Why Was This Site Created? This web site was designed as a Master's project for a degree in Educational Communications and Technology. It is based on a research paper identifying issues in screen design and web navigation from an instructional viewpoint. If you want to read the actual paper, you can find it in PDF form at WebDesignPaper.pdf. The Appendices are not yet attached, but you can get the idea. As well, an HTML reference list with links to any online sources is also available. I have tried to restrict this site to those topics actually verified by research. Much of the research on screen design for instructional purposes was based on design for multimedia instruction rather than strictly for web design. Copyright Information  Copyright © 1999 by Bonnie Skaalid. All rights reserved. This work may not be copied in its entirety, in part or with modifications, without advance agreement of the copyright holder. Redistribution in part or with modifications is not permitted without advance agreement from the copyright holder. Some images copyright www.arttoday.com Some images copyright www.clickart.com This site is published in web form by the College of Education, University of Saskatchewan. College of Education Home Page ....... University of Saskatchewan Home Page Main Level: [Home Page] [Design Theory][Site Design] [Page Design] [MultiMedia] [Teacher Resources] [Table of Contents]