Home|MS Office|The 'Net|Safe Surfing|Searching
Evaluate Info|Copyrights|Web Design|Graphics|Links

Print Layouts Versus Web Designs

Let's start our discussion of Web design by comparing and contrasting print and Web layouts.  Many Web designers got started in print media. When working in print, anything is possible if you are willing to pay for it.

Publishing costs on the Web are much lower. Even those with low budgets can create beautiful, colorful layouts with fancy graphics.

Because printing costs are so high – brochures are laid out to be very space efficient and direct. No one publishes brochures for fun.

With the low costs of Web publishing, this has changed. Many sites include different types of information and features that would never have been included in a print layout.

Designers create many Web sties for noncommercial purposes and no one cares if you visit their page or not.

Advantage - Web

Because of the low cost of production, Web sites can be effective – even on low budgets. While print space is bought in inches and broadcasters pay by the second, space on the Internet can by had by the Megabytes. Many hosting services, for example, will provide a maximum amount of storage space for a flat rate – say $25.

Try getting a print shop to tell you that they will supply you with all the brochures you need for $25. Ask a print shop if you can use millions of colors and as many pages as you want. Then ask them if you can change your brochure and reprint it daily. All of these things are possible on the Web.

Be sure to take advantage of the low cost and ample space on the Internet and include things in your site that people will find interesting. Word-of-mouth is free advertising. Try to include things in your site that people will talk about.

Color

Web designers can use color with no extra charge and use many more colors than on a print page. Being creative with color in print becomes expensive. Designers can work in colors on Webs at no more cost than working in black and white.

Revisions/Updates/Archives

One problem with print media is the cost of reprinting. Products, prices, and information change. Correcting a mistake can be very expensive and mess up deadlines.

On the Web, things can be kept as up-to-date as you like, at a low cost. It isn’t a big deal if you find a misspelling – this can be corrected at virtually no cost in seconds.

Of course, this means that there are no excuses for mistakes on the Web – leaving a misspelling, typo, or grammatical error just shows the world that you don’t know any better or don’t care.

Good sites document the date of their last revision – viewers expect Web sites to be current. Many sites include a “What’s New” page.

Sites can also make available back issues, out of-date articles, or archives of older material that might still be of interest.

Distribution

Getting your Web site out to the public is easier and cheaper than other media because you only need to get people your site’s address or URL. It can easily be included in business cards, ads, letterheads, and other promotional items.

Search engines and keywords can also distribute your site. One of the best ways to get people to visit your site is to include interesting, updated, and innovative content that people will want to check back often to see.

Customer Response

Because people can respond to a Web site instantly, the biggest barrier in marketing no longer exists. It is much easier to collect information or orders when you can accept that information whenever people are ready to give it. Good web sites include some interaction with the viewer.

Multimedia

The ability to communicate in sound and motion is a great advantage over print. Be careful that these effects do not overwhelm the viewer or interfere with your main message. Adding “whistles and bells” can slow a Web site’s loading and cause people to click elsewhere.

Many multimedia effects require advanced software or plug-ins and are not seen by the average Web surfer. As good as these tools can be, remember, many effective sites do not employ any of them.

Advantage - Print

Don’t fool yourself, however, print media still has advantages over the Web. Print is still an effective and valuable media. Our point is that each media offers a collection of advantages and it is up to users to determine what will work best for a given situation.

Portable Cheap Distribution

Carrying a brochure or book is easier than a computer and monitor. Laptops need to be recharged and today’s palm computers do not fully display the designer’s work. People can read almost anywhere.

Once distributed, reading a book or piece of paper costs the reader nothing. Computers are expensive.

Familiarity

More people are comfortable with printed documents than computes. The texture, look and feel of printed material can be comforting. High-quality graphics can be printed better than they can be displayed on a monitor.

Reliable WYSIWYG

Designers of print media know exactly how readers will see their work. Pronounced “whizzi-wig,” or “What You See Is What You Get,” your printed documents or desktop publishing in MS Word, MS Publisher, PageMaker, or Quark do not have to be tested in different programs. You know how they will look.

Web pages look different from browser to browser and from computer to computer. Web designers must be careful to create designs that work on as many systems as possible.

