1. Informational Design

2.  Informational Design involves determining a Web page’s content  Content – text and graphics  A successful Web page uses words and images to capture the viewers’ attention and provide information.

3. Think about what the page looks like as well as what the content says!!  Text should be short and easy to read  Must stand out from graphics, animation, navigation, buttons, and other elements.  Graphics should be visually appealing and informative.

4. Types of Elements ElementGuidelinesFormatting Paragraphs Introduce only one idea per paragraph Limit paragraphs to 75 words Use simple sentences Use bulleted list and numbered list properly Make sure text stands out from graphics Headings Use headings and subheadings to break up text Headings and subheading should highlight key points so that reader can locate info quickly Format main heading larger than subheading Use different color and typeface for headings and subheadings Graphics Make graphics visually appealingChoose graphics that can be used in place of words

5. Viewing Online Content  Users do not read a Web site as they would a printed item.  They scan the page in all directions, looking for something that catches their eye.  They use links to move quickly from one page to another **Don’t burry information – highlight key terms!

6. Organize Web Text  Web text should be organized like an inverted pyramid Most Important Next Most Important Less Important Least Important

7. Tips for Text  Be concise  Take time to review your text  Include strong verbs and nouns; eliminate the passive voice and wordiness  Say exactly what you mean in as few words as possible

8. Content Layout Guidelines  Visitors find it easier to use Web sites that contain short segments of text  Visitors are attracted to sites that are user friendly

9. Eliminate Clutter  Too much content can confuse visitors  Remove unnecessary content  Update information  Choose function over form  Avoid overkill

10. Align Text Consistently  When layout your page, line up items with each other  Avoid mixing alignments

11. Use Proximity, White Space, and Symmetry Proximity  Proximity – closeness of items to each other on a page  Causes readers to make assumptions about how elements related to each other  Try not to create false impressions

12. Use Proximity, White Space, and Symmetry White Space  White spaces – area without content  An area where your eye can take a break  Using white spaces helps frame and draw attention to content

13. Use Proximity, White Space, and Symmetry  Symmetry is a sense of balance in the layout  Page should feel balanced  To create a sense of symmetry you may divide your page in half:  Horizontal  Vertical  Diagonal  Radial  Asymmetric

14. Emphasize Content  A bigger design indicates more important information  A smaller design indicates that an item is less important  Most users look first at bold and larger items

15. Keep Download Time Short  You only have a few seconds to catch viewers attention  Every text item and graphic added increases download time  http://www.sixtiespress.co.uk/ http://www.sixtiespress.co.uk/  http://www.sixtiespress.co.uk/ http://www.sixtiespress.co.uk/  http://evuk.co.uk/ http://evuk.co.uk/