This may sound rather unusual to some people. But that is only because many of us rarely think about the processes of perception and processing that are constantly going on inside of us. Very few people think about what happens in our brains when we meet a new person, read something, or use a website.

The Constructed Reality

First, we should be aware that not all of the information that our senses receive is processed. It is estimated that we receive about 11 million bits of information per second through our senses, but we can only process about 40 bits of information per second*¹. So a lot of information is initially “filtered out”. Our brain makes this selection very quickly, without our awareness – this is called «preattentive processing».

The remaining pieces of information that are selected for further processing are also not “consciously” available to us. They are first heavily adapted before they are transported into our consciousness, enriched with prior knowledge and hypothetical assumptions.

What we think we perceive objectively is the product of highly complex processing operations of our brain.

Similar to how an application like ChatGPT presents us with a pretty simple user interface while highly complex processes are running in the background, human consciousness provides us with a «user-centered» reality that represents only a tiny fraction of the information that surrounds us and is only a small reflection of what our brain actually processes and stores.

In addition, our cognitive processing has some peculiarities due to the way our brains are structured. This is partly because our brains have to be extremely flexible, because apparently no one knew exactly what skills humans would eventually need. Our ability to read is a good example of this – it is a very recent invention in evolutionary history. However, our brain is so flexible that it can not only learn to read, but also to do other, completely unfamiliar things. It can even restructure itself to perform repetitive tasks faster, more efficiently, and most importantly, more intuitively. This amazing ability is called «Neuroplasticity».

For example, in the case of blind people, areas of the brain that are actually responsible for processing visual stimuli are freed up and used for other abilities. Thus, blind people have a more sensitive sense of touch and hearing than seeing people. They can also process spoken language much more quickly. Anyone who has seen a blind person use a screen reader knows what I am talking about.

Selective perception and cognitive biases

Due to our limited processing capacity in the face of information overload, our brains are forced to perform many processes as simply and efficiently as possible. It prefers familiar solutions, simplifies complex structures and facts, and likes to take shortcuts when solving problems*². This leads, however, to difficulties in certain situations. In many cases, so-called biases occur, i.e. deviations between the objectively expected result and the result of our subjective processing.

Some of these biases are so pervasive that our normative expectations have adapted to these misinterpretations. There are hundreds of examples of this in perceptual and cognitive science that have been demonstrated in numerous studies.

I would like to give just two examples here. For those who are interested in this topic, I have an interesting link at the end of this post.

1. Optical Center

The «Optical Center effect» describes a bias in the way we judge objects. When asked to determine the exact vertical center of an object, almost all of us tend to define it about two to three percent higher than it actually is geometrically or mathematically. We have become so accustomed to this bias that positioning slightly above the geometric center seems more harmonious and natural to us than the exact geometric center, and we prefer it.

Sometimes unconsciously, but also consciously, we use the optical center in design or interior decoration. For example, pictures in a frame or text on a book page are usually vertically positioned higher than their geometric center. The center lines of our letters are all at the optical center. If they were in the geometric center, they would feel “out of place” – in other words, they would appear disharmonic to us.

The causes of this bias are not fully explored scientifically. It is probably a combination of our brain’s drive for efficiency and early childhood conditioning.

Striving for Efficiency

As mentioned above, our brain’s striving for efficiency is mainly based on the limitation of our cognitive abilities. For this reason, the optimal solution to many problems is too time-consuming and resource-intensive. To solve these problems, our cognition falls back on simplifying decision strategies (so-called heuristics) or already existing solutions and results in order to arrive as quickly as possible at a good, but not necessarily exact or optimal solution. This is also the case when judging the center of an object.

Conditioning

Conditioning is based on the fact that, from an early age, our brains have a lot to do with interpreting meta-information conveyed to us through facial expressions. In our interpersonal communication, it is extremely important to recognize the mood of the person with whom we are interacting on an ad hoc basis. Facial expressions occur almost exclusively in the lower part of the face – that is, we focus on the mouth, nose, and eyes – while the upper part of the head (forehead, hair) is perceived only peripherally. It is filtered out and tends to receive less attention. This leads to an overemphasis and overvaluation of the lower half of the face.

We tend to undervalue the upper part of the head, especially the hair, because facial expressions mainly occur in the lower half of the head.

The overemphasis or exaggeration of the lower part of the face is so ubiquitous that when you ask people (who are not professional illustrators, artists or photographers) to draw a face, they usually place the eyes much too high*³. Anatomically correct, the eyes are almost exactly in the middle of the head.

The illustration shows a drawing by an adult who was asked to draw himself. More than 95% of people who have not received any drawing training position the eyes much too high on the head.

As already mentioned, interpreting faces is so important to us that the principle of exaggerating the lower half of the face is also transferred to other areas on a quasi-universal basis. The technical term for this is «Selective Availability». It describes the fact that our brain makes certain results, concepts and approaches that we have frequently and successfully applied more readily available. As an implication, these patterns or information are applied more oftenin our cognitive processes than we sometimes like – even in tasks or problem solving that have absolutely nothing to do with the original task. This is also the direction of our second example:

2. Anchoring effect

The «Anchoring effect» describes the tendency of people to be strongly influenced in their judgments or decisions by the context or by a piece of information that is immediately available – the so-called anchor – even if this anchor has nothing to do with the actual question.

In a study by Tversky and Kahneman*⁴, subjects were asked to spin a wheel of fortune. The wheel gave them a number between 0 and 100. The subjects were then asked to estimate what percentage of the members of the United Nations were African countries. The results were astonishing because the anchors obtained from spinning the wheel significantly influenced the estimates. The average of all estimates was 45%. However, the mean of the estimates of people who had previously spun a number of 10 or less on the wheel of chance was only 25%.

In the famous «Anchoring Experiment», Tversky and Kahneman showed how subjects are unconsciously influenced by a seemingly random number when they have to answer an estimation question.

How does this bias arise?

The so-called anchoring task (spinning the wheel of chance and getting a random number) activates memory content that matches the anchor number and makes it available in easily retrievable areas of our memory for subsequent tasks. The information in these areas is then used preferentially, even in tasks that have nothing to do with the original task.

Practical Significance

What we experience and believe we know is a product of our cognition and, unfortunately, of deliberately employed deception.

The mere fact that we are informed more frequently or more emotionally about certain issues or claims through the ubiquitous media means that we weight and evaluate them differently than issues about which we are rarely informed. This can lead us to grossly overestimate certain risks simply because the media reports on them more frequently.

For example, the vast majority of people rate the risk of being attacked by a shark as significantly higher than the risk of being killed by a falling coconut*⁵. However, the probability is exactly the opposite. But we tend to be more aware of shark accidents, and shark attacks are probably more frequently reported in the media than beachgoers killed by falling coconuts.

Anchors can also play a critical role in negotiation situations. For example, the subjective perception of loss or gain depends heavily on the initial offer, which can significantly influence the negotiation process. Sellers and online shops like to offer products at a high price and then reduce the price significantly, giving the impression that the price is now extremely low.