Speed

The beauty or clearness of a print layout is immediately recognized. There is no need to wait for downloads and files. Books never crash or run out of memory. A well-organized page is quick and easy to read.

Home|MS Office|The 'Net|Safe Surfing|Searching
Evaluate Info|Copyrights|Web Design|Graphics|Links
|Top|

Good Webs/Bad Webs

What makes a good web design? Well, reasonable people can disagree. The Internet is a vast collection of all types of information.

Just think of how you surf the web. Probably you don’t like to wait for pages to download and if a page is not easy to read, you click and go to another site. After all, some sites are easier to navigate than others.

Creating Web pages with today’s software is easy. In Microsoft Office, you can make Web pages with Word, PowerPoint, Excel, Access, and FrontPage.

Once you get started, the only limit to what you can do is your imagination. Learning to create user-friendly Web sites that people will WANT to see is a valuable skill. Let’s see what we can learn from other’s mistakes.

Bad Web Pages:  Examples of pages that contain errors to avoid!  This Web was created to show things to avoid when making pages. Let’s review the examples and see what we can learn about effective Web page layout BEFORE we get started.

Home|MS Office|The 'Net|Safe Surfing|Searching
Evaluate Info|Copyrights|Web Design|Graphics|Links
|Top|

Chunking Information

Perhaps the first step in designing good Webs is to think about the information you want to communicate.  What formats will you use - text, graphics, audio, multi-media, and/or video?

Organizing information so reader’s can easily understand is the key to effective communications. Psychologists have long understood that people only process a few pieces of information at a time.
Breaking information into pieces or “chunks” is the key to presenting ideas. Most of us will not read long passages of information on a computer screen. In fact, it probably annoys us. Web pages must present information in small chunks.

If we present a limited number of ideas at a time and use graphics, colors, and layouts to reinforce our main ideas, it is more likely that our communication will be successful. It is easier to impress people with a few well-organized concepts than with large amounts of details.

One of the main advantages of Web pages is the ability to provide “hyperlinks” to additional pages of information or sites. The usability of a Web site is greatly increased if links are carefully arranged to chunk information by sharing themes, concepts, and formats.

Organizing a Web

Creating a carefully structured presentation of ideas is new to many of us. Web pages need logical organization to be effective; otherwise, users will look elsewhere.

There are 4 steps to organizing information:

1. 1. Divide it into logical units (“chunking”).

2. Establish a hierarchy or order of importance.

3. Apply this hierarchy or order of importance to set up relationships between each piece of information or “chunk.”

4. Set up a navigational structure and style that is easy to use and efficiently communicates.

Chunking

Most Web pages are collections of documents that are not read in a specific order. This style of technical/business writing is much older than the Internet. Manuals, guides, advertising, and technical information are written this way so that readers may pick and choose what is important to them.

Hierarchy

Determine what “chunks” are most important and organize them by their relationships between each other. Identify general information at the top of your hierarchy and become more specific as you move down the structure.

Applying the Hierarch

Once the order or hierarchy of importance is determined, examine the relationships between your information. Good sites arrange related information together in a way that users can predict. If you set up relationships between information that does not meet the user’s expectations, they will become frustrated and look elsewhere. Break your hierarchy into logical groupings.

Navigational Structure

The first three steps should determine the basic navigation structure of your Web page. Most sites should start with general information and allow viewers to click deeper into the web site for more details.

Set up your links to allow viewers to choose what type of information they are looking for. Drawing flowcharts of how the site will be structured will be helpful. Once this is done, start considering the aesthetics and style of your site.

Home|MS Office|The 'Net|Safe Surfing|Searching
Evaluate Info|Copyrights|Web Design|Graphics|Links
|Top|

A World Wide Web of Colors

The Web is a colorful world. Many of us have never had an opportunity to work with many colors. In print, it is too expensive. On the Web, it is free!

Color in light and on a computer monitor is very different than colors in paints and inks. While working with an unlimited color palette sounds great, it can be distracting and make a visual mess.

A limited color palette, or color scheme, can look appealing and add a feeling of sophistication and organization to your layout. Colors should be used to create an overall feeling and personality for your site. Contrast is important when working with color. Text needs to stand out from backgrounds. Just because something is beautiful does not mean it will be easy to read.

