Web Design, Essential Principles

The construction of a site and how pages are organized, in themselves can contribute greatly to the success of a website, and sometimes even as much as the content. The design must be based on some simple basic principles, albeit it is more demanding for a Web 2.0 site with an elaborate interface.

The first step in designing a website is the definition of the user to which it is intended, while the latter will be to leave the site in the hands of a neophyte and watch him. His mistakes and difficulties in achieving what he want is the best test of design.
Between these two steps, a good website is constructed taking into account some unavoidable rules.

Transposition on the Web

This is what is known as the principle of metaphor, and that is to transpose a concrete and familiar object in the appearance of the interface.
It might be imagined, for example, a site about real estate which presents graphically itself as a building, with doors to access the various sections. But the metaphor is often more abstact.

Grammar of the interface

There is an interface grammar in the sense that the elements have a subject and a verb, namely an object and an action, action by the subject or to it. Other grammatical elements are possible too.

Thus you can define the interface of a big site from the start in terms of grammar, with an object and its actions, with the sequence of actions, and thereby optimize the interface by a better view of relationships between objects.

The exposition

The possibilities of the site should appear easily and entirely to the visitor. All visitors do not have the same easiness and some prefer the icons for example, on the other texts. But whatever visual mode is chosen, access to content should be simple, thorough and quick.

Consistency

A site is consistent when it works the same way in all its parts. For example, if there is explanatory tooltips appearing on a page, we must do the same on all other pages.

Visibility

When you enter a part of the site that requires a particular behavior, it is also accompanied by a change in appearance. And conversely, if the appearance change, it must be because something change in the use of the page.

Catching attention

Some elements are more important and should be highlighted, while others will be placed in the background.
The best way to attract attention, is in animations. Associating an animation to a service once it is activated by an user action or to direct its navigation, is a good thing. Animations are made with a GIF file editor or in Flash.

Simplicity and security

A site is said secure if we can prevent that a wrong move could lead to something definitive, for example to force to complete a lengthy form one more time! This goes hand in hand with simplicity of access to site's features.
The documents referred in the footnotes provide examples of simple and clear, or confused and ambiguous, designs.

Help the user

The visitor to a site need help because each site can have its own behavior and because it is rarely accessed through the home page but often thanks to search engines from inner pages.

There is a need for the user:
- To know where he is.
- To know what the site offers him essential, from every page.
- How to reach the services that may be of interest.
- And how to use them.
Beyond the navigation menus and tooltips, we can incorporate a wizard that will help to use the site, which is present on every page.

Rule of unique context

A good way to simplify the use of an interface is by limiting to a context, a unique service. For example, if a form must be filled, the entire page must be dedicated to this single operation. If we must choose between two options, only these two options must be shown to the user.
This does not mean that combining several forms on a page can't be done, but they must be clearly distinct so that one is completed without considering the others.
Showing a form in a lightbox is both a mean to improve the access and the aesthetics of the site.

Shortcuts

As a word processor where you can make commands from a menu and once accustomed to the software, that can be done more quickly with shortcut keys, the web site may provide shorter access for everyday users.

Aesthetics

The aesthetics of a site contributes to its credibility as much as its popularity. Visitors will naturally assume that a well-designed site has a valuable content too, and instead, a poorly designed site raises fears of questionable content.
A list of rules to improve the appearance of a site...

  1. Avoid aggressive colors: red or yellow background, for example.
  2. And so titles in giant letters.
  3. The display must be fast if not even immediate.
  4. No table to organize the page, use style sheets and if possible a template, a preformatted page where you automatically incorporates the text. The easiest way is to use a CMS.
  5. Incorporate pictures or graphs.
  6. If you make use of an Ajax or HTML 5 framework, do not use too much special effects.

The choice of colors

You can use color to transmit energy with contrasts and red color to on the contrary to cool down with similar colors and fresh colors.

We will refer to this study on the color palette: Basic color schemes.

Organization of the pages

A Web page is not written as a printed page, because it is not read as a book in a wheelchair by Net surfers.
The article How users read your Web pages shows on how a text must be presented and how we get very superior results in terms of interest and memorization.

Conclusion

The design of a site must be considered as much as in the interest and originality of the content. If it is designed for the pleasure of users, this will contribute to the success and popularity of the site.

References: User-Interface Design. Visual communication.