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

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