Unsure of what color combinations to use? Look at the color combinations of other web sites. If they looked great on someone else’s site, they will look great on yours too.

Borrowing color schemes is all right, but if you are creating commercial sites, do not use the color schemes of your competitors. This could result in expensive legal hassles.

CMYK Color

This is the model used for full color printing. It stands for cyan (a blue), magenta (shade of red) yellow, and black. This “four-color process” breaks images into separate dots of these colors that can be combined and layered to form any color.

“Four-color” printing is expensive. When just a few, simple colors are needed; printers use a solid colored ink to create the colored image. This is called “spot color.” For simple color schemes, this is cheaper than 4-color printing.

Both of these are “reflective” color models. We see color from the way light reflects off the surface of a page. We see all color in objects around us as reflections of light. On a computer monitor, the light comes directly from its source and is not reflected.

RGB

Standing for red, green, and blue; television, video, and computer monitors create images with thee three colors. They can be combined to display millions of different color. This is not a reflective color model like CMYK or spot color. These colors come straight into our eyes from sources of light and do not bounce off any objects.

On the Web, colors are defined by their RGB value or intensity. This is defined on a scale of 0 – 255. For example, one color might have R=172, G=155, and B=69. Another might have an R=25, G=178, B=115.

While monitors display RGB color, HTML translates RGB color into a hexadecimal code. It looks something like this: 66FFCC. You can see this in source codes.

Indexed Color

RGB can display millions of colors. A more limited selection, called a palette, of 256 colors is called indexed color. Of course, you can use palettes smaller than 256 colors. Limiting colors makes file sizes smaller which will allow graphics and pages to load faster.

Monitor Resolution

Images on a monitor are built from dots of light. A monitor’s graphic capabilities, or resolution, are determined by the number of dots of light (pixels) and the number of colors it can display.

Most PCs default to display 96 pixels per inch (Macs, 72 ppi). In your control panel, you can choose to display a varying number of total pixels on the screen. Common choices are 800 x 600 or 1024x768, though some are using smaller or larger resolutions.

1024 x 768 is larger than 800 x 600. Since the size of the monitor doesn’t change – the pixels get smaller when you use more. The more pixels you have (smaller pixels) the higher your resolution. While this makes images appear smaller, the details appear more highly resolved or crisper.

The more color a monitor can display, the better graphics appear. The numbers of colors a computer can display is related to the size of the monitor, the number of pixels per inch, and the computer’s RAM. More pixels and more color mean more memory is needed.

Browser-Safe Colors

Also called “Web Safe Colors,” a 216-color palette is common across most computers and operating systems. When more colors are used, the browser will convert the extra colors into the next closest match or will try to mix the color from the more limited palette. This is a problem for solid (flat) colors used in graphics and drawings. It’s not a real problem with photographs.

Home|MS Office|The 'Net|Safe Surfing|Searching
Evaluate Info|Copyrights|Web Design|Graphics|Links
|Top|

What is Your "Type"? 
Font Choices and the Web

Modern computers give us so many creative choices with fonts, that it is easy to “overdo” it. Making good choices out typestyles is an important part of Web design.

Readability Versus Legibility

Web pages are about communications and reading information is an important part of this. The key issues are readability and legibility.

Readability refers to how easy it is to read a lot of extended text, pate after page. Serif fonts are clean, light. Times New Roman (this font) is a good example of a common, readable font.

Legibility refers to how easy it is to recognize short bursts of text such as headlines, button, and signs. Sans serif fonts do not contain the extra lines or expression of serif fonts. This sentence is uses Arial, a sans serif font. It is easy to recognize each letter.
On a monitor, san serif fonts are more legible because the resolution (the number of dots that make up images) is not as high as on a well-printed page.

Guidelines for Readability

Use serif typeface for extended text. When text is meant to be read on a monitor, san serif fonts may be better choices.

Viewers can set their browsers for fonts and sizes that THEY are most comfortable reading. Set up Web pages to allow users to see the fonts of their choice. For body copy, don’t use anything bigger than 14-point size or smaller than a 10-point size.

