skip to content

Chapter 4: Page Layout


Contents of Book Chapter

  • Technical Considerations
  • Aesthetic Issues
  • Storyboarding: Sketching the Layout
  • Page Layout and Accessibility

Resources

  • Reusable code: server-side includes.
  • www.thecounter.com . Recent statistics on user systems, including resolution, color depth, and browser versions.
  • www.upsdell.com/BrowserNews/stat.htm . Statistics on browsers and versions.
  • Principles of Form and Design, by Wucius Wong. New York: John Wiley and Sons, 1993. An excellent primer on the principles of design and graphics, independent of medium. It is also quite useful as an idea generator.
  • Using Design Basics to Get Creative Results, by Bryan L. Peterson. Cincinnati, Ohio: How Design Books, 1996. An outstanding primer on the principles behind any design work.
  • Layout Index, by Jim Krause. Cincinnati, Ohio: North Light Books, 2001. Chock full of design inspiration.
  • The Web Design Wow! Book, by Jack Davis and Susan Merritt. Berkeley, California: Peachpit Press, 1998.
  • Design Whys, by Eric Eaton. Gloucester, Massachusetts: Rockport Publishers, 2003.
  • Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd edition, by Steve Krug. Indianapolis, Indiana: New Riders Press, 2005.
  • AIS’s Web Accessibility Toolbar, http://www.visionaustralia.org.au/info.aspx?page=614 . An Internet Explorer plug-in that can resize the window to a specific number of pixels. Invaluable for testing.

back to top...

Exercises
(mouseover answer boxes to reveal answers)

Check Your Reading Comprehension

  • Liquid layout means (choose one):
    • the design is constantly evolving, as the business needs evolve.
    • the design “flows” from the concerns of a focus group.
    • the elements on the page expand and contract to fit the available space.
    • the graphic images expand to fit the available space.
  • Text and images appear the largest with a 17-inch monitor with (choose one):
    • 640 x 480 resolution.
    • 800 x 600 resolution.
    • 1600 x 1200 resolution.
    • the number of pixels doesn’t matter, only the physical size of the monitor.
  • Text and images appear the smallest with an 800 x 600 display on a (choose one):
    • a 15” monitor.
    • a 17” monitor.
    • a 19” monitor.
    • the physical size of the monitor doesn’t matter, only the number of pixels.
  • Text and images appear the largest with a 1024 x 768 display on a (choose one):
    • a 15” monitor.
    • a 17” monitor.
    • a 19” monitor.
    • the physical size of the monitor doesn’t matter, only the number of pixels.
  • The “rule of thumb” for how many pixels fit on an inch of computer monitor is (choose one):
    • 50-100 pixels per inch.
    • 72-100 pixels per inch.
    • 100-150 pixels per inch.
    • 125-150 pixels per inch.
  • To avoid horizontal scrolling in an 800 x 600 window, limit the number of horizontal pixels to

    750 pixels.

  • The composition center of a design should typically be (choose one):
    • 1/3 of the way from the top or the bottom and centered horizontally.
    • centered both vertically and horizontally.
    • centered vertically and 1/3 of the way in from the left or the right side of the design.
    • 1/3 of the way from the top or bottom and 1/3 of the way in from the left or the right side of the design.
  • Which of the following is NOT a technique that we can use to make information clear:
    • Headings and subheads.     
    • Exclamation points.
    • Bullets or numbered lists.
    • Indentation.
  • Fill in the missing code to set the following table for solid layout, always fixed at 750 pixels.
  • <table style="width:750" >
        <tr>
            <td style="width:100">some content</td>
            <td style="width:100">some content</td>
            <td>some content</td>
        </tr>
    </table>

  • List the three building blocks of page layout.
    • Line
    • Shape
    • Color

back to top...

Critical Thinking Exercises (long answer)

Use vocabulary and concepts from the text to answer the following questions. Provide examples to document your explanation.

back to top...

