English
English
Appearance
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:
- Scale
- Visual hierarchy
- Balance
- Contrast
- 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
- XDIdeas: Key Principles of Visual Hierarchy in UX Design
- Gestalt principles in UI design
- Principle of Closure in Visual Design
- Similarity Principle in Visual Design
- Proximity Principle in Visual Design
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.