Sep 03 2019
Sep 03

Often corporate design is focused on logos, fonts, colors and content, but predefined interaction components such as buttons, cards, accordions, sliders, shopping carts, etc., are missing.

In many cases such organizations are missing methodologies and tooling to create a complete corporate design, to make it available to the whole organization, and to maintain it. With maintaining I refer to extending, updating, or changing the design, as well as rolling these changes out.

Design systems to the rescue

A design system is a methodology to build corporate design and break it down into components. Each of these components are named and have a clear definition of how they are to be used.

Typically a design system is comprised of two elements: a design language and an online system to make the components available, including their styles and template source codes.

When creating a design system all stakeholders must work together and agree on the outcome. Stakeholders usually include designers, marketeers, frontend developers, managers, and all other people who create or work with the corporate design.

All stakeholders agree on the naming of the components. This is referred to as creating a design language. They also agree how the components are supposed to be used across all properties. This includes digital properties such as websites, social media profiles, etc., as well as offline properties such as brochures, advertorials, merchandising articles, etc.

Let’s have an example: On a website you typically have overview pages that provide links to landing pages with the actual content. Think of a listing of products or services where the user clicks on the most suitable item. For these items you would typically use an ‘Image Text Card’. Such a card could be assembled by using a ‘Squared Image’, ‘Regular Text’, and a ‘Standard Button’.

Example: ‘Image Text Card’

Example: ‘Image Text Card’

As can be seen above, the design language that all stakeholders have agreed on contains:

  • ‘Image Text Card’,     
  • ‘Squared Image’,     
  • ‘Regular Text’, and     
  • ‘Standard Button’.

This methodology would be used for all aspects of the corporate design.

It is good practice to start with the smallest possible components such as colors, texts, headings, and images. Each must be named and have a clear definition of how it is used. Colors could be named as ‘Primary Color’, ‘Secondary Color’, ‘Danger Color’, etc. Fonts could be named as ‘Regular Text’, ‘Summary Text’, ‘Cited text’, ‘Eyebrow Text’, ‘Link Text’ etc. Headings would typically be organized as ‘1st Level Heading’, ‘2nd Level Heading’, ‘3rd Level Heading’, etc. Images would be organized as ‘Squared Image’, ‘Hero Image’, ‘Banner Image‘, Portrait Image’, etc. Starting with the smallest possible components is also referred to as Atomic Design, any my colleague Jule wrote about this here.

Headlines, colors, image formats

Headlines, colors, image formats

Components, as in the examples above, are then used, when the layout for a new page type is created, let’s say for a news article. Such an article typically consists of a ‘1st Level Heading’, a ‘Hero image’, an ‘Eyebrow text’, a ‘Summary Texts’, and ‘Regular Text’ combined with ‘Cited text’ and ‘Link Text’.

Example: ‘News Article’

Example: ‘News Article’

When working with a design system methodology an important aspect is having a concise design language. If all your components have sensible names it is easy for the stakeholders of the design system to communicate.

You could for example ask the designer to change the ‘Regular Button’ on the ‘Text Image Card’ to an ‘Icon Button’.

Example: ‘Regular Button’ and ‘Icon Button’ on ‘Image Text Card’

Example: ‘Regular Button’ and ‘Icon Button’ on ‘Image Text Card’

Making design systems available

A design system is typically made available with a web based application, that allows easy navigation of all components simulating different use cases.

Also such software makes templates available, that can be used by other software to use the components of the design system.

Popular examples of design systems are

At 1xINTERNET we use Pattern Lab for creating an online design systems. We primarily develop with Drupal and React and have built our own set of tooling for creating decoupled frontends. As a starting point we have used the well established Particle theme.

The design patterns are made available as templates that can be integrated in other software. Hereby, the design system would typically supply the templates in the programming language needed by the different systems.

Working like this allows us to completely separate frontend development from the development of the actual websites. Once the frontend is ready and all components are made available with as templates, they are used by all websites.

With this approach the highest possible re-usability of frontend is achieved, and after initial creation cost, the development time of new websites can be significantly reduced.

A nice demo is provided by Patternlab.

How do you handle different designs?

