If you are a Drupal user, you are already aware of how the platform helps you curate amazing user experiences. Drupal 9 is already delivering rich user and editor experiences through the WYSIWYG text editor and the Media Library.
It doesn’t stop at that. Drupal 10 is up for release in December 2022. The new version comes with exciting new features and capabilities. An interesting development in the UI landscape is the launch of new default themes in Drupal 10 that guarantee a better user experience than Drupal 9.
Each version of Drupal is made up of a strong and complex suite of layers that add to its experience and security. Drupal 10, an enhanced Drupal 9, is stronger and better at meeting the needs of the end users, especially with updated UI. Consider how Drupal UI has evolved over the years.
Drupal UI: The past and the present
The original Drupal theme was designed by developers and made for developers. As it evolved, the Views module made it possible for site builders who were not developers to create pages. These patterns were incorporated in other Drupal components, such as the Field UI, which enabled site developers to create complex pages without a developer’s help. Next, Drupal focused on including the requirements of content editors who had to struggle with menus that were not built for them.
This evolution brings us to the present, where Drupal UI is user-friendly and easy to use, due to multiple modules, such as the Layout Builder, Media, and Themes. Currently, Seven is the default admin theme and Bartik is the default front-end theme in Drupal 9. Drupal 10 ushers in new default themes with enhanced and intuitive properties.
Claro: New default administration theme in Drupal 10
Claro will replace Seven as the new default admin theme in Drupal 10. Seven was introduced in Drupal 7 in 2011. UI design trends have certainly modernized and evolved after more than a decade. A completely new JavaScript-based admin UI was required for Drupal to remain competitive with other open-source CMSs.
Claro was built as a part of the Admin UI Modernization initiative, to make Drupal compatible with decoupled apps and provide smoother navigation. Claro was launched with the Drupal 9.4 update and is currently available to use. It will become the default admin theme for Drupal 10 upon release.
Claro: Features and guidelines
Claro comes with enhanced features, such as a new color scheme, redesigned content pages, touchscreen readiness, higher contrasts, and file & image upload widgets. Claro uses a new design system that is more user-friendly and accessible than the earlier themes. It is visually simple with minimalist iconography, a high-contrast color palette, and curated visual cues, like dept and shadows.
Claro follows the guidelines of the Drupal admin theme design which include:
- Cheerful colors
- Precise shapes
- Accessible contrasts
- Clear objective for each element
- Clear hierarchy between elements
- Rational use of white space
- Optimal readability
Olivero: New default front-end theme in Drupal 10
Olivero will replace Bartik as the new default front-end theme in Drupal 10. Bartik was launched with Drupal 7 in 2011. While Bartik is responsive to mobile devices and meets Drupal 9’s mobile-first requirements, its design is outdated. Bartik is not compatible with the latest functionalities and does not showcase the visual appeal of Drupal completely.
The idea for a Drupal 9 default theme grew into a Drupal 9 theme initiative. The goals of the initiative were to update to a modern design that stays relevant for the next 5-10 years, supports Drupal’s new functionalities, and is WCAG AA compliant. Olivero was designed keeping these goals in mind. While Olivero is currently available to use with Drupal 9, it will become the default front-end theme for Drupal 10.
Olivero: Features and guidelines
Olivero is designed for optimal compatibility with Drupal’s current site-building features. It is WCAG AA compliant right from the start and showcases an accessible and beautiful interface with a high-contrast color palette and ample whitespace.
The key design features and guidelines of Olivero include:
Color Palette
With a bright blue base color and neutral grays for balance, Olivero highlights a bright and modern look that aligns with Drupal branding.
Header & Navigation
Olivero offers a header that collapses into a hamburger menu upon scrolling. Users can easily access the menu on longer pages, and wider pages with multiple first-level menu items.
Buttons
Olivero’s buttons are in bright blue to be easily recognizable as clickable elements. The primary button style is filled with color and the secondary button style is outlined.
Typography
With an 18px font for the body copy, Olivero’s other UI elements, such as quotations and headers are created based on this font. The font size is adjusted for smaller screens ensuring consistency and the right proportions.
Messages
Website messages in Olivero are in a bright color to make them stand out visually. Icons are utilized to support message types and the readability is optimal.
Forms
Olivero’s forms are simple with a uniform look and a color bar on the left. Labels are positioned above the fields making the forms more accessible and recognizable.
Sidebar
Olivero provides a single sidebar instead of two to help highlight additional content. The sidebar region floats right next to the primary content.
Breadcrumbs
Breadcrumbs are located on top of the page with the link color the same as the other links on the website. On mobiles, breadcrumbs spill off the edge where users can swipe from side to side to view the complete breadcrumb trail.
Claro & Olivero: Enhancing intuitive experiences
To fully reap the benefits of the latest Drupal UI, you need to upgrade to Drupal 10. Other than an enhanced UI, Drupal 10 also brings in exciting new features that enhance digital experiences.
If you are using Drupal 9, you can prepare to migrate to Drupal 10. If you are using an older version of Drupal, you might have to switch over to Drupal 9 before upgrading to Drupal 10. Consider an efficient strategy to migrate to Drupal 10 without any hassles.
QED42 has helped Fortune 200 and Fortune 500 companies to migrate to the latest Drupal version. If you are planning for Drupal migration, chat with our Drupal experts for a free website audit and a curated Drupal migration strategy that works for your business.