Week 12ii: Effective web design

Design considerations are also important when creating effective web pages.



Writing for the Web: Effective Screen Design

http://users.ipfw.edu/blythes/teach/writeforweb/webwrite1.htm

Screen design is important as it makes the Web page readable and invites readers to scan it.

For effective screen design, you need to work with text, space and graphics.

1. Text

Choose a font that can be read on screen. At times, you may not have control over what the text looks like on someone else's computer. It will be useful to let readers choose their own preferred fonts.


There are basically two types of fonts: serif and sans serif. Serif fonts such as Times New Roman and Book Antiqua have fine cross-lines at the ends of the letter. Sans serif such as Arial and Verdana don't have serifs.


Sans-serif is better for smaller type on screens; serif is good for type on paper.
Generally, serif fonts are not very clear when read online, especially font sizes below 12pt. However, note that serif fonts help those with dyslexia as the i, l and 1 (I, L, One) are often very similar in appearance in sans-serif fonts and can thus make things very hard for dyslexics to read.


Sans-serif fonts are generally easier and hence faster, to read online, even in small type. However, they may be an obstacle for the dyslexic readers.


According to http://www.theinternetdigest.net , the best font for the Web is Verdana. Its wide body makes it the clearest font for on-screen reading, even at small sizes. Georgia is the best option for serif font. You can still use Arial for certain parts such as headlines and titles which require a different font and in bigger sizes. As much as possible, make sure your text is the right size for your intended audience.


2. Space
Use space to:


Create margins: A screen full of text can look overwhelming to a reader
Reinforce organization: Use space to enable readers to know which texts are headings, etc, and where the different paragraphs are. (Use space to "chunk" text.)


Increase navigation: Use different columns to make it easier for the reader to navigate the text.


3. Graphics
Working with graphics is not just working with pictures. You can also work with colour (to highlight highlight information, etc) and lines (horizontal lines can strategically placed to separate blocks of information)


Effective webpage designs:

Remember there are differences in reading on paper and on the computer screen. It’s difficult for online readers to get their bearings when reading a series of Web pages, so make sure that your Web page:


Provides sufficient navigational guides: Let readers know where they are by offering them links and options (e.g., next page, previous page, home, etc.)

Ensures independence: Each page should be able to stand alone, which means that the author's name, affiliation, publication dates, and other necessary information should appear on each page.


If the Web page has been well designed, you should be able to answer the following questions easily:


What site is this? (site ID)
What page am I on? (page name)
What are the major sections of this site? (sections)
What are my options on this page? (local navigation)
Where am I in the whole site? (‘you are here’ indicators)
How can I search? (search options)