The design system is a term which recently drives the hottest discussions in our industry.
Sometimes I think product designers write and talk about only this. Who of us wouldn’t want to have an opportunity to take the challenge of designing our own complex design system? Or develop one of them, or even work product-based on one of the most successful and respected systems like Airbnb Visual Language or Shopify’s Polaris, AGD by Atlassian, Mailchimp design system, or the one created for the US Government.
It is hardly surprising that this subject is so hot. Project decisions needed to create a design system require the most far-reaching look on the designed product, not only in the present state but mainly with a view to the future. So it requires the greatest design skills from a designer or design team and puts them in the unique situation of being creators of a whole work environment for design and development teams for months or even years.
The main words that all of this buzz revolves around are consistency, reusability, comprehensiveness, and flexibility – and having the right balance between them all.
Of course, that’s true as long as we talk among designers and front-end developers.
If we talk over a beer with creative minds from outside of this industry the frequent question appears: why do all modern apps look and work the same way? Nobody has a doubt that consistency here in the case of large-scale production is the keyword, but where are diversity and uniqueness, or in a word: creativity? Obviously it’s a provocative dumbing down but still… thought-provoking.
Read also: PPI: The final unknown parameter of a device’s screen quality
Design system is a common language
We have always imposed restrictions on ourselves. We love restrictions because we love to organize reality. Design systems have also always been with us. Almost all music from the western world is based on a kind of design system. Musicians impose very strict constraints. They can use only 12 halftones and their multiplications (octaves) instead of an infinity of frequencies. They have a set of strict rules on how to put these sounds together (harmony) and how to put it all on a timeline (rhythm). And they have had a very limited palette of sounds over the centuries (there have not been so many instruments).
Seemingly they had rather limited possibilities. And yet nobody can say that for most of western civilized history, the expression and creativity of musicians were limited by this system.
Forming a different kind of design system – although we rarely think about it that way – are programming languages. They are sets of components and rules so general, that they allow developers any kind of expression in a given environment.
The conclusion from the above is this – if a design system is sufficiently general, minimalistic and therefore flexible there is no way it can limit the creativity. It’s rather a kind of language in which product designers and developers “talk” to each other and with users. But it does not limit what they “talk” about. That is important – we still must have something to talk about.
There is no square
Working on one product in the long term, we start to think using its design system – regardless of whether the product is big, or small, where the system is rather a style guide or UI kit, or even a static one. We think about new functionalities through the existent set of components, guidelines, and principles. Even making the key decision of whether something should join the system or not – we also think with this single source of truth. This can lead to a form of burnout.
In Artegence during the recruitment process, I often ask the candidate to complete a recruitment task. It happens that even an experienced designer after a long time working on a single product can lose the real skills of controlling design elements which he or she doesn’t need to think about because of the design system. Many fundamental aspects can be tricky: harmonic color composition, spatial composition, creating typographic scale – not only font sizes, and size gradations, but also font weight, line height and making text styles work nicely – should complement each other in good proportion to look good in real layouts.
What should a designer do? Inspire. Remember, inspiring ourselves (or copying, if we are being honest) too much by existing systems (inspiring too close to our work) means that we participate in the lowering diversity and the loss of creativity. And this problem is the next big thing that the whole industry will discuss on Medium, meetups, and conferences at the moment just after the design system revolution dust settles.
Sometimes working in such an ordered environment can make you drop your creative guard, and weaken your ability to think out-of-the-box.
The classic nine-dot problem illustrates this issue. When you think about the problem’s solution, in fact, you more focus on the limits, many of which you create by yourself.
Nine dots are arranged as below, and you must connect all of them with four straight lines without lifting your pen and without drawing the same line more than once.
You can easily solve it when you realize that you are allowed to draw lines outside the square area … just because there is no square area that limits you. It’s only in your head. So simple.
Sometimes you have to bend the rules to get a surprising effect or provoke emotions.
Train different muscles too
Do high jump athletes train only jumping? Of course not. Gym, basketball, heavy lifting, jogging, yoga… there is a lot of kinds of training and all of them together help to have better performance in the main sport. Looking at athletes it seems obvious, but when designing interfaces we often forget one thing. To deliver better designs for internet banking or fin-tech applications we don’t need to create a new dashboard for Dribbble every day. And it’s better to have some constraints instead of full liberty.
It’s good to challenge yourself. Is it hard for you to figure out an interesting subject? You can find a good starting point on https://designchallenge.xyz/ with detailed briefs and a diverse range of design tasks.
We hear complaints here and there that all apps look similar and we live in a world where the main expression of a designer is one gray one-pixel stroke. Try something different to reset your brain cells.
Redesign any of well-known apps so as to:
- Be accessible for a 70-year-old man. How should the interface be? How does it affect the visual part, layout, all of the component details? What should branding, illustrations and iconography and motion look like? What changes are necessary for the flow?
- Be suitable for a child up to 5 years old. Is it a must to make it colorful, soft or inflated like a balloon?
- Be useable without one single written word. Impossible? Maybe not.
- Look like it was made in a particular style (for example for the Nokia 3310 or in the 80s… easy… or in The Beatles era). That one is fun. You probably remember Instagram for Win95.
Be honest – we do not ask ourselves often enough those kinds of questions focused on gaining knowledge, and training skills related directly to our regular work.
Do a lot of branding work
Branding systems are quite similar to interface design systems in many aspects. They must be consistent, comprehensive, minimalistic, flexible and also have a single job: to be the one and only source of truth about the brand. What is different? Branding design is all about style, uniqueness and visual creativity in addition to consistency so you can train your creative skills as well.
Try to invent a new type of interaction
Be brave enough to do things which are silly or strange just because you believe they have potential. Maybe they are completely not optimal, maybe they require more effort or engagement but they have the potential to be simply cool.
For example, swipe paying in a throwing-money-at-somebody style from the no longer existent Snapcash, or swiping blobs from Pocopay. Claps on Medium are also a great example – you have to work really hard with clicks or taps to appreciate the author. All of this in the world where every single click matters and is a subject of user tests and optimization. This original functionality is all about emotions and is something we can love.
It’s the hardest challenge to create something like this, but it’s worth trying. Try it in your next concept work for Dribbble instead of making the shadow under the chart on the dashboard nicer.
That kind of training – a creativity check and review – is part of the hygiene of every good designer. Inspire, but not too close to your daily work. Try something different.
Remember, even the best set of components, guidelines, and rules of use, even when developed in the best way and propagated perfectly throughout the team, will not guarantee good user experience. It won’t make users love our product. It’s not enough. And at the end of the day, this love is our ultimate goal in product design. The design system is only a platform to achieve it.
Read also: How to implement a UX research cycle in a time-framed project