Syllabus
Calendar
Projects
         Individual
         Team
Module 1
Module 2
Module 3
Module 4
Module 5
Module 6
Learning Teams
Resources

Week 2 – Web Design and Multimedia Development

Objectives
Reading
Training
Individual Project
Learning Team Project
Lecture - Multimedia Instructional Design
Discussion Questions

Objectives:

• Examine HyperText Markup Language (HTML).
• Determine the cost, timeline, and tasks required to complete a Web site.
• Devise a Web site flowchart.
• Design a basic Web site.

Reading:

Read Chapters 14 - 16 in Multimedia: Making it Work

Read the Electronic Reserve Reading for this week. Please survey the listed articles and read the ones you feel will be helpful to you this week.

Training:

Individual - Personal Web Site, Part 1

Learning Team - Team Web Site Project, Part 1

Lecture - Multimedia Instructional Design:

Review of Week 1

Last week we talked a bit about what multimedia is and the different aspects and how it is used in your workplaces.

This week in the reading, we are going to get into the planning and preparations aspects of multimedia development. You begin building your personal web site by writing HTML in NotePad (no editors yet), and you start working on your Learning Team project.

Platforms

It is very important that you know what types of platform you will be designing your instruction for. There are many aspects to a platform:

• Hardware
• Software
• Operating System
• Graphics and audio capabilities
• Screen resolutions
• Processor speed and RAM
• Internet connectivity
• Browser
• Others

If your users are going to be accessing the instruction over the Web, you’ll need to take into consideration all of these aspects. If you know for sure (100% positive) that all of the users are using PCs with XP and Internet Explorer 6.x, then you can design for only this configuration. But if you know that some of your users are on lower-end machines and operating systems, or you are not really sure of everyone's configuration, then you need to design for the lowest common denominator, the lower configuration. The point is that you must make sure that all of the users will be able to access the instruction, see and manipulate all of the features, or make alternative options available.

It would be a shame for you to put hours and hours of work into a beautiful, rich instructional piece that included audio and video, only to find out that a large percentage of the users who are supposed to go through the training can’t hear any audio because most of the PCs in that company or institution do not have sound cards!

I experienced this with a couple of my courses that I designed for the Engineering program. We made the choice to use Flash to animate many of the concepts. The professors thought this was great, saying that all of the engineering students would have the ‘latest and greatest’ computers, and we went ahead with the project. When the first course was taught, we started getting calls from some of the students that they couldn’t hear any of the lectures. After asking a series of questions, we determined that some of the students were going to labs on campus to take these courses and none of the lab computers had sound cards. Needless to say, this was a problem! Particularly since almost all of the courses the Center was developing had some form of audio in the instruction.

We were able to ‘push’ the Instructional Services department to upgrade the computers in the labs, which ultimately benefited all of the students, not just our ‘distance’ students, but this is not always the case.

Planning

Again we come back to planning. As the example I used in the Week 1 lecture, lack of planning can be very costly, not to mention frustrating. Planning is time-consuming, which is the number one reason why people skip this most important step. But they do so not realizing how much additional time they risk adding to the project through rework, corrections, and at worse case, starting over completely.

Another excellent reason for planning is that almost all design projects have deliverable deadlines that must be met. The semester begins on a certain date so the instruction must be ready, or you need to deliver a final product to your client by a specific date. Breaking down your project into specific activities and assigning them to a timeline will prevent last minute rush, as long as it is monitored throughout the entire project. Spreadsheets are especially effective for tracking the timeline but you can also use the various project management software products available commercially.

There are many different documents that can be used as part of the design phase to help keep the team (or you) on track and on time. Here are the major documents you should consider creating for your project:

• Design Document – describes in detail what the design will look like, how it will work and what the user will be able to do with it.
• Flowchart – diagrams the activity flow in a piece of instruction (see your textbook for detailed description and uses)
• Storyboard – illustrates what the user will see on each page or screen of the instruction: graphics, text, links, etc. and how the pages will be linked together.
• Timeline – assigns a due date for each activity in the development process (e.g., audio for module 1 is due by xx/xx/xx. Text for pages for module 1 are due xx/xx/xx)

Evaluation

As you go through the design and development process of your project, it is essential that you continually have your work reviewed by someone else. It may be that the client will need to review it as you go so that you are assured that the end product is what they wanted in the first place. Or you may want to ask a fellow instructor or designer to look at your work and give you feedback as to what works, doesn’t work, editing changes in the text, and usability of your instruction.

