A system has basic components such as typography, layout, shapes, colors. When you consider designing an entire product these components can be enriched with design patterns, content strategy, employee tone … These decisions can help you have a consistent product throughout the design process.
Since the advent of responsive design, this principle is becoming more and more true. The behavior of each component must be tested on different devices. It is necessary to verify its reaction, to allow it to be flexible and to deliver an optimal experience independent of the device used.
Components that do not change:
- Basic units
Components with fluid behavior:
- Wire rack
- Font Size
Priority to typography
When you work in a context with a lot of text, typography is the simplest way to give a visual feel to your content. Generally I choose 2 different fonts :
- Serif for content
- Sans Serif for titles
To give a rhythm you can also play with bold content in italics, with different sizes … The advantage is that if the
viewportexchange, your reading experience will remain consistent.
Typography and layout
One of the first thing is to choose a basic unit to start working. Number of columns and maximum size for your grid, font size and titles based on fibonachi suite, or something more arbitrary.
Sometimes it is wise to choose multiples of 10 to make mathematical calculations in CSS simpler. The typographer Tim Brown suggests trying the modular scale method .
Grid and layout
A fluid grid is a solid foundation for designing your layout system. But you have to get to the idea that your system must work through different resolutions. You must keep your pervasive grid component .
If your content contains a group of 3 blocks on one line, you must change it to 1 block on 3 lines to be displayed on mobile.
This may seem simplistic, but it is extremely important for the designer. It can highlight some blocks, choose to center text and icons in a certain context, align left in another … The important thing is to have the most common elements to keep a uniform user experience.
Designing components is a concept already used in the old world of “page-based coding”.
Since the CSS property
border-radiusis supported by the main browsers, many designers are based on circles. Button components with a rounded edge or not are elements that stand out very quickly.
Used properly together, you get a unique, reusable and consistent atmosphere. The trick is to think globally by analyzing all the components that make up a page:
- Featured content
- Main Menu
- Secondary navigation
I use SASS to facilitate the construction of components.
Color is the most basic way to enhance its image in the multi-screen world. Using a good color system makes it easily recognizable, and works on any device.
Using a design system is not necessarily associated with a particular method, but the following tips can help you.
Breaking the paradigm
A design system allows to concentrate by separating the different components. Working independently of the layout allows to build its elements simply, without going into hell
breakpoint. This forces us to use reusable elements, which in the end leads us to produce less code.
Design in the browser
Personally I can not start new project by designing in the browser. (And I’m admiring if you get there, usually I start with a paper and a pencil) Static models are not the only alternative. The style guides are perfect for expressing the concepts of your design system. The design boss libraries also work very well.
The Limit of Prototypes
At some point, to test your ideas, or because a customer needs help to visualize how your system works, you will have to stop building your components to set up your different pages. This is a good opportunity to do a “stress test” and confront them with real data. This is not the end of the world but you need to make sure that your components are working on all devices , not just the iBidules, or even the currently fashionable mobiles.
You will choose them
breakpointaccording to your content (hierarchy, display density, type of interaction) to have an ideal display. With real data and feedback from your customers, you’ll be able to easily make changes because by changing some of your components, the change will be reflected throughout your application.
Prepared for the future
Creating design systems gives us the flexibility to be compatible with unknown devices of the future. This may be a process change, but it is not very complicated to adopt an object-thought mode. The pioneers in adaptive design have a tough job. Some of these problems may have already been solved in other technologies or industries, but it is up to us to find these links to help us create solutions and standards that will provide the best possible users.
We must continue to experiment and communicate, especially in the field of design, experiences of successful users are a real sign to know if our system works.