Hands-on Exercises

  • Pick an existing web site on the web. Analyze the site using the checklist in the chapter summary. Be sure to identify the following: Is the design is solid or liquid? What is the visual hierarchy? Is the screen is symmetrical or asymmetrical? Are the asymmetrical pages balanced? Why or why not? What (if anything) is the visual adhesive on these pages? What color is the negative space? Justify your conclusions.
  • Pick an existing web site on the web and evaluate it based on the checklist in the chapter summary. What did the designers do right, and what did they do wrong?
  • Surf the web to find a site that has “killer” layout, and another one that has a poor layout. Analyze the sites using the checklist in the chapter summary. Compare and contrast what the “killer” site did well that the other site didn’t do so well. How would you redesign the site that has a poor layout?
  • After completing the analysis in any of the previous “hands on” exercises, trade your personal or group analysis with a peer. Discuss the similarities and differences in your analyses. When you came to different conclusions, each of you should explain how you came to your conclusions.
  • Create a black-and-white sketch, then a grayscale layout comp, for a home page and one possible lower-level page for one of the following possible web sites. Think about the audience, the purpose of the site, and the content each site could contain as you are creating the comp.
    • A site specializing in products for newborn babies and their parents.
    • A site for a children’s amusement park, catering to children under the age of twelve.
    • A site selling fishing equipment.
    • A site selling women’s designer clothing.
    • A site promoting tourism for the New York City.
    • A site promoting a non-profit environmental preservation organization.
    • A site promoting a grunge rock band.
    • A site promoting an oldies rock band that specializes in tunes from the late sixties and early seventies.
    • A site selling primitive antiques.
    • A site selling garden plants and supplies.
    • A site advertising an Italian restaurant.
    • A site promoting a small but trendy modern art gallery.
    • A site promoting a large, traditional art museum.
    • A site promoting a museum of natural history.
    • Another site of your choice.
  • Choose one of the potential web sites from the previous question and create a layout sketch, then a layout comp, using some layout schema other than the traditional inverted-L. Test your design against the checklist in the summary and ask your peers and/or professor for critical comments.
  • Flesh out one of the layout comps that you created for an earlier question. Clean up the quick-and-dirty HTML you might have used, format the HTML, and pull all possible presentation formatting into an external CSS file. If you used tables for layout, do a second version that replaces all possible tables with divs. If you used divs for layout, do a second version that replaces all possible divs with tables. If you used liquid design, do a version with solid layout, and vice-versa. Test all versions thoroughly. Test your design against the checklist in the summary and ask your peers for critical comments. Choose a version to build upon as you progress through upcoming chapters.
  • Building upon the analysis you did in the prior chapter, create layout sketches and then grayscale comps of both the home page and one representative lower-level page for your personal website. The comps should be in a form suitable for display on a computer screen, either built as HTML pages or as “fake” pages built within a graphics editor such as Photoshop or Fireworks. Test your design against the checklist in the summary and ask your peers for critical comments. When the comps are refined, use either Dreamweaver templates or empty HTML pages to create and test the HTML for the home page and for the lower-level page. Start an external CSS file to hold all possible presentation formatting. Test your layout comp and CSS thoroughly. Begin adding content to the site. 

back to top...

    Ongoing Case Study Exercise

    Building upon the analysis you did in the prior chapter for the ongoing case study, create layout sketches and then grayscale comps of both the home page and one representative lower-level page. The comps should be in a form suitable for display on a computer screen, either as HTML pages or as “fake” pages built within a graphics editor such as Photoshop or Fireworks. When the comps are refined, use either Dreamweaver templates or empty HTML pages to create and test the HTML for the home page and for the lower-level page. Start an external CSS file to hold all possible presentation formatting. Test your layout comp and CSS thoroughly. Begin adding content to the site. 

    back to top...


| Home | General | 1: Introduction | 2: Site Analysis | 3: Navigation |
| 4:Layout | 5: Color | 6: Graphics | 7: Typography | 8: Forms |