Web design principles

Draft

Introduction

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

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

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

Examples of guidelines for print and web.

"Principles of ornament"

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

• 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

From Digital Web Magazine - The Principles of Design

• Balance
• Rhythm
• Proportion
• Dominance
• Unity

Links for further reading

Principles

• 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

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

References

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