Contents Page Design Introduction Graphic design 100 Balanced pages Design grids for pages Graphic safe areas Page headers Typography I Typography II Typefaces Consistency Basic Tables Page length Cross platform issues Editorial style Frames Advanced tables		There is no single design grid system that is appropriate for all Web pages. The first consideration in a Web design project is to establish the basic layout grid for your pages. With this graphic "backbone" you establish how the major blocks of type and illustrations will regularly occur in your pages, and set the placement and style guidelines for major screen titles, subtitles, and navigation links or buttons. To start, gather representative examples of your text, along with some graphics, scans, or other illustration material, and experiment with various arrangements of the elements on the page. In larger projects it isn't possible to predict how every particular combination of text and graphics will interact on the screen, but examine your Web layout "sketches" against both your most complex and least complex pages. The goal is to quickly establish a consistent, logical screen layout, one that allows you to quickly "plug in" text and graphics for each new page without having to stop and re-think your basic design approach for every new page. Without a firm underlying design grid, your project's page layout will be driven by the problems of the moment, and the overall design of your Web system will look patchy and visually confusing. Analyzing page grids When we designed this style manual we used a basic page grid that incorporates an image map menu at the top and bottom of every page incorporating paging buttons. A "scan column" along the left of the page does two jobs: it provides space for local links to related material, and also gives visual relief by narrowing the right text column to about 60 - 70 characters per line. This diagram shows the major repeating components of the style manual pages: Here we show the "invisible" table (BORDER="0") that underlies the column structure of the page, and the critical page dimensions: We chose 535 pixels as the maximum dimension for the page layout because that is the widest table that will print on standard letter size or A4 paper (although, given variations in Web broswers, fonts, and laserprinters, some slight cropping may occur.). With a few exceptions, all graphics for this manual were designed to fit within the 365 pixel "safe area" of the text column. If you view the source code for these style guide pages you will see that the table structure we finally ended up with is quite complex. The example page below shows a similar but highly simplified table-based layout with a scan column and a text colum. For illustrative purposes we set the table border to "1" so you can see the edges of the table: Simple table-based page layout example. To modify this example for your own use, click the link to open the page, then use your browser's "View source code" option to view and copy the HTML code.