basic webpage layout and design

BASIC WEBPAGE LAYOUT AND

DESIGN

DEFINING A WEB SITEThe very first step in designing a Web site

is to define it. And to properly define a site there are three questions that must be answered.

What is the purpose of the site? Who will be visiting the site? How will the site serve the client?

The answers to these questions will guide you as you construct the site

IDENTIFY THE PURPOSE OF THE SITEA Web site may have several purposes. In

that case it is necessary to determine which is the primary purpose, which is secondary, and so on.

I want people to join my groupMy site is like an online newsletterI am trying to sell somethingThe main purpose of the site is

educational

IDENTIFY WHO WILL VISIT THE SITEDetermining who the visitors are likely to

be is crucial in deciding not only the general appearance of the site, but also the technology that might be used to build the site.

If the project is likely to have visitors who log in from home, it is necessary to design the pages with the understanding that some users may still have slow modem connections.

Even with so-called "hight speed access," Internet connect speeds vary wildly. Users with DSL will almost certainly notice slower page loading compared to those users who have cable or fiber optic access.

who you expect to visit your site: College studentsExpert Web usersInternet newbiesMusic fansPet ownersPeople with dial up modemsPeople with cable Internet accessInternational corporations

SERVING THE NEEDS OF THE CLIENTThe term "client" in this instance refers to

anybody for whom a site is built, not just a paying customer. In the case of a Web site built for a family reunion, the client is the family. Will the site properly serve the need of the family by providing clear directions to the location of the reunion? Can the family photos be properly displayed?

Does this site meet the needs of the "client?" Yes, the text is easy to understandYes, the images are clearYes, the site downloads quicklyOops, we forgot to put in our email address!Yes, students can download their assignmentsOops, the site takes too long to downloadYes, the site is easy to update

Basic Web Design

ConceptsThere are several principles of design pertinent to the Web. Among them are

proximity, alignment, repetition, and contrast. These four principles affect how

Web pages are perceived.

PROXIMITY Proximity refers to the distance between

elements on a Web page and how the elements relate to one another. These elements include text, navigation, headings, and so on.

Generally speaking, elements that are close together appear to have a stronger relationship than elements that farther apart.

“Odd spacing causes the weak layout”

ALIGNMENTOne of the most critical principles of

design is alignment. Like proximity, alignment can enhance or detract from the appearance of a Web page. But in addition, it can significantly affect the readability of material on a page.

On most printed pages in Western culture, the text is aligned left and reads from left to right. This provides a consistent starting point for each new line. The eye of the reader becomes used to easily finding the beginning of a new line.

REPETITIONRepetition is not only saying the same

thing several times to get a point across. It is also the use of a consistent theme throughout a Web site. While all the pages on a Web site do not have to be exactly the same, there should be enough similarities to create a consistent look and feel to the site. This consistency is one of the things that help make a site easy to navigate.

CONTRASTContrast works in several different ways.

Perhaps the most obvious example of contrast is the color of text against a background. It is much easier to read text that contrasts highly with the background.

This is an example of poor contrast. The color of this text is not

different enough from the background color. Higher contrast is far easier to read.

However, contrast can also include all sorts of differences between elements. Under some circumstances, contrast is used to make something different so that it stands out. This helps to indicate what is important.

NAVIGATIONThere are several basic styles of

navigation. In general, the styles are identified by position and orientation on a page.

They include: Top Left Side Right Side Bottom Horizontal Vertical

Top and side navigation are the most common. Right side navigation is relatively rare. Because it is so rare, it should generally be avoided because Web visitors are not used to it.

Bottom navigation is used when pages are long. This eliminates the need for the page visitor having to scroll back to the top of a page to access a link.

FONTSText in Web pages is displayed by

browsers using the fonts available in the viewer's computer. Most PC users have Arial and Times New Roman installed. Macintosh computers usually have Helvetica and Times. Arial is similar to Helvetica and Times is similar to Times New Roman. The vast majority of text presented on Web pages is limited to these fonts for both practical and technical reasons.

TEXT PRESENTATIONBecause the Web is primarily a visual

medium, and the main method on information presentation is text, how text is presented is an extremely important consideration. Which font to use is only element that must be considered when building a Web page.

Large text is hard to read because people can only read one or two words at a time.

Small text is difficult to read because many computer screens cannot clearly display the tiny characters. Also, small print is hard to see under the best of circumstances.

Black text on white a white background is easiest to read.

White text on a black background harder to read than black on white.

This combination is hard to read because there isn't enough contrast between the text and background colors.

Red and blue is difficult to read because of perception problems. Sometimes the text almost appears to vibrate.

PAGE SIZE AND LAYOUTOf the biggest challenges for Web

builders is the variability of the screen sizes with which they must work. Deciding on how wide a Web page should be is based on several factors. Most computer monitors are set for a width of 1024 pixels or wider when they are delivered from the factory. CRT monitors are relative rare these days, and LCD monitors are more common. Each type has different default settings as they are shipped from the manufacturer.

If the page is being viewed on a monitor set at 800 x 600 pixels. When viewed on a monitor set at 1024 pixels or wider the blank space on the right side may still be acceptable. It is necessary to test a Web page design on monitors with different settings to be sure the dimensions are appropriate.

TABLESTables are used to control the width of

material presented on a Web page. Table width can be specified in either percent or pixels. Specifying table width in percent will cause the table size to change depending on what the viewer's screen size is. This means that on some screens the page layout will be very narrow, on others it will be extremely wide. This telescoping effect can be very helpful when a design must fill a screen so that there are no blank areas.

TIPS, TRICKS, & QUESTIONSBrowser Question - There are several

browsers one the Web. One is much more popular than the others.

TOP TIPS TO ANNOY AND INSULT YOUR WEB SITE VISITORS

"This site best viewed with _____" - Don't suggest to your visitors that their monitors are set wrong or that they use the incorrect browsers. Sites should be designed to work right on all combinations of equipment and software.


"Under Construction" - Web sites are assumed to be periodically updated, changed, or otherwise "under construction." This just annoys people. You are telling them that you'd rather aggravate them than finish the site. Remember, people take detours around roads that are under construction.

http://library.albany.edu/imc/webdesign/page6.html


Background music - Takes too long to download, many people cannot hear it, and it will probably sound bad. Most users have music players (such as Windows Media Player and RealPlayer), and in may instances when they visit your page the player will start and cover up the Web site! One solution is to use a Flash! move with embedded music.

http://www.adobe.com/products/flash/


Horizontal scrolling - Avoid it because people will click out rather than do it.


Animated GIFS - The general advise these days is to avoid animated gifs because they are old fashioned and take longer to download. But, when animated gifs are carefully selected and chosen for a specific goal or purpose they can be effective. For instance, they can be used to illustrate a concept of technical detail. Never use them just because "you can."


Scrolling text or marquees - These often cannot be seen because browsers don't run the JavaScript that makes them work, or your page's visitors might have JavaScript turned off. Avoid the <marquee> tag because it is proprietary and doesn't work with all browsers. When you click the link above, be prepared because the scrolling marquee might not work!


Splash pages - The latest thing to be classified as obsolete. This usually involves downloading a "useless page" that has no pertinent information outside of a "Click Here" or "Enter" button. Splash pages can have their uses, and in some instances, such as Web sites for movies, bands, or high tech businesses they are almost expected. Be careful, however, and make sure your splash page has at least some useful information.

basic webpage layout and design

Documents