Claro: A modern outlook of Drupal admin UI

There’s no denying that Drupal is a complex ball. With numerous modules in use and years old structure, every Drupal has a certain degree of complexity attached to it. Opposed to the inherent flexibility sought by the software developers, Drupal has a strong suit of layers that makes its a secured CMS. 

Therefore, the layers of complexity are exactly what makes Drupal stronger and better at catering to the end-users’ need. Similarly, there’s another common response among such concerns - outdated administration UI. 

Dries also agrees that “This critique is not wrong. Drupal's current administration UI was originally designed almost ten years ago when we were working on Drupal 7. In the last ten years, the world did not stand still; design trends changed, user interfaces became more dynamic and end-user expectations have changed with that.”

Why Drupal 8 needed a new administration theme

With Drupal 8 the idea of a new admin UI came up and here’s why we really needed it:

• It was time to make the amends and not let Drupal lose in any aspect, including the competitive admin UI of other open-source CMSes. 
• When Dries took to it, he sought the suggestions from many Drupal agencies to figure out the gravity of the issue. 
• The current admin UI was created in 2009 with Drupal 7. Almost a decade later, a lot of modernization has taken place in terms of UI design trends. 

A modern theme for the admin UI was then agreed upon to be introduced as Dries announced that “we plan on updating the existing administration UI with the new design system. Longer-term, we are working on creating a completely new JavaScript-based administration UI.”

So, here is the improved Drupal Admin UI: Claro 

Claro theme principles and features

The new admin theme was named Claro and was built as a part of the Admin UI Modernization initiative. The whole idea of the Admin UI & Javascript Modernisation Initiative is to make Drupal compatible with decoupled applications and navigation smoother for end-users. 

Since the launch of Drupal 8.8, the Claro administration theme was introduced as a new experiment and as a first release to come with native Composer support.

Features like a new colour scheme, higher contrasts, touchscreen readiness, redesigned content pages, files and image upload widgets were planned and completed with Claro. 

The Claro theme was built in accordance with the Admin UI & JavaScript Modernisation Initiative. 

This initiative is a far fetched goal as it can take several years to be completed. It primarily seeks to update Drupal’s APIs and underlying JavaScript code. Therefore, Claro came into the picture as an early version of the goal. This new theme follows the guidelines of the new Drupal 8 admin theme design, some of which are as follows:

• precise shapes and good contrasts
• clear hierarchy and relations between elements
• a clear purpose for each element
• rational use of white space
• optimal readability
• emphasis on what matters
• visual clues
• friendly and cheerful colours

Watch this latest update on Drupal 8's new administration theme (Claro) from Dries:

Design System of Claro

Drupal created a Design system to define the principles, patterns and tools that will be integrated while building the Drupal administrative user interface. The goals, principles and visual design language along with a visual interface library (components, patterns and animation) was defined for standardization of the design system. 

The Original Seven’s style guide visual principles adapted were: a) Powerful, b)empathetic, responsive, c) Clear, clean, concise, d) accessible, transparent, e) Natural, f) Friendly, collaborative, democratic, respectful. 

Know more about the design system here. 

Conclusion 

The next step towards the modernization of the admin UI is Olivero, one of the Drupal core initiatives which seek to create a new default front-end theme for Drupal with a modern look and feel. It aims to promise improvements in front-end theme and much more. What was just an idea in a hotel lobby during DrupalCon Seattle 2019 became a full-blown project and a Drupal core initiative in no time. Thus, Olivero was initially slated for inclusion in core in Drupal 9.1. More on that later. 

To know more about the upcoming inititatives, ping us at [email protected]