Downloaded 61 times
More Related Content
Similar to Basic webpage layout and design
Basic webpage layout and design
- 1. Basic Webpage Layoutand Design
- 2. Defining A WebSiteThe 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
- 3. Identify the Purposeof 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.
- 4. I want peopleto join my groupMy site is like an online newsletterI am trying to sell somethingThe main purpose of the site is educational
- 5. Identify Who WillVisit 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.
- 6. If the projectis 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.
- 7. 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.
- 8. who you expectto visit your site: College studentsExpert Web usersInternet newbiesMusic fansPet ownersPeople with dial up modemsPeople with cable Internet accessInternational corporations
- 9. Serving the Needsof 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?
- 10. Does this sitemeet 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
- 11. Basic Web DesignConceptsThere 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.
- 12. ProximityProximity refers tothe 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”
- 13. AlignmentOne of themost 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.
- 14. On most printedpages 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.
- 15. RepetitionRepetition is notonly 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.
- 16. ContrastContrast works inseveral 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.
- 17. However, contrast canalso 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.
- 18. NavigationThere are severalbasic styles of navigation. In general, the styles are identified by position and orientation on a page. They include:Top Left Side Right SideBottomHorizontalVertical
- 19. Top and sidenavigation 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.
- 20. FontsText in Webpages 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.
- 21. Text PresentationBecause theWeb 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.
- 22. Large text ishard to read because people can only read one or two words at a time.
- 23. Small text isdifficult to read because many computer screens cannot clearly display the tiny characters. Also, small print is hard to see under the best of circumstances.
- 24. Black text onwhite a white background is easiest to read.
- 25. White text ona black background harder to read than black on white.
- 26. This combination ishard to read because there isn't enough contrast between the text and background colors.
- 27. Red and blueis difficult to read because of perception problems. Sometimes the text almost appears to vibrate.
- 28. Page Size andLayoutOf 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.
- 29. If the pageis 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.
- 30. TablesTables are usedto 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.
- 31. Tips, Tricks, &QuestionsBrowser Question - There are several browsers one the Web. One is much more popular than the others.
- 32. Top Tips toAnnoy 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.
- 33. Top Tips toAnnoy and Insult Your Web Site Visitors"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.
- 34. Top Tips toAnnoy and Insult Your Web Site VisitorsBackground 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.
- 35. Top Tips toAnnoy and Insult Your Web Site VisitorsHorizontal scrolling - Avoid it because people will click out rather than do it.
- 36. Top Tips toAnnoy and Insult Your Web Site VisitorsAnimated 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."
- 37. Top Tips toAnnoy and Insult Your Web Site VisitorsScrolling 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!
- 38. Top Tips toAnnoy and Insult Your Web Site VisitorsSplash 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.