Web design principles
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
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