Often large organizations have different designs. Sometimes they have different brands, or the same brand is used differently for varying audiences. Such audiences could be students, adults, or pensioners, who are best reached with different communication.

Different designs could be different logos, fonts, colors, etc. But they could also include completely different interaction components like fancy sliders, or traditional accordions.

Depending on the use case such designs could be integrated into the standard design system. The number of available sliders could be increased, and it could be agreed that usage of certain sliders is only allowed for certain use cases.

Alternatively, a variant of the design system could be created. Here fonts and colors could be changed, the majority of components could be integrated from the main design system could be used, some components could be excluded, and other components could be added.

Example: Alternative design for headlines, colors, and image formats

Example: Alternative design for headlines, colors, and image formats

Example: Application of alternative design to different ‘Image Text Cards’

Example: Application of alternative design to different ‘Image Text Cards’

The application of different designs in web projects works the same and with one design system.

Testing component based designs

An important aspect of component based designs, is that they can easily be tested.

All components of a system are developed for different screen resolutions, work for touch- and non-touch screens, are optimized for accessibility, and are optimized for the best possible user experience.

In such a system all components can be tested individually with a variety of testing tools. We always use Visual Regression testing during quality assurance, to analyze what components are affected by the changes.

Screenshot: Visual regression testing of different patterns

Example: Application of alternative design to different ‘Image Text Cards’

How to share design systems across implementation teams

Given that you have created a design system and made it available for users to work with it, the question arises, how this is actually done.

Imagine a scenario in which you have a standardized CMS technology such as Drupal in your organization. Frontend in Drupal is created with so-called Twig templates. Twig is a flexible templating engine for PHP.

These templates can simply be included in your CMS. Technically speaking, the CMS would include the Twig templates from the design system and parametrize these with the content generated by the CMS.

Code snippet: Include another Twig template in Twig

Code snippet: Include another Twig template in Twig

Staying within the example above for generating a news article, the CMS would call the template for ‘1st Level Headline’ to display the headline, the template for ‘Hero Image’ to display the image, etc.

A good way to integrate your design system into a website project is to make it available as a regular source code dependency. That way when all dependencies of the website are updated, the design system is also updated, and the newer version is automatically included in the next version of your website. This is especially useful to automatically roll out extensions, updates, or changes of your design system to all websites.

Let’s have an example. Say, you discover that the component ‘Cited Text’ does not comply with WCAG 2.1. standards for web accessibility, the design team is asked to provide an updated visual design. Then the frontend developers update the component with new styles and supply a new template. Once the new design system is tested a new version is created. As soon as the websites using ‘Cited Text’ are updated, the new version of cited text is rolled out.

When to use Patternlab

We primarily use Drupal and React for building websites. The technology we use for creating design systems is Patternlab (see above).

For both we provide templates. For Drupal we provide Twig templates, for React we provide JSX templates for the different React components.

Patternlab can be extended to also ship other types of templates (Angular, Vue, etc.). The question of whether Patternlab should be used to build up a design system depends on the technology being used in the website projects.

For building standalone JS based applications Storybook is a great tool for developing UI components. 

Aug 26 2019
Aug 26

In order to achieve a consistent user experience and interface design, Atomic Design is a great approach.

Atomic Design is not only a budget saver, but also your best friend for future requirements and allows you to fulfill customers wishes quickly and easily. 

The first step is to define the elements that are most in use. This would be, for example, colors, fonts, buttons and images. Starting with these simple elements, different components can be assembled, such as cards or sliders.

Example: Image + Text + Link = Card

Example: Image + Text + Link = Card

The analogy for atomic design is that it is organized along chemical notation, ranging from atoms to molecules to organisms to templates to pages. On each level the components are assembled from smaller components of the lower levels.

Chemical notation in 'Atomic Design'

Chemical notation in `Atomic Design`

When we design user experiences (UX) at 1xINTERNET we try to build the best possible user interfaces with the fewest amount of components.

The focus is to create efficiency in the project and to potentially save budget. When fewer components are designed in UX, fewer components need to be programmed and tested. 

This approach not only reduces initial efforts considerably but also reduces the cost of the project and its maintenance.

