| Barupa's Website Design Tutorial | ||
|
|
||
|
and user readability What's the difference between a webpage and a GREAT webpage? A webpage gives us information; a GREAT webpage catches our attention--that "Oh, Wow!" reaction--and gives information as expeditiously as possible. A great page can be achieved as easily with Netscape Composer as with an expensive authoring program--the key is planning and creativity. To begin layout, analyze the information to be displayed and decide how it will be most readable. Pick a template that best accommodates that display (for example, a detailed background image would be unsuitable behind a lot of text). As your templates were created, page layout may have been anticipated. For a word count of how much text will fit into a certain area, type a nonsense paragraph (like the old typing favorite, "Now is the time...") into the template. Create a margin and leave some empty space for balance and symmetry are two basics from the world of print that also apply to webpages. The human eye only encompasses about 4" of text at a time, so text displayed from one edge of a browser window to the other is very difficult to read; indenting text to create a margin alleviates this problem. Creating short paragraphs will further increase readability. The eye sees empty space as a block, the same as a block of text or an image block. An eye-catching webpage uses empty space to highlight page elements and enhance readability. For example, images with text wrapped around them and icons used to navigate or as bullets are more appealing if there is space around them. Use Composer's Image Properties window to add vertical and horizontal spacing around images. There are three methods to create balanced page layout: blockquote margins, tables, and frames. Each method has pros and cons; it can be advantageous to use all three to build a website. Blockquote margins are the easiest method to use for creating a margin on a heavily texted webpage. Composer has a button with a right arrow to indent text, creating a nice margin on both sides of the page. The limitations of this method for page layout is in placing images and aligning small blocks of text. Tables are the premier method for page layout. Their versatility, especially with zero borders and spanning columns or rows, cannot be matched by any other design technique, and it is impossible to describe here the variety of ways to create a table-based page layout. An appealing table layout on another webpage can be easily adapted with Composer. Some classy designs use nested tables, that is, a table within the cell of a larger table. A disadvantage of tables is that navigation inside tables may not be readable by machines for the disabled, so text navigation should always be provided at the bottom of each tabled page. Frames
are increasingly popular on the web, but they remain a controversial subject
among web designers. Frames are rarely advantageous for a whole website,
however, there is a place for frame-based layout, like paging through recurring
information or keeping students on a school website while viewing offsite
links. Frames can be tricky to do correctly and effectively, but the Composer-Level
3 tutorial explains them. Browsers for the disabled may not display
frames, so providing non-framed pages may be necessary, increasing the
amount of work. * There is actually a fourth layout
method becoming popular: cascading style sheets. Check some of
the sites on the WM-Tek page for more information. Page layout is where web authors display the most ingenuity and creativity, but keep in mind consistency of identity and navigation. Page layout should not confuse viewers, but rather help them get the information they need. The more easily they can do that, the more likely they will use your website again. |
||
|
Barbara Paciotti 2004
|
||
Intro | 1-Identity | 2-Customer | 3-Navigation | 4-Layout | 5-Content | 6-Graphics | Back to HOMEPAGE