Web design principles

This article or section is a stub. It does not yet contain enough information to be considered a real article. In other words, it is a short or insufficient piece of information and requires additions.

Draft

## Contents

* 1 Introduction
* 2 Definition
* 3 Principles for user-centered web design
* 4 Graphic design principles
* 4.1 "Principles of ornament"
* 4.2 CRAP principles for graphic design
* 4.3 Principles of visual design
* 4.4 Links for further reading
* 4.4.1 Principles
* 4.4.2 Mistakes to avoid
* 5 References

## Introduction[edit | edit source]

Web design principles are general rules for the design of web-based media that include basic guidelines for the design of layouts and interaction design.

## Definition[edit | edit source]

Design principles are derived from fields as varied as Human-computer interaction,  usability and user experience design, Graphic design and Typography,  Colour theory, and Design processes and models. They can stand alone as general rules or be the basis for the development of  design methodologies

## Principles for user-centered web design[edit | edit source]

From selected further readings below

* Visibility of system status - system should allow users to know where they are within a site or within an interaction or process,
* Match between system and the real world - system should use language, terms and workflows derived from users' activity in the real world.
* User control and freedom - allow users to abort or restart interactions.
* Error prevention and handling - when errors do occur help users recognize, diagnose, and recover from errors
* Recognition rather than recall
* Flexibility and efficiency of use - the system adapts to the user's capabilities (novice and experts) which may change over time.
* Aesthetic and minimalist design - use design meaningfully, to present users with needed information and not to distract or confuse with superfluous visual information.
* Provide help and documentation
* Usefulness, effectiveness, efficiency - allows users to reach their objective within the shortest amount of time
* Easy to learn and use, recognition rather than recall - users can easily learn to use the system without relying solely of memorization of routines to achieve desired objectives
* Consistency and standards - system uses expected and accepted standards and conventions

## Graphic design principles[edit | edit source]

Examples of guidelines for print and web.

### "Principles of ornament"[edit | edit source]

Principles to improve page layout and design can be found, from as far back as 1905. G. Woolliscroft Rhead outlined 9 guidelines named the Principles of ornament (in Wolper, 2011) to be followed to assure successful graphic design:

* Symmetry and balance
* Proportion and spacing
* Subordination (hierarchical representation of information)
* Repose
* Congruity
* Radiation
* Contrast
* Repetition
* Unity

We find these elements of these guidelines echoed in more up-to-date principles.

### CRAP principles for graphic design[edit | edit source]

* Contrast \- Avoid elements on the page that are merely similar. If the elements are not the same then make them very different
* Repetition \- Repeat visual elements throughout the piece. This develops the organization and strengthens the unity.
* Alignment \- Every element should have some visual connection with another element on your page.
* Proximity \- Items relating to each other should be grouped close together.

### Principles of visual design[edit | edit source]

From Digital Web Magazine - The Principles of Design

* Balance
* Rhythm
* Proportion
* Dominance
* Unity

### Links for further reading[edit | edit source]

#### Principles[edit | edit source]

* Graphic design principles
* Digital Web Magazine - The Principles of Design
* 10 Principles Of Effective Web Design - Smashing UX Design Smashing UX Design
* 9 Essential Principles for Good Web Design
* Principles for Usable Design
* First Principles of Interaction Design (Revised & Expanded)
* 10 Usability Heuristics for User Interface Design

#### Mistakes to avoid[edit | edit source]

* Top 10 Mistakes in Web Design (Jakob Nielsen's Alertbox)
* Bad Design

## References[edit | edit source]

This article or section is currently under construction

In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")

* Wolper, V. E. (2011). Artistic Web Design Using Adobe Dreamweaver & Photoshop: An Introduction. Jones & Bartlett Learning. Retrieved from http://books.google.ch/books?id=Ll8MfEd8zk4C