Imagine the following example: You have three different interaction pages and you create a great but different UX for each of those. Then, the users have three different systems to learn. If you instead create an equally good UX by reusing as many components as possible, the user has to learn much less and can interact much faster with your application.


A strict design process and the right integration with the website technology certainly offers efficiency benefits. We plan to write more blog posts on the topic in the next few weeks and are looking forward to your feedback.

Aug 20 2019
Aug 20

Open Source is increasingly popular and many companies actively contribute to Open Source projects. A lot of research is ongoing on the topic, “why contributing is valuable for companies” and Dries also wrote a blogpost about "The investment case for employing a Drupal core contributor".

In this blogpost I want to describe, why 1xINTERNET contributes and what is our rationale behind it. 

Then I will put this in perspective of contributions to the Drupal project. 

Finally I’m interested in hearing from others how they are contributing and how they calculate the value of contribution. 

What’s your math?

Community work

In 2018 we spent a lot of time organising Drupal Europe together with other community members. We also actively participated in Drupal camps as well as in various boards such as the Drupal Association board, the board of the German Drupal Business Association, and the board of the Icelandic Drupal Association. We help promote Drupal in Germany and Austria by organising the Splash Awards and we encourage our employees to actively participate in Drupal events.
In 2018 we had on average 20 employees. When we calculate the time spent on community activities, it adds up to ~5% of our workforce which is equivalent to ~1 full-time-equivalent (FTE).

Sponsorships and memberships

In 2018 we invested in the following events and memberships:

  • Sub sponsor at Frontend United in Utrecht, Netherlands
  • Gold sponsor at Drupal Dev Days in Lisbon, Portugal
  • Bronze sponsor at DrupalCamp Essen, Germany
  • Co-organisation of Drupal Europe in Darmstadt, Germany
  • Organisation member of the German Drupal Association
  • Founding member of the German Drupal Business Association
  • Premium Supporting Partner of the Drupal Association
  • Donation to the Promote Drupal fund

In total we spent ~1% of our total budget in sponsorships and memberships related to the Drupal project.

Source code contribution

We also actively contribute source code to the Drupal Project. Some projects we strongly support. For others we contribute patches.
We support over 13 projects and have over 406 credits counts. We are currently ranked nr. 42 of the organisations that contribute most back to Drupal. We are really proud of this considering the size of our company is currently “only” 28 employees.

How much did we contribute in 2018?

If we add up our efforts in community work, sponsorships and memberships, and source code distribution, 1xINTERNET contributes an equivalent to ~7,5% of our annual budget to Drupal.

Why do we contribute?

Visibility and partnerships

1xINTERNET has a lot of visibility in the Drupal ecosystem. We can easily transport our marketing messages and position ourselves as experts delivering ambitious Drupal and React projects. Because we are recognised as experts, we cooperate with some of the largest organisations using Drupal and get to work on challenging projects.


Team event in Conil, SpainFor us it is easy to recruit Drupal talent because other members of the community notice our contribution and want to participate in shaping some of the important parts of the Drupal project. Our employees see benefits for personal growth as well as increasing their skill sets by working on the Drupal project. 

Also our team is diverse with 30% female staff, over 15 nationalities, and 5 different religious views. Our company language is ("broken") English and we have offices in Germany (Frankfurt and Berlin), South of Spain, and Iceland.

Because we can recruit top talent, we can grow our team the way we want to have it. We have a very strong collaborative spirit within our company and friendships between team members. This all helps us to build the best team and would not be possible without the visibility through our contribution.

Project delivery and development expertise

Contributing to Drupal has direct impact on the quality of our workforce.

Through source code contribution, our developers constantly increase their development skills, as their code is being reviewed by other developers. From this our clients benefit directly, because we can deliver higher quality software solutions.

The same is true for community work, because giving public talks, mentoring others, or organising events helps our employees increase their personal, organisational, and management skills.


Lastly we directly benefit with sales. We actively get invited to participate in tenders. We also get direct client requests for Drupal development, digital consulting, Drupal trainings, and Drupal audits. 

Do we contribute enough? What is our math?

