Claro Admin Theme

Claro: What new Drupal 10 admin panel theme looks like

Drupal 10 was released on December 14, 2022. The new CMS version features, among other things, the Claro default admin theme, which is now included in Drupal core. Managing Drupal sites will soon become a sheer pleasure. Those who do not plan on migrating their websites to Drupal 10 might want to reconsider their plans after reading this post.

Drupal admin theme

Structure

The main expectation for any CMS admin panel design is to be clear and concise. An average content editor has no deep understanding of PHP, HTML, or CSS and cannot ask developers for help all the time. This is why working with content ideally should not be any more difficult than writing texts in Google Docs or building a page in Tilda. The easier it is for users with no coding background to intuitively grasp and master the admin interface, the sooner website owners will reach the goals they set for their online development.

If you are new to Drupal and have never seen the Drupal admin theme, let us list the main sections.

  • Content. All content the administrator and users have created (profile data, comments, etc.) is displayed as a list in this section. This is where the administrator manages existing content and creates new content.
  • Structure. The administrator gets access to different parts of the site—blocks and their arrangement, content types (main page, posts, profile user pics, etc.)—via this section.
  • Appearance. Here the administrator can change the admin panel and switch to a different admin design.
  • Extend. This section is for advanced users who can install and delete modules.
  • Configuration. In this section, you set up everything that can be set up in a website, from language settings and the administrator’s email to cache settings and image sizes.
  • People. If the website content is to be changed by somebody else besides the administrator, this section is used to create profiles and assign roles to such users.
  • Reports. Here you can view website logs, warnings and error messages, update notes, information about the environment, and errors made during the CMS setup.
  • Help. This is where you can find a list of all modules enabled on the website and a description of their features.
Drupal admin theme
Drupal admin panel

What is currently the default Drupal theme?

Starting from Drupal 7, website builders and content managers have been working with the Seven theme, and it is currently the default Drupal admin theme. Over the years, web development and web design got enriched by lots of fresh ideas and standards the Seven theme didn’t comply with. Changes suggested themselves.

It was not an end in itself to release a new admin page design. The principal Internet user, as well as the user of content publishing products like Drupal, does not have an engineering or computer programming degree. It is an ordinary person who wants to share something with the world: thoughts, important information, goods, or services. This is why designers and developers of Drupal core focused their efforts on such users.

How Claro became the default admin theme in Drupal 10

Site developers got the experimental Claro theme with Drupal 8.8. It was created and fine-tuned by Drupal enthusiasts who banded together within the Drupal Admin UI and JavaScript Modernization initiative. They aimed to improve the admin panel for website builders and content creators using the best practices of interface design and JavaScript available at the time.

The work on the admin dashboard design started with consulting administrators and content managers who deal with the Drupal admin panel every day. The study revealed that it was necessary to simplify the user interface, access to documentation, and media file management, as well as to get rid of numerous development terms. To sum up the feedback, everybody wanted to have a convenient tool that would allow flexible customization for specific needs.

In April 2022, it was announced that Claro was stable (i.e. the theme had passed internal tests and had no critical errors) and would be included in Drupal core starting from version 9.4.

You can express your gratitude to the members of the Drupal Admin UX User Study team for the work they have done. Here are their accounts on drupal.org: Sarah Lowe, Michelle Jackson, Cristina Chumillas, Antonella Severo, and Roy Scholten.

Claro administrative interface

New features

Here is the complete list of redesigned interface elements.

Base:

  • Typography
  • Color palette
  • Iconography
  • Layers and surfaces
  • Spacing and sizing

Individual components:

  • Buttons and dropdowns
  • Form fields
  • Selects
  • Basic form controls
  • Tables
  • Messages
  • Tags or Entity reference
  • Breadcrumb and page title
  • Navigation list
  • Details and accordions

Pages:

  • Node edit form
  • Content list
  • Admin forms

Now let us tell you about some particular features.

State-of-the-art UI based on accessibility design requirements

The age-old question is: Drupal or WordPress? The Drupal Admin UX User Study showed that WordPress was the winner in terms of usability. Perhaps one day improvements in the admin panel UI that take into account the requirements of Web Content Accessibility Standards will let Drupal rank highest among CMSs.

For the sake of readability, a 16px font size was selected as the main size. Other sizes were chosen based on the modular scale.

Claro admin dashboard design font sizes
Font sizes in Claro. Source: drupal.org
Special attention was paid to the use of space to make scanning interface elements easier.
Claro admin theme icon sizes
Icon sizes in Claro. Source: drupal.org
Claro admin panel design margins and indents
Indents and margins in Claro. Source: drupal.org
The minimum size of the target area for icons is 24x24 px.
Target area in Drupal admin theme
Target area in Claro. Source: drupal.org
Whatever language, writing system, or operating system a Drupal website administrator uses, the interface looks equally readable thanks to the use of system fonts.
Drupal interface language scripts
Devanagari script in Drupal interface. Source: drupal.org
Drupal administrative user interface
Linux interface, KDE (Oxygen font), and Mac OS (San Francisco font). Source: drupal.org
Input focus and visual prompts help users find their way around the theme parts and elements they are working with. The interactive control elements themselves are brought to AA standard, which makes working with the admin panel on touch screens easier.
Drupal admin page input focus
Input focus in Claro. Source: drupal.org
Icons have been simplified: now they have fewer interlacing lines, clearer forms, and higher contrast.
Icons in Drupal design
Icons in Claro. Source: drupal.org
Elements now have shadows (hi, Material Design for Android).
Shadows of Claro elements
Shadows of Claro elements. Source: drupal.org

Improvements in the WYSIWYG editor

Administrators of Drupal websites will be filling their pages with texts and media files using the WYSIWYG editor, CKEditor 5. Support for the previous version will end in 2023. The promise is that working with CKEditor 5 will feel much like using Microsoft Word and Google Docs. It will be possible to edit content in real time and upload media files using drag and drop.

Cybersecurity

Suppose you are a creature of habit and you are not impressed with the Claro UI/UX. But since the new admin panel theme was announced, the previous one has been receiving less support from the developers and, as a result, is growing vulnerable to cyber threats. This is why you might want to make plans to migrate to Drupal 10—if not for the sake of your own convenience and the convenience of your site administrators, then at least for the sake of the security of your and your clients’ data.

Conclusion

New Drupal themes are not created from scratch but inherit features of the existing ones. Claro is a clone of a current default admin theme—Seven. This is why administrators of Drupal 10 sites are not likely to encounter any issues when using Claro.

Quite the contrary, everything is done to let them feel comfortable. The appearance and behavior of components have been improved, instructions have been built directly into the interface, the principles of design accessibility have been implemented, and the look and feel are similar to those of popular text editors.

Claro stands for “clear” or “clean” in Spanish, and the theme strives to live up to its name. There are reasons to believe that the advent of Drupal 10 will bring about more sites built on this CMS.

You might also like