Skip to content
On this page

Principles of UI design

TODO ๐Ÿ› ๏ธ

This should be named UI design principles and cover other principles too besides hierarchy

There are some key principles of visual design, that we have to keep in mind while designing user interfaces. Different sources determine or name those principles little bit differently, but all of them teach us, how to organize and emphasize the content so that it is easier to consume.

๐Ÿ“บ Watch this introduction video from Google UX Design Certificate program: Understanding Visual Design Principles

Visual principles:

  1. Scale
  2. Visual hierarchy
  3. Balance
  4. Contrast
  5. Gestalt
    • similarity
    • continuation
    • closure
    • proximity

๐Ÿ“Œ Basecamp HQ: Visual Principles

Here is another article from Norman NIelsen Group's to cover the main visual principles โ€“ NN/g: 5 Principles of Visual Design in UX.

Similar from 17Seven: UI Design Principles

A little bit different approach from Maze โ€“ The 6 key principles of UI design

More about visual principles

Satori Graphic's video about visual hierarchy

Usability principles

Besides visual principles, there are so called usability principles. Most of them are more or less covered in our usability section, but let's remind them once again:

BaselineHQ: Usability Principles

Set of principles โ†” Design Systems

If we use a set of design principles repeatedly inside a project or different projects for the same client, we create something that is called a design system. (Well, if not a whole design system, then at least we are moving towards one.)

A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.
NNg: Design Systems 101

๐Ÿ“บ Intro to Design Systems and Sticker Sheets from Google UX Design Certificate

How to build a design system

๐Ÿ“บ Figma has a 5-series long mini-course of building one in Youtube.

List of known design systems