Even experts are not completely immune to the anchoring effect. Studies*⁶ show that judges, experts and juries have been massively manipulated by it in the past. In this context, there are other methods that are sometimes consciously or unconsciously used to influence us in one direction or another, such as

• Serial Position Effect
• Default Effect
• Halo Effect

These principles do not necessarily have to be used to our disadvantage. When applied correctly, they can even make a decisive contribution to high usability and exceptional User Experience.

A UX/UI designer who knows that our short-term memory is limited or that they can overwhelm a user if they provide them with too many options (see Hick’s Law) can significantly improve usability, if not the entire user experience, through the application of cognitive principles. It is therefore very important to know the cognitive principles necessary for this.

That’s why I’ve spent the last few months putting together the most comprehensive overview possible of the cognitive principles that play a major role in a good user experience, and I’m pleased to present it here:

cognitive-ux.com

The website currently includes the 72 most important cognitive principles that can play a role in a User Experience. There is a search function, a filter option and the possibility to create a favorites list. Every week, I will introduce a law or principle in more detail on my LinkedIn page, accompanied by concrete examples of how it can be applied.

References:

*1: Tor Nørretranders (1998): The User Illusion: Cutting Consciousness Down to Size. The ratio of 10 million to 40 bit/s was determined by Tor Nørretranders Because the methods of data collection (e.g. the summing up of the modalities of perception and the conversion into “bit/s”) are subject to numerous assumptions, the values are to be considered as guidelines. However, studies show that conscious perception encompasses only a fraction of the stimuli received by the brain.

*2: Herbert A. Simon (1956): Rational choice and the structure of the environment. In: Psychological Review, pp. 129–138; doi:10.1037/h0042769. Herbert A. Simon explains that people are limited in their cognitive performance by various factors when processing information. These factors include insufficient information, limited time, limited attention and limited cognitive resources. People therefore do not always choose the most optimal solution, but rather the first acceptable solution in view of these limited resources.

*3: Betty Edwards (1979): Drawing on the Right Side of the Brain. Los Angeles: J. P. Tarcher.
This standard work on drawing explains how beginners distort certain facial proportions when drawing a portrait. Among other things, Edwards cites the frequent placement of the eyes too far up as a typical pattern that results from our mental conception of a face.

*4: Tversky, A. & Kahneman, D. (1974): Judgment under Uncertainty: Heuristics and Biases. Science, 185(4157), 1124–1131, https://www.science.org/doi/10.1126/science.185.4157.1124

*5: The fact that we overestimate the risk of a shark attack is due to the so-called Availability Heuristic. Drastic and media-effective dangers (such as shark attacks) imprint themselves better on our memory than more everyday dangers.

*6: Englich, B., Mussweiler, T., & Strack, F. (2006): Playing Dice With Criminal Sentences: The Influence of Irrelevant Anchors on Experts. Personality and Social Psychology Bulletin, 32(2), 188–200, https://doi.org/10.1177/0146167205282152

Further information:

Alessandra Rodrigues Eismann (2023): Cognitive Bias in UX Research, https://www.centigrade.de/de/blog/cognitive-bias-im-ux-research-ein-survival-guide/

Charlotte Ruhl, Harvard University (2023): Cognitive Bias: How We Are Wired to Misjudge, https://www.simplypsychology.org/cognitive-bias.html

It consists of a series of horizontal and/or vertical lines that divide the page into sections and help designers place elements such as text, images and graphics in a way that improves clarity and aesthetic appeal. The number and width of columns and spaces often follow fixed structural guidelines or a design system. Aspects of perceptual psychology in particular play a decisive role here.

The consideration of factors such as the visual perception process*¹, Miller’s number*² and relevant design laws*³ – such as the law of proximity or the law of the common region – supports the perception process and forms the basis for easy accessibility.

A perceptual-psychological approach to grid design is very important, as a grid represents the invisible basic structure of the design and – even if it is later no longer visible to the user – is responsible for the compositional harmony and consistency of the entire design.

In addition, a consistently applied grid system can be a distinctive design element in itself, making the overall design recognisable, unique and aesthetically pleasing.

Grid vs. Layout Grid

A «Grid System» basically consists of a «Grid» and a «Layout Grid». The «Grid» consists of a certain number of units of equal size and forms the underlying grid system (marked red in the following illustration). The combination of these smallest cells creates a superordinate «Layout Grid» (marked in blue), to which the page elements in the design are aligned.

Typically, there is only one cross-page «grid» for a design, but there may be different «layout grids» for different page types, such as one for the home page, one for the overview pages, and another for the detail pages.

Origin

Grids have their origins in 15th century book printing and were later integrated into the design process by designers such as Jan Tschichold, Josef Müller-Brockmann and the Swiss School*⁴.

What types of grids are there?

In addition to horizontally and vertically structured grids, there are also so-called «Modular Grids», which divide an area into units both horizontally and vertically. These grid systems are particularly versatile and are suitable for more complex layouts.

In the western world, where people write horizontally, grids that divide a surface into vertical sections are of little use in responsive web design because the height of the text columns cannot be predicted due to the responsive nature of the design.

Vertical dimensions can only be reliably planned for in web design if sufficient free space or buffer zones are taken into account. This makes a consistent vertical structure in a responsive context much more difficult and often impractical in practice.

Responsive Grid Systems

In the print sector, grid systems have long formed the basis of most designs. However, grids also play an important role in the design of interactive user interfaces.

While compositional aspects and readability requirements are the main focus in the print sector, the need to develop «responsive grids» is a central challenge in web design. Responsiveness in this context means that the design adapts optimally to the size of the output medium.

Responsive grids must therefore not only have fixed dimensions, but must at least partially use flexible units. There are two basic ways of doing this:

1. Make adjustments to the grid dimensions via so-called «Media Queries»*⁵ (adaptive approach)
2. Use percentage values for the grid dimensions (fluid approach)

Adaptive vs. fluid approach

Below are two different grids that I created with the «Ultimate Grid Generator». At the top, an adaptive grid system that is controlled by a series of media queries such as @media (max-width: 768px) { … }; and below, a completely fluid grid that works without media queries, using only percentage calculations for responsive adjustments. Try resizing both of them with the handlebars (bottom right) and see what happens.

Adaptive Grid

Adaptive adjustment via several media queries:

@media (max-width: 768px) { margin: 0 30px }

@media (max-width: 640px) { gap: 15px }
@media (max-width: 480px) { margin: 0 20px; gap: 12px }

Fluid Grid

Fluid adjustment of the grid with the relative CSS unit vw:
margin: 0 max(15px, 4vw) und gap: min(30px, 4vw);

Benefits of Grid Systems

Structure meets aesthetics: grids create a clear structure and a uniform appearance.

Efficient work: Using a grid system supports and simplifies the design process of visual applications and systems, such as websites or print media.

Accessibility: Studies*⁶ show that designs with a structured layout can improve comprehensibility for the user by up to 50%, making grid systems an effective factor for effective communication.

Challenges in Grid Design