Never use large amounts of text in bold, italics, caps, small caps, scripts, etc. Only use small amounts of these for emphasis. If overused, these basic styles loose their ability to attract attention and help the reader.

Avoid long lines of text. Don’t let your text spread out across the entire browser window. They are difficult for the eye to follow. Use columns or block indents.
Avoid extremely short lines of text. We read words in groups, not one word at a time. If lines are too short, these patterns are broken up.

Make sure there is enough contrast between backgrounds and text. Black text on a white background is the easiest to read.

Guidelines for Legibility

The guides for legibility apply to shot burst of text, such as buttons, lists and signs.

Generally, use a sans serif font. Avoid fonts that do not have distinct differences between each letter. For example, Franklin Gothic has the top parts of letters smaller than the bodies. This makes it hard to tell an h from an n or i from an I.

Avoid fonts like Copperplate Gothic that mix capital and lowercase letters together.  Do not use ALL CAPS. This is considered “shouting” and is hard to read because every letter and word has the same rectangular shape.

Breaking Rules

Creative designers can and do break rules. The point is to understand good designs and create readable, legible Webs.

Default Font and Sizes

All browsers come with a default font size, usually 12 point Times. You may change this to anything you prefer. Remember: You cannot count on the type you use looking the same on anyone else’s computer as it does on yours. You have 2 basic options.

1. Set the text in the “Paragraph” or “Normal” style. This applies a size to an entire paragraph. Whatever font and size the user has set in their browser will appear on that computer.

2. Apply a headline (numbered 1-6, largest to smallest). Each heading will appear in the browser’s default font. Headings 1,2, and 3 are larger than “Normal” or “Paragraph.” Heading 4 is the same size but bold. Heading 5 and 6 are smaller.

Usually, when you see fancy text on a Web page, it is a graphic and not text.

Let Go of Control

While it is possible to override defaults, do so with caution – viewers may not appreciate it. Accept the limitations of Web designs. It is not your job to change their browser settings -- it’s your job to work around these variables.

Home|MS Office|The 'Net|Safe Surfing|Searching
Evaluate Info|Copyrights|Web Design|Graphics|Links
|Top|

Homepage Usability

We all are more comfortable with things when we can see where we are or how things are organized.  Otherwise, things are confusing.  The same is true for Web pages. Web designs must immediately get their message across when people glance at the page.  The navigation structure must be intuitive, otherwise, they will click and go somewhere else.

Good designs do not have to explain themselves - Webmasters do not get to explain the brilliance of their design to their online "visitors."  People just look and click around.  A Web should have a distinctive look that creates an identity with style, something that they begin to recognize.

Creating an identity is important - it helps people recognize a Web as a starting place.  Remember, visitors that are refered from Internet searches or links often do not enter at the "home" page.  A Web needs to have a look and feel that welcomes viewers and lets them see and feel comfortable with your Web's design.

Homepages should:

Home|MS Office|The 'Net|Safe Surfing|Searching
Evaluate Info|Copyrights|Web Design|Graphics|Links
|Top|

The key to creating a positive impression in the minds of your viewers is to present information with an appropriate and consistent style, all organized to help highlight the way different types of information is presented.

Nothing is more frustrating than to click and click around a Web, constantly hitting your browser's BACK button because the links do not take you to the information you seek.  Again, if people do not easily find what they want, they will click and go someplace else.

Tips for Designing a Web's Navigation

Graphics

Graphics are powerful tools, use them to communicate information, not to decorate your Web.  Webmasters that effectively use graphics find that being sure graphics are appropriately used to enhance usability, they is plenty of color and "eye appeal" on each Webpage. 

To Do's and Don'ts with Graphics:

Typography and Layout

Fonts create a mood and style.  They make a statement about a Web's purpose and content.  This can be enhanced by using appropriate colors.  Webmasters need to be careful on the fonts they use, however, because different computers will substitute different fonts or users may have their browsers set to override the fonts that a Webmaster might choose.

Web layouts also need to consider that many variables will affect how a page displays - it is best to keep things simple.  While it is possible to design Web pages with special HTML code for different browsers and settings, this is time consuming, beyond the understanding of many Webmasters, and not supported by most HTML editors.  It is beyond the scope of this seminar. 

