On December 14, 2022, Drupal 10 was launched, introducing various updates such as the Claro default admin theme, which is now a part of Drupal core. This inclusion of the Claro theme promises to make managing Drupal sites a more enjoyable experience.
Enter Claro
The Layout
The primary requirement for any CMS admin panel design is to be straightforward and minimal. Most content editors lack extensive knowledge of PHP, HTML, or CSS and cannot rely on developers for constant assistance. Therefore, working with content should ideally be as simple as writing in Google Docs. The more intuitive and user-friendly the admin interface is for those without coding expertise, the quicker website owners can achieve their online development objectives.
If you are unfamiliar with Drupal and have not yet seen its admin theme, allow us to provide you with a simple outline of the primary sections.
- Content: A list of all created content, including profile data and comments by the administrator and users, is displayed in this section. It allows the administrator to manage existing content and create new content.
- Structure: This section provides access to different parts of the site, such as blocks, content types (main page, posts, profile user pics, etc.), and more. It enables the administrator to configure the website's structure.
- Appearance: The admin panel's look and feel can be customized, and a different admin design can be selected in this section.
- Extend: In this section, advanced users can install and delete modules to add or remove functionality from the site.
- Configuration: All the settings for configuring the website, including language, email, cache, and image size settings, are found in this section.
- People: If someone other than the administrator will be changing website content, this section is used to create profiles and assign roles to those 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: In this section, a list of enabled modules on the website and their features is available, along with a description.
Empowering Changes
The Seven admin theme has been a default since Drupal 7, but the rapid changes and constant needs of web development and design over the years demanded a holistic makeover. As a result, a new admin page design was necessary.
Since the primary users of Drupal and other content publishing products are not engineering or computer programming experts. They are ordinary people who want to share their thoughts, ideas, important information, goods, or services with the world. Therefore, Drupal's core designers and developers have directed their efforts towards these users, making it easier for them to use the platform.
Administration Made Simpler
The perennial debate between Drupal and WordPress often comes down to usability, with WordPress being the preferred choice according to the Drupal Admin UX User Study. However, Drupal's ongoing efforts to improve its admin panel UI with a focus on meeting Web Content Accessibility Standards will eventually help it surpass all other CMSs.
Typography
The main font size in Claro was chosen to be 16px for better readability, with other sizes selected based on a modular scale.
Also, the Claro admin theme places special emphasis on the effective use of space to enhance the user experience by allowing for easier scanning of interface elements.
Iconography
The Claro admin theme is designed with accessibility in mind, such as ensuring that the target area for icons is at least 24x24 px, which improves usability for users with limited dexterity or visual impairments. Additionally, the use of space in the interface is optimized to facilitate scanning of interface elements and enhance the overall user experience.
To preserve the hierarchy and proportions, several standard sizes have been defined.
And finally, The icons are now simpler with fewer lines, clearer shapes, and stronger contrast.
Color Palette
To achieve a visually clean and uncluttered user interface that emphasizes important elements like primary buttons, the claro theme style guide employs a light color palette with a bright blue hue and a selection of neutral gray shades. The proposed changes build upon the existing four primary colors in Seven by incorporating a wider range of gray tones.
WYSIWYG Editor Enhancements
Drupal website administrators will soon have the option to utilize the advanced CKEditor 5 WYSIWYG editor for creating content, replacing the previous version which will no longer be supported after 2023.
The CKEditor 5 interface is designed to feel familiar and user-friendly, resembling the popular tools, Microsoft Word and Google Docs. With CKEditor 5, users can edit content in real-time and easily upload media files using simple drag-and-drop functionality.
Vartheme Upgrades
As the most popular Drupal Distribution, Varbase is upholding its reputation with inventive adaptations and cutting-edge implementations like the Claro-inspired Vartheme for Varbase websites following the Drupal Design System.
This theme provides an even more robust and established version for users with its ready out-of-the-box distribution and specifically focuses on supporting the following:
- Left-to-right (LTR) support with custom tweaks and fixes.
- Right-to-left (RTL) support with a better-selected RTL font.
Varbase is a highly responsive Drupal Distribution, the experts at Vardot are constantly updating and maintaining Varbase with valuable support and contributions from the Drupal community to make sure the most popular Drupal Distribution is up to the highest standards.
The Vardot team's experience with the Vartheme Claro and the Drupal Design System highlights the importance of adhering to design guidelines. This commitment is also reflected in Varbase, Vardot's flagship Drupal distribution. Varbase follows the Drupal Design System to ensure that its themes and modules meet established design standards. By embracing the Drupal Design System, Vardot can create websites that are both visually appealing and user-friendly
Wrapping Up!
Since the new Drupal themes are developed by inheriting features from existing themes, rather than being created from scratch. Claro, the current default admin theme in Drupal 10, is a derivative of the Seven theme. This means that Drupal 10 administrators can transition smoothly to Claro without encountering any issues, as the interface and functionality are similar.
To ensure a comfortable user experience, improvements have been made to the appearance and behavior of components, as well as the implementation of design accessibility principles. Furthermore, instructions are now integrated directly into the interface, and the theme has a similar look and feel to popular text editors.