![[ Image ]](Sample_Home.GIF)
Now that you have developed your site map which shows the exact organization of your site, it is time to turn your attention to each individual page in the site. In so doing, you will be able to specify exactly what each page in your site will look like before ever touching a computer keyboard. Nice feeling!
As you have been thinking about your web site you have probably thought once or twice about what it will look like to your visitors. A personal home page that provides the visitor with some information about you should be fairly lighthearted, a fun site. Other sites with more serious instructional purposes may need to be more serious and businesslike in nature. This doesn't mean that they should be boring and dry, but only that students need to take them seriously, as much as any schoolwork they do in class or at home. If you don't style your site as something important, you may find students browsing on. What this all means is that you need to set the tone of your site, and reflect it in the way the information is described on the screen. A well organized screen does a lot to communicate the serious nature of what is included, while lots of flashy animations, splashy lettering and casual organization signifies recreational or less important content. By all means, add interesting and attention gaining graphics and don't spare a good, bright color scheme.
Across a site, the tone should also be consistent, so that all of the pages look like they fit together. Not only does this make the site more professional looking, but it creates in the student's mind, a sense of all the parts working together rather than a mish-mash of thrown together parts.
Many new web designers are not sure how long a single page should be, and attempt to put everything into one page that scrolls down endlessly. Not only is this disturbing to the user, but it makes the job of building a site even harder. As you could see, when you created the site map, each page represents some unique part or conceptual unit in the site, all logically linked for easy access. One, long page can become mixed-up and terribly illogical.
Generally an effective web page is about two computer screens in length, no more. Occasionally you may need to consider a longer, scrolling screen, but usually only for content that runs long or is appropriate to a scrolling format, such as lists or indexes.
In a standard two screen long page, we can think of each half as being dedicated to certain types of information. This is particularly true with the first or "Home" page.
The top half of the page is the screen which will come up first, and consequently will be the first part seen by the user. Usually this means that the top should contain some type of signature graphic which incorporates the title of the site. This should be larger than other text and may contain visually appealing colors or graphics as well as the title.
Right below the signature graphic is where the introductory text should be placed. This text should not only describe the purpose of the site, but may also include a "grabber" which is some type of attentional/motivational device to gain the student's interest. This may be visual or textual but should be interesting, thought-provoking, and make the visitor want to see more. At this point, you have probably used up all of the space in the top half/single computer screen and need to move down to the next half.
The bottom half of the page should include objectives and a description of the site. This may also be the place to locate a menu to help students navigate through the site. At the bottom of the page you can put any other navigation buttons or links and information on how to communicate with you, the web master, such as with e-mail. Here is a sample Home page to give you an idea of where different parts can be placed.
Other pages may need to be organized somewhat differently, but try to keep the length to about two computer screens of information. In this way students don't need to scroll through long pages of what often appears to be confusing information
Sometimes it is necessary or even desirable to make pages longer. Links can be built-in to facilitate moving to different points in the page, but this is often a difficult or confusing task and the content loses some of that page by page look which helps students break it up into meaningful units more easily.
You should be aware that excessive scrolling can be perceptually disorienting and many users are not comfortable with this type of navigation. A second reason is one of organization. If you choose to develop longer pages, you should also build-in logical breaks in the text with horizontal rules (lines) or other graphic elements to provide obvious breaks in the content. You will also need to develop links within the text to move users to different sections of the page.
In general, scrolling and long pages are only effective when the content is closely related or is part of one exercise. In cases where the information is a long list, glossary, or index, then a scrolling page is appropriate, but remember to section it so that students can move to different parts of the page rather than by simply scrolling down. Remember also that designing these links may take more time than simple page creation and cause more headaches in defining links. A handy rule of thumb is: If it takes more than two screens, it may be too big conceptually and should be divided into shorter units.
How you place text and pictures on the page will affect the student's ability to extract information from them. Each page should be laid out for maximum ease in browsing and locating information.
Text and headings. Use appropriate headings to break text into meaningful units. In HTML different types of heading size and boldness are available, so use these to designate logical breaks and sections in a page. For more distinctive section breaks use a line or horizontal rule to differentiate the parts. Pictures also are useful in making various parts distinctive. Another useful tool in applying creative formats to a page is the table. Invisible tables allow the designer to place text in different parts of the page, creating visually appealing and attention gaining layouts. You will learn more about tables in the module on page design.
Visualization of content. Since web pages tend to be highly visual documents, it is important for you to think visually as you create them. Whenever possible, incorporate visuals to augment the text presentation. Do this cautiously because every time you post a visual, it adds to the size of your site and may actually slow down the delivery of the site to the user.
Determine, up front, just what visuals are needed and how they will supplement the text instruction. Once you have done this, you can search out the appropriate visuals and prepare them for inclusion in your web site. At this point you should know every visual you plan to use and be able to show where the will be placed on a page. In selecting visuals, consider the degree of realism needed, or if a diagram will be needed. You also should determine if the right visuals are available or if you will have to create them. When possible use already constructed pictures because it will save you a lot of time.
Once the visual materials are identified, plan on how they can be incorporated into the text. It is boring to simply string pictures and text in a long line down the left side of the page. Instead, organize them so that text wraps around the pictures, including them into the text.
In much the same way that you designed the site on paper in the sitemap, you will also design the pages on paper, again simplifying the design process (and the revision process). The sitemap showed the overall structure of the site, and in the same way, the storyboard will show the literal layout of each page. Storyboarding, a technique drawn from television and film production, is the process whereby each page is carefully drawn out on paper in such a way as to show the literal layout of the page.
When you design the storyboard pages, be sure that they mimic the final pages a much as possible. This means that your graphics and pictures should be shown in the size and location that you wish them to be seen on the full page (OK, OK, cartoons are fine, you don't need to be an artist). Similarly, your text should be blocked in to where you want it to appear with the appropriate headings. When blocking-in text, always specify the size and type of headings.
Show all buttons or hot text links and provide a note as to the destination of the link. You should also draw in any lines, buttons, or graphical features as accurately (size-wise that is) as possible. Lastly specify any colors, backgrounds, or text colors needed.
When you are done you will have a set of paper "pages" that will look pretty much like your final site. The good thing about this is that you can make changes with an eraser, and not take valuable computer time to rework them.
This process may seem time consuming at first, but you will find in the end that you will be able to take this storyboard and sit down at the computer and type it right in, quickly and easily.
Right now you should stop reading and begin creating a storyboard for the site you have planned. Use the sitemap you developed as a guide. remember, there should be one page for every one shown on the sitemap, and every link shown must be included as either hot text or buttons on the storyboard page. Don't forget about return links.
Give each of the pages a short, meaningful name. That is, something you can identify it by when you see it. These will become the identifier of the page in the URL's you finally create.
Now is the time for committing yourself to your design. So far you may have been thinking about the site in a fairly conceptual sense, but now you must make those decisions about the look, colors, layout and links. Your storyboard pages will look exactly like your final site pages, so work with that in mind.
The next module will be a change of pace from this one in that you will be able to get your hands into some HTML and see what it is like creating or "programming" web pages. It is actually quite easy and you will get the hang of HTML quickly.
