In design system, designers chronicle their own thought process when building a website and application. Who is the design system dedicated to? This article provides solutions to all questions and advice for UI designers regarding the effective creation of a design system.
What is design system?
A design system is a document where UI designers visualise and define design standards that arise from the full design process. This expedites and simplifies the implementation process. The design system enables you to design components that are more consistent and organised.
The procedure for establishing a design system
In certain instances, the design system’s sole purpose is to serve as a source of guidelines for the development team, which will then be able to adopt a consistent design for the digital product being built. However, it is also a benefit for the designers themselves, who can use the system design at any moment while working on major projects and quickly recall how the components appear and operate.
Color scheme and typeface
At the beginning of visual design, the colours and typography of a website or application are among the first aspects to be established.
Specify your colour palette
Depending on the number of colours you wish to include in the style guide, the colour palette section may comprise the primary and complementary hues. When specifying a primary colour palette, apply it to all components, including:
- Buttons (CTA – call to action)
- Links
- Page Headers
- Form elements (inputs, selects, checkboxes, radio, etc.).
In addition, it is essential to determine the colours of system elements that display warnings, errors, and information.
Choice of text colours
At the beginning of the design process, it is easy to get carried away with your imagination and select font colours that do not complement the entire design. It is worth defining colours for the following categories of texts:
- passages of texts
- links
- system messages
- headers
Limit the colour pallet to a maximum of three or four colours. This will not only make the design uniform and aesthetically pleasing, but it will also cut the cost of CSS code.
Typography
When creating typography, the typeface should be intelligible and pleasing to the eye across all devices. This demands a detailed knowledge of all devices and platforms on which your website or app will be used.
For the typeface to be readable, the font size should be between 12 and 14 points.
Consider the following when developing your typography:
- Specify the minimum font size for aesthetics and readability.
- Utilize only one font family, or use your knowledge to match fonts.
- Define the font sizes for page headings, subheading levels, and paragraphs. Differentiate these elements by font size, weight, and colour. Do not forget to specify line spacing to ensure the readability and aesthetics of the material.
Defining dimensions
It is essential to set size constraints for the spacing and layout of your website or application, regardless of whether you work alone or as part of a design team.
There are no predetermined and inflexible guidelines for setting the dimensions of interface elements. Nonetheless, it is important to define them early on in order to retain the project’s consistency.
Numerous platforms include developer guides with recommendations for interface element spacing, margins, and fills. For instance, see https://material.io/design/layout/spacing-methods.html#spacing.
Visual ergonomics
Every designer ought to have at least a fundamental understanding of usability and visual ergonomics. It’s a good practice to specify your UI elements in at least three sizes: small, medium, and large.
Depending on the visual significance, each of these sizes may be attributed to a distinct sort of button. For instance, because the “Buy Now” button is more essential (has greater visual weight), it must be larger than the “Reviews” button.
It is essential, while developing a touchscreen user interface, to specify the width and height of the elements so that the buttons are easy to use. The recommended minimum size for interactive elements is 40x40pt.
Summary
The design system is intended for programmers who implement the interface design using the document, as well as other UI designers that join the project’s development at a later date.
Creating a system design has no definitive conclusion. As the product evolves, so too does the paperwork.
Komentarze