For most of us, it is better to keep our designs simple and check them in different browsers to be sure that they display in a reasonable manner.  Like most things in life, Web design represents compromises and trade-offs.

Tips for Typography and Layouts

Window Titles

The TITLE tag in HTML provides a statement at the top of a browser’s window. HTML editors like DreamWeaver and MS FrontPage make it easy to add titles without hard-coding the HTML.  Title tags are important because they are used by browsers to identify bookmarks or favorites. Keep titles short.

Tips for Window Titles:

Some Design Specifications
Business/Professional Sites

Home|MS Office|The 'Net|Safe Surfing|Searching
Evaluate Info|Copyrights|Web Design|Graphics|Links
|Top|

Navigation Structure

How do viewers interact with a web site? The work “interface” refers to how a page and how visitors use it. The interface design is what makes a site interesting, enjoyable to move around in and revisit. The navigation design, or how people get around a Web site, is an important part of interface.

Start With a Plan

Before you start creating a Web, make a list of the inform information to be included in the site. This listing will serve as an outline to organize information and create the basic structure of the site. As you work with this list, be prepared to evaluate and revise your plan.

Sometimes, it will be effective to combine points. Keep the content on each page brief; so be prepared to break your topics into smaller, separate ones. Usually, each main item of the outline will be a different page in the Web site layout.

Once your ideas are organized, it is time to sketch a flowchart of how the site’s pages and links. This is just a diagram of each page and it’s relationship to the others. Creating your site map or diagram on a computer makes it easy to move things around and visually play with the organization of the structure.

Horizontal Format

An important part of interface design is the page orientation. Traditional vertical orientation (8 ½” x 11”) is our typical paper layout. Because monitors are wider than they are tall and because some of the display screen is used for browser toolbars; it makes more sense to use a horizontal format.

Many people have small monitors. The smallest common size measurement is 640 pixels across by 480 pixels down. These types of monitors are becoming rarer and rarer - they are hardly ever sold as "new" today.  Planning to accommodate viewers with older computers, however, can still be an important design consideration.

About 20 pixels are needed to display the menu bar.  If you design you pates for 640 x 460, you are creating a design that will be effective with the highest percentage of viewers possible – they will see you page the way you intended.

At least your entry page should fit entirely in this space so visitors do not have to scroll. Check this out. Set your browser window to 640 x 460 and visit some sites to see how effective the layouts are.

Navigation Design

Effective Web pages are easy to click around in and find your way back to the homepage. This is the mark of well-designed navigation. As you surf, look for different styles and techniques of navigation. Some sites use text links; others use graphical icons. Keep you navigation design simple and clear.

Don’t make the mistake of trying to be clever and “different” by creating confusing navigation designs. It won’t impress anyone. The goal of a Web site is to communicate and nothing about your page should interfere with that. No matter how “new” and innovative an idea is – nothing is more important than simple, effective communication. If you have to explain your navigation system, it is wrong.

Navigation Style

There are many styles of navigation: buttons, icons, bars (groups of icons), plain text, fancy animated graphics, and more. Some sites use a navigation map or a picture that graphically illustrate a site’s content. Different parts of the picture are links to each part of the site.

Remember, some viewers turn off graphics so that pages load fast or are using old browsers that don’t support some graphics – be sure to include plain text in your navigation system.

Keep you primary navigation system compact and easily visible at the top, bottom, or side of the page. If a site requires scrolling down, put your navigation system at both the top and bottom. Repetition is fine as long as it serves a purpose.

Navigating Frames

Frames divide a browser window into two o more separate areas (frames) that can act independently. This can be very useful. If you put your navigation system in a separate frame, viewers can always access it because the navigation frame does not disappear when viewers visit different parts of your site.

Use frames carefully - increasingly, Webmasters no longer use them. Frames can make site navigation difficult if not used properly. Before you use frames, take some time to locate sites that use this technique effectively. As always, borrow ideas from the best. Be sure that frames don’t add clutter or have scroll bars that become distracting.

Online Web Design Resources

Home|MS Office|The 'Net|Safe Surfing|Searching
Evaluate Info|Copyrights|Web Design|Graphics|Links