Given the fact we spend 7,5% of our budget which leads to having strong advantages in visibility, recruitment, sales and collaboration, we feel that this is a sensible spending.

However, we don’t know how our advantages would change, if we contributed differently.

Questions we ask ourselves are:

  • Does it make sense to spend 7,5% of the total budget into Drupal?
  • Would we get the same kinds of benefits if we spend less on contribution and spend more on marketing activities? 
  • Would we benefit more, if we contributed more code and did less sponsoring?
  • Or should we maybe spend even of our total budget to further increase our competitive advantages?
  • What about our competitors? We often ask ourselves, why they should benefit from our contribution while contributing much less to the Drupal project?

When trying to answer these questions we have also looked at research. There is a lot of research going on at Harvard and other universities. Most of the findings confirm our observations, how we as a company benefit from contribution. 

In “Learning by Contributing: Gaining Competitive Advantage Through Contribution to Crowdsourced Public Goods” the author Frank Nagle from Havard writes:

Quote from Frank Nagle

Is this model scalable? If we spend 15% of our budget in 2019, will we see even more increase in 2020? If this works so well for us, why are other companies not doing the same?

We can start by looking at other companies in the current Drupal contribution ecosystem to see if we can find a pattern or a solution to make this scalable to both grow the ecosystem as well as the contribution to the project.

What's your math?

Call to action - what's your math?

In this blogpost we have laid down how much our company contributed to Drupal in 2018 and how we calculate the value of our contribution. We have analysed source code contributions to Drupal, community work and sponsorships.

We see a lot of great companies contributing to Drupal, so many people are thinking about how much to contribute.

We don’t know if we should contribute more? Or if we should contribute differently?

In order to make better decisions, we need your input. We want to learn how you value contribution. Please share, what your math is.

I think this is a valuable discussion to have in our community. It is important for all members to understand the value of contributing, so we can grow as companies and together let Drupal prosper into the future.

Please respond with a blog post and let me know either via twitter at @baddysonja,  send me an email to [email protected] or write a comment here below. I will share your posts and link them in this post.

Feb 06 2019
Feb 06

It is not only your Smartphone or its apps that constantly want to do security updates. Every professional software has continual updates and improvements going on (Windows, MacOS, all Social Media services and much more). Drupal is also continuously being updated. And most importantly, many updates come with security updates as well.

For example, a patch for a critical security update for Drupal will be released tonight (2019-02-20): 

Due to time and cost reasons it is very common that these updates are postponed or not done at all, which is the perfect situation for hackers to gain access to your website and all your data. Without the correct security updates your website is at risk for data and identity theft.

1. Updates protect against security gaps

Security gaps and software vulnerabilities are loved by hackers.

A software vulnerability is a security flaw or a security weakness of a software program or an operating system.

Hackers can use these vulnerabilities to infect your software with code they have written specifically for these vulnerabilities.

If your software is infected, the hacker can steal your data and/or take control of your software. The hacker could for example spread unwanted content throughout your website.

Security updates close these known security holes and keep the hackers out.

2. Security updates protect your data

Data security is an important topic and has been brought to the public eye again with the new GDPR from 2018.

Each website has some personal information, for example a contact form filled out by your visitors. And if you have a online store or an application portal you will have a lot more data and much more sensitive data.

This data is then stored on your website and can have a high value for hackers.

Sensitive data may then be used by the hacker to commit crimes on your behalf (or on behalf of your website visitor) or just to sell the data for someone else to use.

3. Functional failures and high costs due to missing security updates

Both the Drupal software and the modules used on your website constantly continue to evolve to provide enhanced functionality and more stability.

With an outdated security update such enhancements can result in downtime on your website and high repair costs if something breaks.

Security updates with Drupal

Drupal distinguishes between security updates for the core and for its modules. Both are always published on

In addition, every security update is classified in a vulnerability level.

The core is the basic software. The modules (e.g., slider) are used in addition on every website and the modules also constantly get new security updates.

Our recommendation

Security updates should always be carried out promptly.

If you do not have a partner who can update your Drupal web page quickly and cost effectively, feel free to contact us and we will gladly assist you with that.

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web