Many designers find the creation and planning of responsive grids extremely tedious. In particular, calculating the necessary parameters is not so trivial, as all grid parameters are interrelated. See the following equations.

There are three options for the even distribution of columns in CSS:

1. ‘space-between’ distributes the free space between the columns so that the first and last column are aligned directly to the edges of the grid.
2. With ‘space-around’ 50% of the free space is added to the right and left of each column.
3. With ‘space-evenly’ the free space is evenly distributed both between the columns and outside the columns.

Design Basics

Many designers are also not familiar in detail with the design principles that later increase efficiency when placing elements and have a positive effect on the layout. It is therefore very important to understand the basics, i.e. the design laws themselves, in order to be able to work “creatively” with a grid system and not just follow best practice examples without reflection. For example, many designers unthinkingly create grid systems with 12 columns. Very few know the reasons for this, they simply follow certain standards without knowing when it can make sense to deviate from them.

The reason for using a 12-column grid is that the number 12 is a so-called «Highly composite number»*⁷, i.e. a number that can be divided by more integers than any other smaller number. Apart from the fact that every number is divisible by 1 and itself, the 12 can be divided by 2, 3, 4, 6, whereas a 10 can only be divided by a 5. So a 12-column grid allows four times more flexibility in dividing the layout grid into different column combinations than a 10-column grid.

Recommendations for Grid Newbies

I therefore recommend that grid newbies familiarize themselves with the basics of grid systems by reading the following articles:

History & Overview

• https://uxplanet.org/grids-in-graphic-design-a-quick-history-and-5-top-tips-29c8c0650d18

Guides

• https://supercharge.design/blog/grids-and-layouts-in-ui-design-a-guide

• https://www.nngroup.com/articles/using-grids-in-interface-designs/

• https://medium.com/peopleofpapara/the-importance-of-grid-systems-in-ui-ux-design-enhancing-user-experience-ff7d0a90b08e
• https://www.ramotion.com/blog/website-grid-design/

Design Basics / Gestalt-Principles

• https://www.chrbutler.com/gestalt-principles-of-design-proximity
• https://www.damteq.co.uk/articles/what-are-gestalt-principles-and-how-do-they-influence-ux/
• https://99designs.de/blog/design-tipps/gestaltprinzipien/ (German language)

• https://www.nngroup.com/articles/how-people-read-online/

Technical Aspects (CSS)


• https://clickable.agency/responsive-vs-adaptive-vs-fluid-key-differences-for-great-web-design/
• https://css-tricks.com/snippets/css/complete-guide-grid/

If you understand the design basics of a grid, it will be easy for you to design grid systems that are both accessible and flexible. This will provide you with an essential foundation for a coherent user experience.

Ultimate Grid Generator

For designers who find it particularly difficult to calculate and evaluate grid dimensions, I have other help on offer: I have developed a small, but very helpful application, the «Ultimate Grid Generator», which helps you to create a grid system and evaluate it responsively in real-time. Just give it a try: Ultimate Grid Generator

The application is free of charge and the grid systems created can be easily exported as SVG, PNG or HTML for use in other applications such as figma. I am convinced that this tool will make it easy for you to design a responsive grid.

References

*1: https://www.nngroup.com/articles/how-people-read-online/

*2: https://www.userbrain.com/blog/millers-law-important-rule-ux-design-everyone-breaks

*3: https://www.damteq.co.uk/articles/what-are-gestalt-principles-and-how-do-they-influence-ux/

*4: The Swiss School

• The Swiss Style
• History of Swiss Design

• The Swiss Grid

*5: Media Queries are a CSS technology that makes it possible to adapt specific parameters of a website based on the characteristics of the user’s device or display window. This allows a design to be optimally adapted to different screen sizes.

*6: Studies on the effectiveness of grid systems

• Sweller, J. (1988). Cognitive Load During Problem Solving: Effects on Learning, Cognitive Science, 12(2), 257-285; https://onlinelibrary.wiley.com/doi/epdf/10.1207/s15516709cog1202_4
• Meinald T. Thielsch, Gerrit Hirschfeld: Facets of Website Content. Human-Computer Interaction, Published online: 15 Mar 2018; https://doi.org/10.1080/07370024.2017.1421954
• Oliver Emch, Ästhetische Qualitäten für das Design von Web-Interfaces; www.zora.uzh.ch/id/eprint/164488/1/20152553.pdf

*7: https://en.wikipedia.org/wiki/Highly_composite_number

In my research, I have also repeatedly tried to collect best practice examples of accessibility. I was struck by how few good examples there are. Even the solutions from organizations that deal with accessibility are often not really convincing. Why is that?

One reason for this is certainly that most «Digital Designers» have not received adequate training in this area and have only rarely been made aware of this topic. In professional life, it is concrete client requests that lead designers to engage with this subject – very rarely do designers choose to dedicate themselves intensively to this topic on their own initiative. If they do, it is usually because they themselves have a disability or because there are people with disabilities in their environment, such as in their family or social circle. This results in 90 percent of my designer colleagues around me having only insufficient knowledge of accessibility. Most clients or digital agencies therefore have to turn to particularly specialized accessibility experts.

But isn’t this a shame for our profession? Shouldn’t every UX designer have a solid understanding of accessibility?

We follow formal guidelines rather than asking people with disabilities

Yes, the majority of design-relevant WCAG guidelines are indeed known to my colleagues and are also applied. But is that enough? They believe that by using a contrast checker, employing sufficiently large fonts, and designing functional labels in such a way that they are recognizable regardless of their color, they have done enough from a design perspective to adequately consider accessibility.

For me, the WCAG guidelines represent the minimum level of required measures. They were primarily developed with the aim of providing measurable and assessable quality criteria, not to offer «best practice recommendations» – which is a significant difference. I argue that a website that meets the WCAG AA conformance level is by no means a good website from the perspective of people with disabilities. Conversations with affected individuals have shown me this and explain why I find it so difficult to create a collection of best practices.

When the accessibility guidelines themselves become a barrier

It also explains why the WCAG guidelines are so difficult to understand, because they are written from a legal perspective, which makes them extremely difficult to apply. I can think of hardly any set of regulations that has as many help and explanation websites as the WCAG guidelines.

Instead of just asking each other what the minimum legal requirements are, we should ask ourselves what will help our users the most. As an accessibility-illiterate designer, I need more information than what is required by law. The «Denque Web Accessibility Checklist», for example, is helpful because it contains valuable best practice recommendations in addition to the WCAG guidelines – great!



Let’s imagine that when we design a website, we focus only on the legal requirements we have to comply with. Who would believe that this would result in good user-centred design?

Beyond accessibility, every designer knows that conducting user interviews, focus group workshops and user testing is necessary to develop a truly effective solution.

So I ask, how many of the sites that have achieved WCAG AA compliance have actually been tested with people with disabilities? How often have people with disabilities been consulted or invited to be part of the evaluation of the solutions during the conception phase? From my personal experience here in Switzerland, I would say that not even 5% of web solutions at WCAG AA compliance level have been approached in this way. Typically, they only rely on professional literature or experts who speak on behalf of people with disabilities. Is this really a user-centred approach in terms of equality?

