|
|
|
|
||||
Web Books
HTML & XHTML: The Definitive Guide |
© 2000 by David Karlins. All Rights Reserved.
Notice that I've entitled this step design and create your site. Even before you begin to design individual Web pages, it's useful to sketch out a macro plan for your site. This plan should include site navigation strategies (how will folks get around your site), site-wide design issues like color schemes and global icons, and how you will organize the text, images, and media that you want to present.
In my seminars, I often use the analogy of designing an office building. You wouldn't start by choosing where to place the desks, or what color to paint the doors. You'd start by working with an architect to sketch out the basic structure of the building, and then begin to fill in the details. Similarly, coherent Web design starts with a macro plan.
Two of the most frequently used designs for site construction are the hierarchical and the linear, or sequential. Both can give a good structure to your site, depending on your needs. Generally speaking, a more complex site with several categories of information would be best structured in a hierarchy. A sequential site is constructed with the aim of guiding the visitor through an ordered series of steps.
A hierarchal Web structure works like a flow chart. Each link leads to a series of related links. A must in any hierarchical design is a link on every page to take to visitor back to the home page. This way someone can easily explore other paths on your site. A basic hierarchy like this is one of the most used, and most useful, forms of site structure. I can't stress too much the importance of planning when constructing a hierarchical site. There needs to be a logical and sensible flow to the structure.
A linear, or sequential site is most appropriate for many sites. A linear design would be useful for a site in which you want to encourage visitors to go through your page in a certain sequence. For instance, a site that has an introduction and several steps (or chapters) important to read in order, from start to finish. Each page should end with a link that could take the visitor to the next step, and possibly another that would go back to the beginning.
The important thing is that you structure your site so that it makes sense. It's much easier (and much better) to shuffle and reshuffle items on paper before you begin, and design a structure that has an internal logic and cohesion.
A good site needs continuity and coherence not only to its content, but also to the presentation of that content. In other words, you want the use of background images, basic color patterns, buttons, and other features that appear from page to page to be consistent. Repeating the fundamental elements that tie a site together can help unify its various components. This, in turn, makes it easier for your visitors to navigate.
You want to select a basic color scheme that will form a sort of visual theme for your site. Changing the color scheme dramatically from page to page can be confusing to readers, and lots of loud, aggressive colors can overwhelm your content. Check out the site for one of my favorite radio stations, WWOZ from New Orleans, at http://wwoz.org/. The tasteful pattern of brown, black, and slate blue is repeated throughout the site.
There are several possibilities for background graphics. You can use an image that is tiled repeatedly until it covers your page. If you align the corners of the image squarely, a continuous, "seamless" background is formed. Any GIF or JPEG image can be tiled to form a background.
A popular and effective design format utilizes a frame on the left side of every page of a web site as a constant. This helps browsers find their way through the site quickly. A solid block of color with a company or site logo, and navigational buttons arranged vertically, makes for a simple but strong design. The frame on the left also provides strong organization to each page, and makes it more readable to the visitor.
Other types of background are possible - for instance, a single image that covers the whole page. But keep in mind that if you go this way, the file with the image usually is substantially larger than a tiled background image and will take longer to download, even if it is relatively simple.
When you decide on your main color scheme and background image, keep in mind the principal of contrast. It isn't hard to find web sites where color clashes and loud colors make the text of the site almost unreadable. Maybe some of them are intended to be that way. But you're probably going to want your colors and design to enhance and promote the content of your site. So be sure to develop a design that provides a good contrast between the text and the background.
You also should design or select your navigational buttons before you begin actual site construction. Many sites on the Internet offer good, free clip art you can use. Clip art is simply ready made art that can be "clipped" and inserted into your page. Just go to any search engine and start looking. You can often find images that are appropriate to the content of your site. For instance, if you are designing a site for a chain of sporting goods stores, you can use an image of running shoes for your buttons. Remain consistent throughout your entire site. And, as with everything else in this step, put them in a clearly marked file before beginning the actual site construction.
Once you have designed the basic structure, color scheme, and background of your site, you've gone a long way towards getting together the essential materials that will give your site its unique look and character. But there is still a ways to go before uploading.
As I said in Step two, you can easily convert text in word processing programs into HTML. If you feel more comfortable working in a program you're familiar with, go ahead. But the many popular web design programs available these days are written in WYSIWYG - what you see is what you get. Text is prepared in a way that, to the user, is not dramatically different from a word processing program.
One advantage of preparing the text in an HTML program is that it makes formatting for your web site easy. For instance, you'll readily get a uniform size for your various categories of headlines and sub-heads. All you have to do is create a folder, open a new file in your web design program, and begin typing your text, headlines and all. When you select the text of the headline, you can choose the size you want for your main headline. The largest size is plainly marked on all programs. Once you select the size of your headline, the size of sub-heads can be formatted the same way, and you can select font sizes that are smaller than but proportional to the main headline.
Once you assign standard HTML styles to text, you can control formatting with an easily edited external style sheet file. For a helpful discussion of how to use Cascading Style Sheets to apply global text formatting in a site, see Rick Altman's article "Sometimes Uniformity Can be a Good Thing."
Assemble the images you want to use in GIF and/or JPEG format. (Consult my other articles on this site for more on converting CorelDRAW images into these formats).
One of the more essential rules of web construction is that the graphic file must be in your web site folder before you put it on your page. Once you do that, it's easy to put the image where you want it. Just place the cursor where you want the image on your page, click on a command that says something like "Insert Image" (the precise wording will vary from one program to another), and select the graphic you want from your already prepared folder.
If your site has a lot of graphics, you will quite possibly want to use techniques such as alternate labels on the graphics, and thumbnails. You have no doubt noticed these when surfing the web. An alternate label is a small tag that describes the graphic. If, for some reason, the site visitor can't see the graphic, they will at least know what was there. Also, if they are impatient for the full picture to come into focus, they will know what to expect. Thumbnails - small versions of larger images - are very useful. A visitor clicks on the small image and moves to another location with the larger image. The small thumbnails image take less time to load on the page, but allow you to direct people who choose to do so to see the enlarged image.
My article on Step 3 in this series outlines some basic questions you have to answer concerning sound and multimedia effects, and briefly describes the most widely supported formats used to create them. If you decide to have audio, you can either have it playing when the site opens or offer it as an external link.
If your media creation has an external link, all you have to do is put the link on your web site and make sure that the media file is sent to your server when your page is published. The rest is up to your visitors. Many of the plug-ins needed to utilize graphics and animation can by downloaded by visitors who don't have them already.
If you are going to have an input form for collecting data, like the one shown in Step 7 of my introduction to this series, you should design it now, and put it in a file of your web site folder.
Finally, collect and test the URL's you intend to provide as links. Make sure they're active and what you expect them to be - you don't want to direct your visitors to a site that's defunct or changed.
Once you have charted out your site structure, navigational strategy, color scheme, collected your content, and developed global icons, you're ready to start designing pages. That creative process is beyond the scope of this series, but the Web Pages that Suck site is a good starting point for design ideas.
Discuss the articles with David in the Graphics Unleashed Discussion Forums
Choosing a Web Authoring Tool · Eight Steps to Implementing a Web Site · Step 1: Grabbing a Domain Name · Step 2: Publishing Your Web Content - Finding a Web Server Provider · Step 3: Develop Your Web Strategy · Step 4: Design and Create Your Site · Step 5: Publish and Test Your Site · Step 6: Promoting Your Site · Part I: From CorelDRAW to the Web · Part II: Creating Web Page Background JPEG Files · Part III: Creating a Hover Button in CorelDRAW
Flash 5 Tutorial 3: Using Masking in an Animation ·
Flash 5 Tutorial 2: Creating a Logo with a Shape Transition ·
Flash 5 Tutorial 1: Create a Splash Screen
Copyright © 1995–2013 Unleashed Productions, Inc., All Rights Reserved.
