Monday, September 9, 2013

Principles of Web Design

 The interface that the user must navigate is often called the look and feel of a Web site. Users look and feel when they explore the information design of your site. They read text, make associations with links, view graphics, and, depending on the freedom of your design, create their own path through your information.

Design for the Computer Medium

When designing a Web site, remember the destination is a computer monitor, not the printed page. As a Web page designer, you must create Web pages specifically for the computer screen. You must consider how the layout, fonts, and colors will appear on the screen.

Make Your Design Portable

To be successful, your Web site design must be portable and accessible by users who have different browsers, operating systems, and computer platforms. Many designers make the mistake of testing in only one environment, assuming that their pages look the same to all of their users. No matter how much Web design experience you gain, always remember to test in different environments even when you feel confident of your results.



Design for Low Bandwidth

Plan your pages so that they are accessible at a variety of connection speeds. If your pages download slowly because they contain large, detailed graphics or complicated animations, your users will leave before they ever see your content. The average user clicks away from a site if the page does not download quickly.

Plan for Easy Access to Your Information

Your information design is the single most important factor in determining the success of your site. It determines how easily users can access your Web content. The goal is to organize your content and present it as a meaningful, navigable set of information.

Plan for Clear Presentation of Your Information

Keep in mind that readers have different habits when reading online. Compared to how they read printed text, they scan more and read less online, skimming long pages quickly as they scroll through the text. Include plenty of headings so users can find content quickly. Control the width of your text to provide complete, easy-to-read columns. Rather than presenting long scrolling pages, break information into smaller chunks and link them with hypertext.

Create a Unified Site Design

When designing your site, plan the unifying themes and structure that will hold the pages together. Your choices of colors, fonts, graphics, and page layout should communicate a visual theme to users that orients them to your site’s content. The theme should reflect the impression that you or your organization wants to convey.

Plan Smooth Transitions

Plan to create a unified look among the sections and pages of your site. Reinforce the identifying elements of the site and create smooth transitions from one page to another by repeating colors and fonts and by using a page layout that allows different hierarchical levels. Avoid random, jarring changes in your format, unless this is the effect you want to achieve. Consistency creates smooth transitions from one page to the next, reassures viewers that they are traveling within the boundaries of your site, and helps them find information.

Use a Grid to Provide Visual Structure

The structure of a Web page is imposed by the grid or page template you choose for your page design. The grid is a conceptual layout device that organizes the page into columns and rows. You can impose a grid to provide visual consistency throughout your site. You can use the grid to enforce structure, but you also can break out of the grid to provide variety and highlight important information.

Use Active White Space

White space that is used deliberately is called active white space and is an integral part of your design that structures and separates content. Sometimes the strongest part of a design is the active white space. Passive white space includes the blank areas that border the screen or are the result of mismatched shapes.

Design for the User

Keep your design efforts centered solely on your user. Knowing your audience answers almost all design questions—if it serves the audience, keep it; if it is potentially distracting or annoying, eliminate it. Find out what users expect from your site. If you can, survey them with an online form.

Design for Interaction

Think about how the user wants to interact with the information on your Web page. Design for your content type, and decide whether the user is likely to read or scan your pages.

Design for Location

It is difficult to predict the user’s exact viewing path. There is, however, general agreement on the relative areas of screen importance.  During page design, rank the information you want to display, then position the most important in the middle of the window, the next most important across the top, and so on, with the least important or static information in the left margin.

Guide the User’s Eye

The user can traverse a page in a variety of ways. Human engineering studies show a wide range of results when tracking a user’s eye movements. As you plan your design to guide the user’s eye, consider the following two examples of online reading habits. As a function of normal reading habits, the user’s eye may move from left to right and back again,
In contrast, when viewing landscape-based displays, such as televisions, the user may scan information following a clockwise pattern.

Keep a Flat Hierarchy

Do not make users navigate through too many layers of your Web site to find the information they want. Structuring your Web site to include section- or topic-level navigation pages allows users to find their path quickly. Try to follow the “three clicks rule”; that is, don’t make your users click more than three times to get to the content they desire. Provide prominent navigation cues that enable quick access.

Use the Power of Hypertext Linking

Unlike paper-based authors, as a hypertext author you have the luxury of adding clickable text and images where necessary to guide users through your information. This powerful ability comes with a measure of responsibility. You make the decisions that determine how users move through your site and process information.Many sites have separate columns of links and topics, but not enough provide links within the text. This is a powerful hypertext feature that is not used often enough.


How Much Content Is Enough?

Resist the temptation to overload users with too much information. Provide enough navigation clues to let them find the content they want. Separate content into smaller portions and use hypertext linking to divide content between pages.

Design for Accessibility

Any large audience for a Web site includes users who want to access your content despite certain physical challenges. Designing for accessibility means developing Web pages that remain accessible despite any physical, sensory, and cognitive disabilities, work constraints, or technological barriers on the part of the user.
Building more accessible content does not mean that you have to forgo more challenging Web designs. Often the best way to provide a more accessible site is by building alternatives to the traditional navigation choices or by offering a text-based version of your content.

 Design for the screen

You must take the following differences into account when planning your Web site:
  • Consider the shape of a computer screen.
  • Although a piece of paper reflects light, a computer screen has light passing through it from behind.
  • Computer screens use a much lower resolution than the printed page.

Reformat Content for Online Presentation

It often is a poor choice to take documents that are formatted for print and post them online without considering the destination medium. In most cases, a document that is perfectly legible on paper is hard to negotiate online. The text length, font, and content length do not transfer successfully to the computer screen.