We tested Claro, the new administration theme (backend - Admin Theme) with Drupal 8.8 anticipating its adoption in Drupal 9. And we were won over!...
A great need for innovation in the backend
Drupal is a powerful yet complex CMS. In comparison with other well-known CMS (Wordpress not to mention it), its administration interface can seem intimidating at first. And let's be frank, it still remains so afterwards.
The strength of this CMS is that it allows a large number of tasks to be performed through the administration interface, but unfortunately it is not possible to simplify everything.
Currently in version 8 - version 9 released for the summer 2020 - the admin interface was designed and produced for the release of Drupal 7... almost 10 years ago. That’s close to a century in web time.
Claro: the future default administration interface
So here is the improved user interface of Drupal Admin: Claro . It is the result of the JavaScript and Admin UI Modernization initiative, one of the many teams that are constantly working to improve Drupal on various levels.
Here is the figma link.
Principles and characteristics of the Claro theme
The general idea of the JavaScript and Admin UI Modernization initiative is to make Drupal compatible with decoupled applications and to make browsing easier for end users.
Since the launch of Drupal 8.8, the Claro admin theme has been introduced as a new experience and as a first release to come with native Composer support .
Features such as a new color scheme, higher contrasts, touchscreen compatibility, redesigned content pages, image upload files and widgets have been planned and shipped in Claro.
This initiative is a distant goal as its realization can take several years. It mainly aims to update Drupal APIs and the underlying JavaScript code.
This is why Claro appeared as an early version with this goal. This new theme follows the guidelines of the new Drupal 8 admin theme design, here are some examples:
- precise shapes and accessible contrasts;
- a hierarchy and clear relationships between the elements;
- a clear objective for each element;
- rational use of negative space;
- optimal readability;
- more cheerful colors.
Check out this latest update on the new Drupal 8 admin theme (Claro):
Go?
If your site doesn't have a lot of contributed modules, you can go ahead and choose this new theme for your administration, you won't regret it.
If not, we recommend that you test thoroughly and make sure you can rollback easily. Until recently the Paragraphs Module that we use frequently was problematic with the new theme. Version 8.8 has improved things for simple issues.
Maybe version 8.9 / 9.0 will fix these problems for all modules?
In the meantime, if you have any problems with your Drupal administration interface, do not hesitate to contact us.
Resources -
- The theme on drupal.org - https://www.drupal.org/project/claro
- Issues - https://www.drupal.org/project/ideas/issues/3017785
- Figma - www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Drupal-Design-system
- UI admin modernisation Initiative- https://www.drupal.org/about/strategic-initiatives/admin-ui-js
Work history
The work has been discussed in drupal.org to enable early adopters to start using drafts of the theme. Claro is also included in the Lightning installation profile. It is therefore used by almost 400 sites. The Drupal team also received bug reports clearly indicating that Claro had been used on production sites.
One of the main reasons that the early versions of Claro could be used is that it was designed on Seven. Components or user interfaces that were not updated remained functional throughout the process. To make the interfaces more attractive, Claro uses a cooler color scheme and provides a higher color contrast. The new templates will also make Drupal easier to use for touchscreens by increasing the size of all form controls. The new design also covers front-end components, such as the toolbar, quick edit, and context links.
The work was facilitated by the use of Figma, allowing several designers to work at the same time, and to annotate the work produced in groups.
The components
Once the interface’s graphic identity was established, the components followed. The method used is "Atomic Design": from micro-elements evolving into final interfaces (atoms> molecules> organisms> templates> page).
> Buttons and input fields - They have been revised in order to be better identified as clickable elements belonging to a hierarchy. In this version of the Drupal administration interface, efforts on UX are also focused on the label, checkbox and radio buttons fields. The goal is to keep the fields and labels simple, including graphic elements allowing them to be identified as editable fields. The statuses are more easily identifiable : active element, hover , focus , error, deactivated, inactive, etc.
> Tables - Spaces between the lines have been revised in order to make them easier to read. Reading indices, such as icons, have been inserted in table headers to indicate additional options (sort, direction of sort, etc.).
> Alert messages - The message appears in a colored band within a large dark band .
> Navigation bar, list, accordions - The objective is to unify this set of elements, while categorizing the behavior of each.
The pages
Once each component has been established, its behaviors and variations, here are the pages (or the template):
> Content editing pages - The change in perception is based on increasing the size of the text, increased spacing, simplification of elements and (lighter) colors. This way the content will have more relevance because only the targeted, active or clickable elements are highlighted.
> Pages listing content / article - Increasing the text size and the minimum line height, as well as the color palette, focus attention on the elements that are subject to an action or on the content of a busy UI. In this page, the pagination component and the "add content" element are much more visible.