Particularly for spelling errors, have someone other than the person who wrote it or put it into the web page proofread all of it. It is so easy to see what you expect to see if you are the writer or designer, but for someone who is looking at it for the first time, the spelling errors will jump off the screen at them. So even though it is hard to open your work up to constructive criticism and feedback, do it! You’ll be so glad you did when you are done.

All of our courses developed at the Center for Distance Education not only go through an internal review (one of the CDE designers looks over the course and tests out all the links and media) but also an external review when a remote person goes through the course, as a student would, to catch any technical or grammatical errors, and also look for ‘holes’ in the instruction. Remember that when links are broken or graphics don’t load on a web page for a course, it is the instructor/trainer/professor that the students blame, not the designer or programmer. It is critical that your work go through at least two separate reviews before being finalized.

Web Design

When it comes to the actual 'design' of the pages, we are talking about the layout. If you follow a few basic design principles when creating your web pages, you will design them in such a way as to help your reader scan through the page and find the information they are looking for, and more importantly, that YOU want them to find. These are called scannable web pages.

The tutorials talk a bit about web page design, the actual layout of the pages. Use these as guides when creating your own pages:

• Keep text concise and to the point
• Chunk text into short paragraphs to make reading and scanning easier
• Use bulleted and numbered lists to display content
• Use appropriate graphics sparingly
• Do NOT use underlining to highlight text as it will be confused with a hyperlink.
• Stay away from Italics for text, it’s hard to read on the screen
• Use color and bold to highlight text, but don’t use too many different colors on the same page. A good rule of thumb is to pick on of two complimentary colors for highlighting.
• There should be no horizontal scrolling.
• As a rule of thumb, the user shouldn’t have to scroll more than two or three screen ‘pages’ up and down, so break apart your content logically.

Take a look at this illustration of a web page:

You learn how to create bulleted and numbered lists in the HTML Primer this week, getting you off to a good start. Keep these principles in mind when you start laying out your pages using your web editor in Week 3. You may even want to design a 'template', a layout that you like and will use for all of your pages, before you start adding more pages and content.

There are many good books and websites on basic web design. If you have no design experience at all you might check out The Non-Designer’s Web Book (2nd Edition), Robin Williams and John Tollett.

If you are particularly interested in designing websites and multimedia for instructional purposes, one of the best books I can recommend is Curriculum webs : a practical guide to weaving the Web into teaching and learning, by Cunningham and Billingsley. They have an accompanying web site www.curriculumwebs.com/

You can find these on Amazon.com or BarnesandNoble.com or check with your local library.

There is a plethora of good web design books available, so my suggestion is to go to a bookstore and browse through them to decide which one is the best one for you. Some of them are more visual, others more technical. It just depends on what you individually are looking for.

Conclusion

We have discussed the various issues related to the planning phase of multimedia development:

• Platforms
• Layout
• Planning documents and process
• Testing and review of the instruction

My final advice in the planning process is to develop a small portion or prototype of the instruction and present it to the client for review before you start developing the entire project. This helps all parties involved to see how the final product will look, have opportunities to make changes before the entire project is developed, and will bring to the surface any workflow issues or resource problems that can be addressed before jumping into flow-blown development.

References:
Cunningham, C. A., Billingsley, M. (2003) Curriculum webs : a practical guide to weaving the Web into teaching and learning. Allyn and Bacon, Boston

Niederst, J. (2001) Learning Web Design. O'Reilly & Associates, Inc. Sebastopol, CA

Warlick, David (2002) Plan It: Design It: Build It: put your web site to work, Technology & Learning, Sept 2002, V.25, 2 pgs. 24 - 30

Discussion questions:

Check the Calendar for due dates.

1. Answer the following questions and post under WK2DQ1:
   • With so many Web-authoring tools, why is it necessary to know HTML code?
   • What resources are you using to help you create a basic Web site?
     
2. Storyboard the Personal Website. You can either use Word and create an outline with the major topics as the primary links, or use the drawing tools in Word to create a storyboard. If you have a copy of Inspiration you can create a storyboard like this one. The point of the storyboard is to create a visual picture of what your site will look like. How many pages you will have, how will they be linked, what pieces might be included on these pages, etc. This gives you a plan or a blueprint to work with over the next few weeks.

Post your version of your storyboard to the newsgroup with a brief explanation.

Here is a good explanation of storyboards for a multimedia project - http://journalism.berkeley.edu/multimedia/course/storyboarding/

Here is a good visual explanation of a storyboard - http://www.amacord.com/services/storybrd.html#quick