Designing the future of the Drupal Admin UI

on YouTube ↗51m

" summary

A new Admin theme Claro reaches 1,000+ sites and ships as an experimental core theme for Drupal 8.8; it implements a Drupal Design System stored in Figma, accessibility fixes (WCAG contrast, a distinct green focus ring), larger touch targets for mobile, and new components like chips, action-icon links and range inputs. Front-end stack uses flexbox and CSS custom properties with PostCSS fallbacks for IE11. Roadmap shows nine beta blockers, a sticky action bar prototype, and plans for personalization (accent colors, spacing, RTL, dark mode); testing and issues are requested.

AI-written summary · about

" chapters (41)

1. 0:00DESIGNING The Future of the Drupal Admin UI
2. 0:41Cristina Chumillas
3. 2:26Admin UI and JavaScript Modernisation Initiative
4. 3:35In the short term we plan on updating the existing Admin UI with the new design system
5. 3:53In the longer term we are working on creating a completely new administration UI
6. 4:491000+ sites are using Claro already
7. 6:10A better Mobile Experience
8. 6:41Accessibility is !important
9. 10:54Roadmap
10. 13:27Foundation
11. 14:45Components can evolve over time
12. 15:20The history of a button...
13. 16:27Primary button
14. 17:02Messages redesign
15. 18:57New Components
16. 21:04Specifications
17. 21:57Collaborative Design Tool
18. 22:15Figma
19. 23:26Work in progress
20. 24:09Proposed Layout changes
21. 25:08New Toolbar concept
22. 25:35New Sidebar region
23. 25:59Sticky Action bar
24. 26:38Design Mockups
25. 27:52Blue isn't your color? Too much spacing you say?
26. 28:03Personalization options
27. 28:18Accent colors
28. 28:48Spacing setting
29. 29:16Reduce motion
30. 29:40High contrast mode
31. 29:54Improved RTL Support
32. 30:23Many more options possible
33. 30:54Dark mode
34. 31:28Exciting, right?
35. 32:15Get your hands on
36. 32:36Issue queue moved to core
37. 35:10Available as an experimental theme Drupal Core 8.8.0
38. 35:31Accessibility is important
39. 35:47New stuff is in the works
40. 36:25We're out. Thank you!
41. 36:35Any Questions?

" related talks

• 41mNext Drupal admin UI improvementsCristina Chumillas · Florida DrupalCamp 2023
• 42mDesigning for chaos: The design process behind OliveroJared Ponchot, Jennifer Witkowski · All Things Open 2020
• 01h 00mBuild It Better, Stupid: Using Design Systems for ScalabilityEric Schmidt, Jessica Ito · MidCamp 2020
• 21mDesigning for people is hardGreg Swinehart · rstudio::conf(2022)
• 32mBeyond Mobile: Material Design, Adaptable UIs, and FlutterWill Larche, Anthony Robledo · Google I/O 2019
• 10mDesign Systems Showcase: Designing Performance Friendly & Accessible FoundationsTricia Cigna · Config 2020
• 27mDesign Systems, Not PagesTodd Zeigler · MidCamp 2017
• 32mEmbracing usability and accessibility: a Pace case studyMike Roman, Suzie Miller, Gienna Gaeta · MidCamp 2020