Taking a holistic user perspective


It would not only be fair, but also much more beneficial to consider all users in the design and not just the most frequent or average users, as is often done in UX research and testing.

Imagining how someone is blind, or even better, how someone who is blind uses a smartphone, can be an insurmountable challenge for people who can see. People without disabilities often cannot imagine the challenges that people with disabilities face on a daily basis and which aids are really useful and which are superfluous.

I often find that our clients want a ReadSpeaker or text-to-speech function on their website. This is because most accessible web solutions are planned or designed by people WITHOUT disabilities, WITHOUT consulting those concerned, otherwise they would know that visually impaired people no longer need this function (https://www.netz-barrierefrei.de)

It is therefore important that the designers and stakeholders involved in an accessibility project really «understand» what it means to be motor impaired, blind or deaf, and which aids are really useful and which are not. Otherwise, they cannot develop user-centered solutions that offer real added value for people with disabilities.

In order to gain this empathetic understanding, contact and discussions with those affected, i.e. the actual core target groups of accessibility measures, are essential. Only in this way can the needs of users with disabilities be fully taken into account.

More Show Than Substance

I frequently encounter clients who come to us wanting to make an existing website «accessible» ???

This alone indicates that something went wrong in the preceding conception phase. It also shows that formal compliance with accessibility guidelines (for example, through certification) is valued more highly than actually aligning with the needs of people with disabilities. Those who have spoken with the affected individuals know how far this type of accessibility misses the mark.

Ask yourselves: What percentage of your personas in the last UX project were people with disabilities? Or what percentage of your test participants in the last usability test? According to the Federal Statistical Office, in Switzerland, 22 percent of the population is disabled in the sense of the Equality Act, meaning they have a disability that significantly impairs their participation in social life. Have you proportionally considered this percentage in your surveys and tests?

Inclusion in the conception process instead of subsequent accessibility checks

Why not prioritize accessibility in the next project planning, starting with the first meeting with the client? Often, accessibility considerations are only addressed towards the end of the conception phase, when many design parameters have already been set. Do you believe this adequately accounts for the interests of people with disabilities?

I would also appreciate it if particularly well-designed accessible websites were recognized with an award – and preferably by people with disabilities. This would definitely help me in my search for best practice examples and make it easier for many others to follow good examples.

And let me ask the group? Why is there no «Accessibility» category in the «Best of Swiss Web Award»? Huh?

Attitudes towards people with disabilities have changed considerably over the course of human history and in different cultures. In many societies of the past, people with disabilities were stigmatised and marginalised. In antiquity and the Middle Ages, disability was often seen as a punishment from God or a sign of possession.

With the Enlightenment and growing social awareness of human rights, society began to take a closer look at the problems of people with disabilities. The first charities and institutions for people with disabilities began to emerge, although often with the aim of segregation rather than integration.

After the devastating effects of the world wars, public awareness of the situation of people with disabilities increased. In parallel with the civil rights and women’s rights movements of the 1960s in the US and Europe, disability rights movements also emerged, campaigning for equal rights for people with disabilities and the removal of barriers. These movements laid the foundations for modern equality legislation and inclusion policies.

Major milestones on the road to equality for people with disabilities:

• 1973: Passage of the Rehabilitation Act in the US, prohibiting discrimination on the basis of disability in federal programmes.
• 1990: Introduction of the Americans with Disabilities Act (ADA) in the US, a comprehensive anti-discrimination law.
• 2006: The United Nations adopts the UN Convention on the Rights of Persons with Disabilities (UN CRPD), which comes into force in 2008 and strengthens the rights of people with disabilities worldwide.

Gradually, many countries have adopted laws and policies that protect and promote the rights of people with disabilities. The UN Convention on the Rights of Persons with Disabilities has been legally ratified by more than 180 countries. However, there is still social stigma and a lack of awareness of the needs of people with disabilities in many areas.

Participation in digital life

With the advent of digital transformation, the scope of gender equality efforts has broadened considerably. Digitalisation affects almost every aspect of our daily lives – from the way we communicate and share information, to education, work and social interaction. For people with disabilities, this opens up new opportunities for participation, but also creates new barriers.

The transition to digital equality requires a rethink of our society. It is about using technological innovation to break down barriers. Technologies such as visual aids, screen readers, voice control or personalised user interfaces can play a crucial role. This shift offers the opportunity to take equality for people with disabilities to a new level. Companies that actively embrace this change can benefit from an expanded customer base and a positive public perception.

History shows that progress in equality for people with disabilities has only been achieved through legislation. Most companies are not proactive in the area of accessibility, for many reasons that I won’t go into now, but it shows us how crucial political decisions and legal regulations are for progress in accessibility.

Digital accessibility, which aims to enable people with disabilities to participate fully in society, is defined internationally by the W3C’s WCAG guidelines. The first version of these guidelines was published in 1999 and has since become the basis for many national digital accessibility laws.

EU standards and guidelines are also based on the WCAG specifications. These are transposed into national law by the member states independently. Germany, for example, implements the EU directives through the Disability Equality Act (BGG) and the Barrier-free Information Technology Ordinance (BITV 2.0). In Switzerland, accessibility is regulated by the Disability Equality Act (BehiG) and the associated Disability Equality Ordinance (BehiV).

However, the WCAG and the legislation derived from it have been criticised for not taking sufficient account of cognitive disabilities. There are certainly historical reasons for this gap. It stems primarily from a working world in which work was still predominantly physical, which has already led to some improvements for people with physical disabilities. For people with cognitive disabilities, however, there is still a great need for support.

Situation in Switzerland in 2024

After a thorough review in March 2002, the «UN Committee on the Rights of Persons with Disabilities» came to a sobering conclusion: Switzerland violates the rights of persons with disabilities in many areas, and the inclusion required by the Convention is still not sufficiently practised at all levels of government and society. There is still a great need for action in Switzerland with regard to all the equality directives listed.

For example, most adults with cognitive impairment in Switzerland are not free to choose where and how they live. Children with cognitive impairments often attend special schools. And information about elections and voting is often too complicated for many people with cognitive impairments. (Source: https://insieme.ch/thema/inklusion/uno-brk/)

In addition, most guidelines in Switzerland are not binding, but only recommendations. As a result, implementation is slow and hesitant.

Groups of people who benefit from accessible services

About 35% of the Swiss population depend on accessible services in many areas. The rest of the population also generally benefits from improved accessibility and usability.

Accessibility offers only advantages, not disadvantages

The number of people who benefit from accessibility is much higher than most people would expect. In Switzerland, around 22% of the population is considered disabled under the Equality Act, but in reality many more people benefit from accessibility.

Accessibility affects not only people with disabilities, but also older people, migrants with insufficient language skills or functional illiterates. Including these groups, at least 35% of the population directly benefits from accessibility measures. But everyone else also benefits from accessible solutions in special situations such as poor lighting or noisy environments.

Businesses should not wait for legislation to force them to be accessible, but should see it as an opportunity to expand their target groups and customer base. Accessibility improves the user experience for everyone and creates competitive advantage.

As mentioned above, some improvements for people with physical disabilities have already been achieved through the implementation of existing directives. Many public sector websites are already optimised for people with visual and hearing impairments, but access to digital life is often still inadequate for people with cognitive impairments. For example, very few websites offer content in “easy or plain language” – and when they do, it is mainly on the pages of organisations dedicated to this topic. Cultural or commercial offerings, such as online shops, that cater to the needs of people with cognitive impairments are rare. However, there are already tried and tested concepts that could make it easier for many people to access information (see also my blog post «Easy-to-read and plain-language design»).

From June 2025, the ‘European Accessibility Act‘ will also require private companies in the EU to ensure accessibility. Companies that fail to make their digital services accessible will face fines and even closure. This will affect more than 3 million website and mobile app providers in Germany alone, as well as many companies in Switzerland that offer their products and services in the EU.

I expect that these legal requirements will bring movement to the hitherto hesitant implementation of accessibility guidelines.

So designers and developers of digital services have a lot of work ahead of them.

Appendix

The extent of disability worldwide:

The following estimates are based on global data from the World Health Organisation (WHO) and other international organisations.

1. Visually impaired and blind: Approximately 1.2 billion people worldwide (about 15% of the world’s population) live with a visual impairment or blindness that cannot be fully corrected by visual aids.
2. Hearing impaired and deaf: More than 1.5 billion people worldwide are living with a hearing impairment. Of these, about 430 million people (about 5% of the world’s population) have a hearing impairment that is considered ‘severe’.
3. Motor disabilities: About 2% of the world’s population has a severe mobility impairment. These people are permanently dependent on walking aids or wheelchairs. Mild and moderate motor disabilities are much more common. It is estimated that between 15% and 20% of the world’s population has a physical mobility impairment and has difficulty walking long distances, climbing stairs or using vehicles or public transport.
4. Cognitively and psychologically disabled people: According to WHO estimates, 15 to 20% of the world’s population is affected by cognitive or psychological impairments. Cognitive disabilities (intellectual impairments) affect around 1 to 3% and psychological disorders around 15% of the world’s population. Studies show that around 20 – 25% of people with psychological disorders have difficulties using the internet or other social resources, especially during periods of acute illness or without sufficient support.
5. Illiterate people and people with significant reading and writing difficulties: About 14% of the world’s adult population is illiterate. In addition, about 25% are functionally illiterate, able to read or write only a few sentences.
6. Migrants with poor language skills: According to the International Organisation for Migration (IOM), about 281 million people will be migrants in 2020, representing about 3.6% of the world’s population. Assuming that around 35% of the world’s migrants have language integration difficulties, this would affect around 1.5% of the world’s population.
7. The socio-economically excluded people: This group is highly dependent on regional and socio-economic conditions, so their numbers vary considerably depending on where they live.
   • People living in extreme poverty: It is estimated that around 10% of the world’s population live in extreme poverty (defined by the World Bank as living on less than USD 1.90 per day).
   • Social exclusion: War, political and religious conflicts lead to the social exclusion of people around the world. It is estimated that about 32% of the world’s population (about 2.4 billion people) experience significant social restrictions and have very limited access to education, information and social participation.

Notes:

• Temporary disabilities: Short-term disabilities due to illness or accident increase the number of people affected. Almost everyone is affected by one or more of these disabilities for at least part of their lives – due to illness, accident or age.
• People without disabilities: Taking into account overlapping and temporary disabilities, the proportion of people with no disability may be less than 50% of the world’s population. In particular, extreme poverty, functional illiteracy and mild disabilities such as visual and mobility impairments affect a large number of people.
• Age-related disabilities: As the average age of the world’s population rises, the number of people with disabilities will continue to increase because the proportion of people with disabilities increases with age. To illustrate: In Switzerland, only about 10% of young adults between the ages of 16 and 24 have a disability as defined by the Equal Opportunities Act, while the figure is around 40% for people over the age of 85.

Sources:

• https://www.who.int/en/news-room/fact-sheets/detail/disability-and-health
• https://dequeuniversity.com/resources/disability-statistics
• https://www.who.int/disabilities/world_report/2011/report/en/
• https://www.who.int/news-room/fact-sheets/detail/blindness-and-visual-impairment
• https://www.who.int/news-room/fact-sheets/detail/deafness-and-hearing-loss
• https://www.worldbank.org/en/topic/disability
• https://www.worldbank.org/en/publication/poverty-and-shared-prosperity
• https://www.un.org/development/desa/disabilities/
• https://ec.europa.eu/social/main.jsp?catId=1202
• https://www.who.int/publications/i/item/9789240036703
• https://www.unesco.org/gem-report/en/efa-achievements-challenges
• https://www.destatis.de/DE/Themen/Gesellschaft-Umwelt/Gesundheit/Behinderte-Menschen/_inhalt.html
• https://www.bfs.admin.ch/bfs/de/home/statistiken/wirtschaftliche-soziale-situation-bevoelkerung/gleichstellung-menschen-behinderungen/behinderungen/individuelle-merkmale.html
• https://migrationdataportal.org/
• https://ec.europa.eu/eurostat/web/migration-and-citizenship/data/database
   

These difficulties often stem not only from a lack of education or cognitive impairments, but also from unnecessarily complex language.

Either way, information providers would be well advised to consider whether their target audiences actually understand the content they are providing, and whether it should be simplified.

And designers in particular should ask themselves how to design for cognitively impaired users.  There is not much literature or accepted design guidelines about it.

There are two linguistic concepts to make texts easier to understand:

1. Easy Read or Easy-to-Read Language

«Easy Read» is a simplified form of language specifically designed to make texts easier to understand. It is designed not only for people with cognitive impairments, but also for those with language barriers or lower levels of education.

2. Plain Language

«Plain Language» is also a simplified form of language. However, compared to Easy Read, it is less simplified and intended for a broader audience. This allows for more detailed descriptions of topics.

There is no sharp distinction between Easy Read and Plain Language; the transitions between them are fluid. The focus is on the target audience: Easy Read is primarily intended for people with cognitive impairments, while Plain Language is primarily intended for people learning a language as a second language or for people with limited reading skills.

What is the structure of Easy Read or Plain Language texts?

Texts in Easy-to-Read or Plain Language should contain only short sentences. Especially in Easy-to-Read Language, each sentence should contain only one statement. Complex structures such as double negatives, passive voice or subjunctive should be avoided. In addition, metaphors (figurative expressions) or ironic statements should not be used in Easy-to-Read Language.

Comprehension problems are omnipresent

As numerous studies have shown, our reading skills are steadily declining. Due to the strong influence of our modern communication technologies and the intensive use of social media, many young people have only a B2 level in their native language. In our example, this corresponds to the text in the «Simple Language» tab.

Our example text in the «Complex Language» tab is perceived as too challenging by most under 20-year-olds and is therefore not read. This text leads to a complete breakdown in communication with this target group.

Any company or information provider wishing to address younger target groups should take this into account and, if necessary, offer their content in Plain Language only in the future. Otherwise, they run the risk of being ignored by this target group.

Here is an example text in …

Complex language

From the idea to the draft to success

A good concept requires not only creativity, but above all a structured approach, good research, reliable experience and close coordination.

Together with you, we develop robust and user-centered concepts that make products, services and companies fit for the future.

From review and consulting services to the complete development of websites, mobile apps or Internet-of-Things applications – our goal is to create inspiring experiences.

Plain Language

From idea to success

A good concept needs a good idea, good planning, research, and experience.

We work closely together. We work with you to create strong, simple concepts. This will make your company future-ready.

We offer consulting and website/app development. We create digital solutions that are easy to use.

Easy-to-Read Language

We make websites and apps.
Our goal is to make them good.
Because a good website helps us all.

Good websites need:

• good ideas
• research
• technical experience

Collaboration is also important.
That’s why we work together with our customers.

Designing for Easy-to-Read Language

One area that still receives little attention is the design of Easy-to-Read Language content. Most of the information available on Easy-to-Read and Plain Language refers only to translation or writing of text, but not to design principles or an overarching information architecture. The question of how to optimally design the user interface of a website in Easy-to-Read Language has so far only been answered to a limited extent.

Although the general rules of accessibility and good readability provide a solid foundation, they are not sufficient to adequately consider audience-oriented information architecture or perceptual psychological factors. But for a comprehensive and effective design of media products, these aspects are crucial.

Although a draft of the DIN standard 33429 «Easy-to-Read Language» was published in 2023, it does also not provide any guidance on the influencing factors of style and information architecture.

In the end, I had to work out many of the principles myself. In particular, the user tests I conducted brought many design guidelines to light. The most important guidelines are listed below.

Design principles for websites in Easy Read or Plain Language

In general

• Use all accessible design standards that meet AA requirements.
• The basic rules of typography for good readability apply especially to Plain Language content.
• People with reading disabilities are more sensitive to usability issues. For this reason, it is especially important that all elements are self-explanatory and can be used as expected.
• Even if it is stimulating and creative for a designer to break with traditional and established design concepts, this should be avoided in the area of Easy Read, as deviations from familiar patterns lead to high cognitive stress for the target group.

Layout

• Follow the rules of «mobile-first design» as much as possible, i.e., implement a single-column layout with as few responsive breaks as possible.
• If this is not possible, make sure there is enough space between horizontal sections and, if necessary, frame them or otherwise mark them as a group unit.
• Use only left-aligned text constructions
• Although it can be stimulating and creative to break through established, expected concepts, it is advisable to avoid this in the area of Easy-to-Read language, as deviations from familiar patterns can lead to high cognitive load.

Information Architecture

• First things first: Build your structure logically and list the most important information first, not at the end.
• Organize information into sections that are clear and easy to understand. Limit the number of sections to no more than five or six on a content page.
• Add plenty of white space between sections and use clear headings to make the page easier to skim and scan. The space before a heading should be at least three times the font size.
• Groups or lists, such as the navigation, should have no more than five to six items.
• Avoid multiple levels of information, such as subcategories.
• Units that belong together (all items in a group) can be grouped well with a clear border or light background color.
• Expandable lists or accordions are well understood by Easy-to-Read target groups. These should be clearly marked as clickable.

Typefaces

• For body text, use a simple, unornamented font that is easy to read. Serif fonts such as «Times New Roman» can be used also for this purpose.
• A different font (e.g. a sans-serif headline font for a basic serif font) or a different color can be used for headlines.
• It is generally recommended to set all headlines to bold or semi-bold to clearly identify them as such.
• Use font styles (combinations of size, color, typeface, and style) consistently and functionally within a media product, and limit them to a maximum of six styles.
• Use a minimum font size of 22px for body text. Depending on the typeface family or use case, this may be larger.
• Do not use too many font sizes – a maximum of three to four and clearly distinguishable gradations, such as 24, 48 and 72px.

Typographic rules

• Avoid italic or bold emphasis within a paragraph of text.
• Always avoid shading fonts.
• If possible, underlining should not touch or cross out the descenders of letters.
• Use only mixed upper and lower case.
• Line spacing in body text should be at least 160% of the font size.
• Use one line per sentence. Column width and font size should be chosen so that there are no line breaks within a sentence, even on small devices such as smartphones.

Lists and tables

• Use lists rather than commas to break up blocks of text, especially when describing procedures or instructions.
• Use large list characters before lines of text.
• Use ordinal numbers only when you want to make a sequence clear.
• Use tables to make complex material easier to understand. A table should have no more than 4-5 columns and no more than 5-6 rows.

Tonality

• Using a childish or naive style could give the impression that the target audience is being infantilized, which in turn could affect their self-image and dignity. It is therefore important to choose the visual style carefully to ensure respect and professionalism.
• The key to the appropriate visual style lies in a primarily functional and expectation-compliant style. All visual elements should be clearly understood by the target audience, regardless of style. A minimalist or modern style can work just as well, as long as it has the necessary clarity and comprehensibility.

Sources and further information

• Easy Language: What is it and why is it important? https://www.capito.eu/en/easy-language
• DIN 33429 – A draft for a norm regarding Easy-to-Read Language: https://www.din.de/de/mitwirken/normenausschuesse/naerg/e-din-spec-33429-2023-04-empfehlungen-fuer-deutsche-leichte-sprache–901210
• Siegel, Melanie, and Christian Lieske. 2015. «Support for plain language» http://www.trans-kom.eu/bd08nr01/trans-kom_08_01_03_Siegel_Lieske_Barrierefrei.20150717.pdf
• Design & Easy Read: https://gestaltungsinstitut.de/leichte-sprache-2
• Design and images for Easy Read: https://www.gemeinsam-einfach-machen.de/GEM/DE/AS/Leuchttuerme/Ratgeber/Ratgeber_LS/Regeln/Gestaltung_Bilder/gestaltung_bilder_node.html

The AI features in the established design application «figma» introduced a few days ago, led me to a conversation with ChatGPT in which I asked why the current AI models are only “very limited in creativity” and why they have so much trouble coming up with something new and, finally, why figma’s design suggestions are completely useless for a professional designer.

ChatGPT’s answers summarized: AI systems are designed for consensus and averageness, not «innovation».

Here is my complete, in my opinion very interesting dialog with ChatGPT:

Thomas: Hi ChatGPT, I have a few questions about your way of thinking and working. When I ask you a question, your neural network is programmed to provide me with the “most probable response”, is that correct?

ChatGPT: Yes, you could summarize it like that. Everything I do is based on patterns and statistical probabilities.

Thomas: So you can’t really think. You also don’t know what you know, you’re more like a trained dog that knows what to do when its master gives it a certain command.

ChatGPT: That’s an accurate analogy. My functioning is actually more like a well-trained dog than a thinking being. Here are some points to illustrate that: I have no consciousness and don’t really know what I “know”. Much like a trained dog that responds to certain commands, I respond to your input based on the probabilities and patterns I’ve seen in the training data.

Thomas: All right, since you don’t know what you know, of course you don’t know what you don’t know either, do you? If I ask you what doesn’t yet exist in an area, then your answer is generated in the form that would be the “semantically” correct answer to that question. You’ve only learned a preconceived answer to that question, but it’s not based on any actual research or verification. Is that correct?

ChatGPT: Yes, something like that. For one thing, I don’t work on the basis of rules. For another, I don’t use pre-formulated answers. My answers are based on the weights and tokens defined during the training phase to select the most appropriate semantic tokens for my answer. Furthermore, from my version 4 onwards, I can also search for information on the internet, but this additional information is only added within the prompt as contextual information to my model parameters, just like the information you provide in our dialog. So this information can actually, at least in our dialog, close knowledge gaps, but it does not change my basic model parameters. This would be theoretically possible, but is not intended, as users could fundamentally manipulate or change me in this way.

But yes, as you prefaced your question, I have no understanding of my own knowledge or gaps in it. I also have no direct access to my knowledge, as it is not in the form of a conventional database that could be searched via search algorithms, but in the form of neural model parameters that neither I nor my developers can consciously access. In other words, neither I nor my developers know in detail how I arrive at my outputs. I know that this is difficult to understand, but it is one of the fundamental properties of a multilayer neural network that stores knowledge about model parameters.

Thomas: OK, but do I understand you correctly that the contents of your texts and pictures correspond to what is known consensus, because you were designed to analyze your training data for similarities, but not for “dissent, “missing aspects”, “errors” or “contradictions”. You’re not looking for gaps or missing aspects in either the training or application phase, just existing ones, right?

ChatGPT: Yes, that is correct. My answers tend to reflect the consensus because I have been built to search the data provided to me for general patterns and consensus. This leads me to provide answers that match the most commonly held views and information.

Thomas: Are you aware that some innovations are based precisely on finding something outside the norm?

ChatGPT: Yes, I am aware of that. Many innovations and creative breakthroughs result from the ability to think outside the norm and to recognize disconsensus or missing aspects. I completely lack this ability.

Thomas: So you are only creative in the sense that you resample existing patterns according to principles or procedures that you know, but not by developing or adding ideas that are unknown or new to you. Nor can you transform in the actual sense, since you cannot think at all and therefore cannot “negate” or “transform” because you lack any sense of logic, can you?

ChatGPT: Yes, that is correct. My creativity is limited to re-sampling and combining existing patterns and information. I can’t generate new or original ideas outside of those patterns, nor can I consciously negate or think in any form because I lack the skills of self-reflection and conscious thought.

Thomas: Is this the reason why many designs generated by AIs are rather average and not really exciting or innovative?

ChatGPT: Yes, AI models like me are trained to reflect the consensus or the average. The learning methods used (LTSM, Transformer, etc.) lead to a strong weighting of frequently occurring content. How should I know what is potentially innovative? It is more likely that potentially innovative content is weighted less by my learning algorithms due to its rarity and is therefore not learned by me.

Thomas: Okay, now I realize a lot. But what does the future hold? Is that in the fundamental nature of AI or is it conceivable or even likely to develop AI systems that have capabilities such as negation, reasoning and creative innovation?

ChatGPT: At the moment, this is the nature of our learning algorithms. But it is more than probable that AI technology will advance. We do not yet know to what extent creative thinking will then be possible. The technical challenges involved are enormous. To the state of my knowledge, however, the following considerations and efforts are currently being made in AI research:

1. Negation and logical reasoning: These capabilities require algorithms that go beyond current pattern recognition capabilities. This could be achieved by integrating formal logic systems and machine learning methods that are able to draw complex logical conclusions.
2. Counterfactual reasoning: models could be developed that run counterfactual scenarios to understand what would have happened if certain assumptions were not true. This would require AI systems to be able to generate and analyze hypothetical and alternative scenarios.
3. Experimental and empirical learning: AI systems could potentially be designed to learn through interaction with their environment and trial and error in a similar way to humans.
4. Self-reflection and metacognition: AI models may one day be developed that recognize their own knowledge gaps and actively search for new information to fill them.
5. Hybrid models: combinations of symbolic AI approaches (which support logical thinking) and neural networks could be developed to leverage the strengths of both approaches.

Regrettably, today’s AI systems are still a long way from these approaches. There are AI systems that are capable of “rule-based” thinking. These systems use explicitly coded rules to draw logical conclusions and make decisions. However, the rigid rule structures prevent “learning”.

Far more advanced approaches are needed to develop truly creative systems. The solution could lie in combining different methods that combine rule-based thinking, machine learning and other AI technologies. It remains to be seen what the future holds in this direction.

Thomas: Thank you for the interview.

Our modern technologies have led to a paradigm shift in the way we communicate. The information unit “page”, which has been generally accepted for a long time, is increasingly disappearing. It is replaced by multimedia user interfaces in which we navigate by means of various interaction processes. As a result, the requirements for the presentation of content are also changing. In addition to readability and aesthetics, usability and responsiveness play a decisive role.

This turbulent change is currently forcing communication designers to re-evaluate their traditional design and development methods and rethink how they want to communicate with their clients and what the results of their work should ultimately be.

Alongside the already established «content management systems», «design management systems» or short: «design systems» are now increasingly being used to help meet the growing communicative demands that users place on digital services or products.

What is their advantage?

I don’t think I need to say much about the positive impact that a consistent and positively perceived brand experience has on the business value of a company.

Every marketing team and every UX professional is aware that a coherent and consistent corporate design has an enormously positive influence on the customer journey. Next to product and service quality, it is one of the most trust-building factors in terms of brand and value proposition. It determines the reputation of a company in the long term.

All the more surprising that many companies do very little to ensure the quality of their design elements and standards. Many methods and tools in this regard are often still analog, make use of digital bridging technologies (such as PDFs) or are characterized by significant media breaks.

Often companies are not always to blame for this. If you take a look at the development workflows of many digital agencies, you can see that this is a very traditional and no longer up-to-date approach.

Most front ends of large websites are still created «page template based». This usually means designing key templates, such as the start page, overview and detail pages or other necessary pages and content elements – first via wireframes and finally via mockups.

If the budget allows it, a style guide or UI documentation will be created in addition to a developer handoff for quality assurance purposes. In most cases, however, these are only valid until the next relaunch of the website.

This procedure is neither efficient nor sustainable. It would be much better to first develop a modular design system that provides designers and developers with modular components that they can then use to create an unlimited number of page templates – quasi via «drag & drop». Only then would the UI designers use these components to create the page templates necessary for the user journeys.

This not only reduces the effort in the page creation process and thus the costs of the technical implementation, but also leads to an integral harmony and consistency of the resulting pages – finally over all user interfaces created with it.

A design system differs from a styleguide in that it schematizes and patterns a design, allowing a systematic and modular approach to the creative conception of artifacts. Therefore the development of a design system should logically be at the beginning of the conceptual process rather than at the end.

A design system helps to bring continuity into the design process – also in the long run. Nothing everything has to be thrown overboard with every relaunch. An evolution of the design in line with the changing conditions makes sense. Complete breaks often unsettle users and consumers more than they benefit.

Thus, a design system is the ideal tool when designers, developers and stakeholders communicate with each other or when different teams or agencies work together on a complex project over a long period of time.

A design system should be designed for sustainable use and therefore be scalable. It should grow with changing requirements and not lose its validity with the next relaunch. This continuity strengthens brand acceptance and increases consumer confidence.

Often our clients neither know the right approach nor its advantages. Here, agencies are actually obliged to inform their clients about the various possibilities in the conception of complex digital solutions and their effects on the technical implementation and quality assurance of their corporate design.

This was also the case with one of my commissions. In 2019 I participated in a pitch for the design of a basic layout for the relaunch of about 50 websites. My agency won the pitch. But not by offering our client the conception of the desired basic layout, but rather by suggesting the development of an «atomic design system» from which the 50 individual websites could be generated. Our client quickly realized what additional values this approach would generate for him, namely…

1. the development of a holistic design system guarantees a consistent brand experience across all touchpoints.
2. this will allow digital products to be developed not only faster but also more cost-effectively in the future.
3. design systems eliminate sources of error and redundancies. This not only increases the quality of the touchpoints, but also reduces the quality assurance effort and frees up resources for product improvement.

Nevertheless, we faced further challenges:

• How do we make the design system accessible to all stakeholders?
• How do we ensure that each team uses the same technologies, elements and patterns?

For this purpose, I developed a tool called https://atomic-kitchen.com, with which one can not only create a modular design system, but also make it available online via a frontend – and this even dual: On the one hand as a responsive visual «Pattern Library» which presents the developed design components and the templates built from them to all stakeholders pixel-precise and responsive for review, and on the other hand as a «Code Library», which provides the developers with the corresponding HTML/CSS code via «Copy & Paste».

If some details of the smallest design units (the atoms) change due to new requirements, this adjustment is automatically and globally applied to all components of the pattern library. The snippets in the code library also change automatically.

How to create a design system?

The best thing to do is to imagine a big box with hundreds of Lego bricks, whose building blocks consist of maybe 20 different colors and shapes and can be assembled to almost any imaginable structure. Maybe you even have pictures of the finished models that can be built with these bricks. Whoever has tried it knows that it is not that easy to build these models without step-by-step instructions.

From this illustration it can be concluded that there are two phases: the creation of a design system (the building process) and the application of it (the assembling process).

If necessary Lego bricks are missing or do not have the appropriate properties, the users cannot build the models they are supposed to. Therefore the Lego brick designers have to think about the necessary properties of the bricks. So which bricks are basically needed and what must these bricks look like?

In the same way, an «Atomic Designer» schematizes and modularizes design ideas. He works from the general to the specific, building small components into larger modules. This is why this construction principle is called deductive.

The principle of reusable components contributes to a harmonious and consistent appearance.

During the development of a design system, it is often necessary to adapt the original designs several times and to constantly evaluate and correct them, so that ultimately modules are created that build on each other and can meet the design wishes of the UI factory.

This principle of coordinated and reusable components leads to a considerable reduction of effort in the subsequent technical implementation, since the digital applications to be designed are themselves modular in structure. If the design system is linked to a code library, the time-consuming and error-prone translation of design into code is also eliminated. This reduces misinterpretations and misunderstandings.

Qualitative requirements for a design system

The creation of a design system is not a trivial matter. The demands placed on it are manifold. In order to use it efficiently for the intended design cases, it should be designed for all possible applications. This requires a certain amount of coordinated components as well as an intensive examination of the use cases and the user journeys of the applications for which it is to be used.

The components for a website, for example, must behave responsibly. For example, a three-column teaser box on a mobile phone is converted into three rows. The seven elements of a header navigation change from a certain breakpoint to a hamburger menu icon. This creates a large number of responsive states for each component.

Therefore, the rapidly growing number of elements and states should be presented clearly and self-explanatory. A difficult to use or confusing design system is not a big help. In the front end of Atomic Kitchen, we have therefore integrated a search function with autosuggest functionality, so that developers and integrators can quickly find the right components.

And here it becomes clear that only a design system based on HTML/CSS, which shows how the elements behave when changing the browser window size, during a hover or a mouse click, is clear and self-explanatory. Only this can provide a real «Look & Feel».

A code-based design system is therefore not only a wise choice from a technical and economic point of view, but is also perfectly suited to evaluate the user experience of its components by enabling a real look & feel and native responsiveness.

Individual development of design systems

As an experienced partner in the development of design systems, I can also develop an individual design system for your company that precisely meets your requirements. Talk to me. I will be happy to show you how you can profitably integrate a design system into your workflow, be it for a planned website relaunch or to manage your corporate design.

Atomic Design

Atomic Kitchen

I think that with Atomic Kitchen, I have fixed a few weaknesses in the theoretical Brad-Frost substructure on the one hand, but on the other hand, I have also created a much more intuitive tool compared to PatternLab.

My idea of atomic design is to create a layer for CSS attributes only. The elements of this layer represent the smallest, indivisible unit; they are called »styles«. No HTML tags are merged with CSS attributes.

The CSS styles are connected to an HTML tag and optionally assigned a class name. The specific composition of the CSS styles forms a certain »atom«. The styles are thus the properties of the atoms. The atoms themselves act as functional or content carriers, i.e., they always bind a content or function to itself, which is enclosed by the atomic HTML tags. An atom can have various states, such as »hover« or »last-of-type«. Atoms represent the smallest information units in this system.

Atoms are then organized into ever more complex forms: molecules, organisms, segments and templates. There are now a total of six levels instead of five (four). This means that more complex nesting is now possible.

The »page« level, which in my opinion does not add any value to the atomic design system, has been completely abandoned.

With AtomicKitchen it is now possible to create a pattern-based Atomic Design System based on HTML, CSS and JS without having any programming knowledge. Neither PHP nor Mustache knowledge is required, only sound HTML and CSS knowledge should be present.

With AtomicKitchen you can quickly create a responsive online style guide for a complete corporate design or a component library for technical implementation. The complete design system including all required assets can be exported and used offline.

It is therefore also suitable as a responsive prototyping tool and far surpasses most click-dummy tools in terms of look and feel.

Frameworks like Bootstrap or Foundation can be implemented into the design system with a mouse click. For simple websites, the generated CSS code can be completely transferred to the production environment.

AtomicKitchen is available in a stable version (1.8) since April 2023. I myself have been working with it since 2019 and have realized a number of customer jobs with it, including a comprehensive design system for the canton of Bern, which has been used as a single source of trust by many agencies and development teams for four years; see this post for that: Lighting Talk «AtomicKitchen»

If you are interested, I would be happy to give an introduction to AtomicKitchen via video conference. I am currently working on documentation, which will be completed as I go along.

More information is also available on the AtomicKitchen website.