- Get link
- X
- Other Apps
- Get link
- X
- Other Apps
In essence, Component Based Design is the practice of splitting UI into smaller, more manageable parts with clear names. Each of these parts fall in one of six distinct groups.
1. Identity: The first of these six group is Identity. Herein we define the project’s core brand elements. Typefaces, typography, primary and secondary colours are all meticulously specified. Afterwards these are used throughout the project.
2. Elements: The second group defines the project’s smallest reusable parts: elements. A few well-known examples of elements are things like: buttons, links, inputs, drop-downs etc. Each of them is defined, along with all their states; such as hover, focus and disabled buttons. Our mantra is: Define once, reuse throughout the project.
3. Components: Working our way up in scale, the third group is Components. When working on designing apps and web-designs, most blocks on the screen are Components. A Component can be anything that uses at least a few Elements. Things like cards, heros and navigation menus are traditional examples of Components. However, they do not necessarily have to look modular.
4. Compositions: Going up in scale once again, the fourth group is Compositions. A Composition is a part that has multiple Components inside it. They define how to Components inside it should behave.
5. Layout: The fifth group, Layout, is a more abstract collection of design principles. Herein the amounts of whitespace, grids and wrappers are defined. By defining them like this, it is easy for other designers to come into a project and use the existing styles and guidelines.
6. Pages: The last group are the actual Pages (or screens) of the project. Each Page consists of an arrangement of Compositions and Components, all the weird exceptions are defined at Page-level. Let’s say the contact Page should have a blue background, because our friends in the marketing department say so… We add that only at Page-level.
1. Identity: The first of these six group is Identity. Herein we define the project’s core brand elements. Typefaces, typography, primary and secondary colours are all meticulously specified. Afterwards these are used throughout the project.
2. Elements: The second group defines the project’s smallest reusable parts: elements. A few well-known examples of elements are things like: buttons, links, inputs, drop-downs etc. Each of them is defined, along with all their states; such as hover, focus and disabled buttons. Our mantra is: Define once, reuse throughout the project.
3. Components: Working our way up in scale, the third group is Components. When working on designing apps and web-designs, most blocks on the screen are Components. A Component can be anything that uses at least a few Elements. Things like cards, heros and navigation menus are traditional examples of Components. However, they do not necessarily have to look modular.
4. Compositions: Going up in scale once again, the fourth group is Compositions. A Composition is a part that has multiple Components inside it. They define how to Components inside it should behave.
5. Layout: The fifth group, Layout, is a more abstract collection of design principles. Herein the amounts of whitespace, grids and wrappers are defined. By defining them like this, it is easy for other designers to come into a project and use the existing styles and guidelines.
6. Pages: The last group are the actual Pages (or screens) of the project. Each Page consists of an arrangement of Compositions and Components, all the weird exceptions are defined at Page-level. Let’s say the contact Page should have a blue background, because our friends in the marketing department say so… We add that only at Page-level.
Comments