Skip to content

Design Patterns

Thomas Gohard edited this page Jun 20, 2013 · 3 revisions

français


Design patterns are a practical way to abstract usability findings so they can be generalized across projects. They allow us to avoid reinventing the wheel while ensuring that design principles are accounted for. Commonly documented design patterns include breadcrumbs, date pickers, search, global navigation and paging.

Design principles describe fundamental ideas about the practice of good visual design that are the basis of all intentional visual design strategies. The principles constitute the broader structural aspects of a design's composition. Awareness of the principles in design is the first step in creating successful visual compositions. These principles, which may overlap, are used in all visual design fields, including graphic design, industrial design, architecture and fine art.

Design is the organized arrangement of one or more elements and principles (e.g., line color or texture) for a purpose.

Government of Canada design patterns have been developed to ensure a consistent approach across all Government of Canada websites. By using the same design patterns we build consistency from one Government site to another. Consistency improves site usability by reducing the need for users to learn how to navigate and use each new site; they learn on one site and apply the same learning to the next site they use.

These patterns have been reviewed to ensure that they align with the Standard on Web Usability, the Standard on Web Accessibility, and the Federal Identity Program Technical Specifications. Each pattern links to ready-made code that can be found in the Web Experience Toolkit.

From the contact page of the Web Standards Office website, anyone can:

  • Request a design pattern
  • Submit a design pattern

Table of Contents

Design Patterns 101

See: Examples of UI Design Patterns: Breadcrumb patterns from 5 different sources

  • The above document shows 5 different examples of a specific UI design pattern (in this case, breadcrumbs) from different sources.
  • The key thing this demonstrates is the content of a UI design pattern, which includes 2 things:
  1. a problem: the description of the user issue or challenge
  2. a solution: the actual design and description of its usage, as well as design rationale/considerations
  • The solution is derived from generalized usability research and design principles.
  • Design patterns are not a replacement for following a user-centered design methodology, structuring a design around user tasks, or usability testing. But using them does allow for all sorts of known research and data to be leveraged and it's an excellent way to "pick the low hanging fruit".

Wireframe tools

'''Feel free to use the sample provided.'''


Design pattern libraries to use for research

Mobile design pattern libraries

Benefits of design patterns

  • They allow us to disperse, reuse and evolve best practices and design expertise
  • They teach people how to think about design problems and solutions from a user perspective
  • They support a design approach based on data and human behaviour and not on best guesses or personal opinion
  • They focus on solutions not rules

References

Heuristics for User Interface Design - Jakob Nielsen
Principles - Wikipedia

See also

 

Category:Communities Category:User_experience_community Category:Uxwg Category:Research Category:Usability fr:Bibliothèque des modèles

Clone this wiki locally