Designing+Effective+Websites

= Designing A Web Page for Easy Use =

One may wonder, what exactly is a [|Web Page?]

The overall effectivness of the design of a web page is key because making a first impression is important. The design of a web page impacts readers before they read a single word (2). Users are often more attracted to clean text and easy layouts. Layout, design, color and font all plays an important role of bringing together the website as a whole. The page layout should play a role before web designers add patterns and alignment into a web page. The fonts and color plays a role helping people have an easy time reading the content, and create an atmosphere for the web page (2).

Fourteen Guidelines for Designing Pages
Keeping these points in mind will help focus the design of a website to be professional and consistent.

Help users understand where sections of the site are located by implementing a consistent design. For example keep the search box in the upper right on all pages.
 * 1. Make the page elements obvious, using patterns and alignment**

When creating page design and layout, the content that will come must be considered. Content and design should mesh well together.
 * 2. Consider the entire site when planning the design**

Templates keep a consistent design across all pages, forcing the same design on each page or post.
 * 3. Work with templates**

Users scan pages quickly Important elements of the page should draw the eye naturally. Break text into small chunks and include headings that clearly delineate the content in each section. Also consider whether a visual may be more effective than a block of text, such as a list or table.
 * 4. Use space effectively. Keep active space in your content**

A false bottom is a horizontal line or a sudden block of space that gives a user the impression that they have reached the end of the page.
 * 5. Beware of false bottoms**

Create a spatial relationship between headings and the text to which they refer. Headings that float between sections above and below them do not indicate a relationship.
 * 6. Don't let headings float**

Centered text prevents users from easily scanning down a page.
 * 7. Don't center text**

Sans serif fonts thematically separate websites from paper documents.
 * 8. Set sans serif font as the default**

Choose a type size that is easy to read. Large text may be more visible, but it is hard to scan through in large blocks. Also consider that different machines may render text differently.
 * 9. Think broadly about users and their situations when setting type size**

Lines too long and users will have to move their eyes needlessly. Lines too short confuse the meaning of the text.
 * 10. Use a fluid layout with a medium line length as default**

Users often ignore large blocks of text in all caps. Additionally, lowercase letters have more varied shapes which makes them easier to identify.
 * 11. Don't write in all capitals**

Users expect certain design already. Reserve underlining for links and use italics for emphasis. Remember, however, italics are hard to read in large chunks.
 * 12. Don't underline anything but links. Use italics sparingly**

High contrast allows for easy reading. Keep the background light and the text dark or vice versa.
 * 13. Provide a good contrast between text and background**

Be sure your site works in monochrome as well as colors.
 * 14. Think about all your site visitors when you choose colors** (2)

Illustrations are important to the design of a website. Illustrations can include photos, drawings, charts, graphs as well as maps. Important considerations when designing illustrations for a page include purpose of the website and the audience. (1) There are four different situations where illustrations should be used in websites.
 * Illustrating Websites Effectively **


 * 1. Picture of an Exact Item **

These illustrations are used on e-commerce web sites. These illustrations should show the exact image of the item. You may show multiple views of an object. These types of illustrations are also helpful before customers buy concert seats or airline tickets. These illustrations would show the seating arrangements of the opera house or the seats available on an airplane to a customer.



**2. Picture Illustrating a Concept or Process**

These types of illustrations help the reader to understand dimensions or quantities. These types of illustrations are used on rental car websites. Web designers add illustrations to show the differences between economy, standard and mid size cars. See example below.



**3. Chart, Graph or Map**
A web designer can add a map to show geography to a reader.

**4. Mood Picture**

Web designers add this to evoke an emotion from the reader. These illustrations show a real objects or people. An example of a mood picture would be a picture of an abused dog on [|ASPCA's] website, pictured below.



Nine General Guidelines for Using Illustrations Effectively
1. Don't make people wonder what or why. 2. Choose an appropriate size. 3. Use illustrations to support, not hide, content. 4. In pictures of people, show diversity. 5. Don't make content look like ads. 6. Don't annoy readers with blinking, rolling, waving or wandering text or pictures. 7. Use animation where it helps. 8. Don't make people wait through Flash. 9. Make illustrations accessible. (1)

References 1. Redish, Janice. "Using Illustrations Effectively." //Letting Go of the Words: Writing Web Content That Works//. Amsterdam: Elsevier/Morgan Kaufmann Publishers, 2007. 276-306. Print. 2. Redish, Janice. "Designing Your Web Pages for Easy Use." //Letting Go of the Words: Writing Web Content That Works//. Amsterdam: Elsevier/Morgan Kaufmann Publishers, 2007. 127-170. Print.