Monday, January 7, 2008

Designing Webpage Layout

Craig Borysowich (Chief Technology Tactician)


Create a layout for each type of page (e.g., marketing page, search page, or data entry page) on the site. The layout organizes the elements to appear on the page and identifies where they are to appear.

Create a Layout Grid

Start by creating a grid that maps to the browser window and monitor size used by the target audience. The most commonly used browser window size is a 1024x768 pixel screen. The actual space available for a Web page is a little less than that since some of the screen is taken up by the browser and its buttons.

Design a grid that is expandable and collapsible so that varied monitor and browser window sizes can easily be accommodated. Use this grid system to maintain consistency throughout your Web site.

Placement and Style

Decide where to put standard elements (e.g., corporate logos, navigation bars, link to home page) that are to appear on each page. Establish guidelines for placement and style of major headings, subtitles and navigation buttons. Indicate where major blocks of text and graphics will appear on the page.

Test the Layout

Gather sample text and graphic content and experiment with placement of the information in designing the page layout. Try the layout with both the most complex and the simplest pages on your site to make sure the layout works well in either situation.

Test the layout with different sized browser windows and monitors. Make sure that the elements fit proportionally within a page when the window is expanded or collapsed. For example, when expanded, ensure that the elements do not appear to be floating in too much empty space. When collapsing window size, the elements should not be jammed too close together.

Tips and Hints

Aim for a modular design so that new content can be added to the site without redesigning the basic page layout.

Since users tend not to scroll down or across a web page, place important navigational elements as close to the top and left of the page as possible.

In general, pages closer to the top level of a site organization tend to emphasize the graphic and navigational elements of the site and act as a sort of menu and summary to guide users to the actual content. The lower level pages focus on the content and tend to de-emphasize the navigational elements.

The page layout appears as a pattern of text and graphics to the reader when viewed on-line. Keep in mind that regular, repeating patterns tend to be more visually pleasing than uneven, inconsistent patterns.

Don't overcrowd the page. Allow for empty space. Balance the style and content of the page.


Computers Blog Top Sites Internet Directory of Computers/Tech Blogs Blog Flux MapStats: Stats and Counter Service

No comments: