Cristina Chumillas is a co-organizer of the Admin UI & JavaScript Modernisation Initiative. In this session she will talk about how they are working on the new Drupal Design System for the Admin UI for Drupal and the new administration theme Claro. We will get an intro of the tools used and the workflow they are following, a showcase of the Design System itself, how they are working on Claro and what changes are planned.

1. Drupal Admin UI
Present and future of the

2. First, the Past.

3. https://www.slideshare.net/WEBSOLUTIONSHR/history-of-drupal-from-drop-10-to-drupal-8-59198423

4. https://www.marcdrummond.com/drupal/2011/05/20/new-views-interface-david-rothstein-drupal-camp-twin-cities-2011
The result is a totally new experience
for site builders who are using Views (…)
“

5. The focus on the UI
was on site builders.

6. < / >

7. < / >

9. focused UIs.

10. Admin UI Initiative
History

11. design
JS
Replace the whole UI
with Javascript.
Redesign the whole UI.

12. user
study
Survey +150
Card Sorting +200
Comparative Study

13. user
study Feedback:

14. user
study Modern looking UI

15. https://dri.es/refreshing-the-drupal-administration-ui

16. user
study Better Media management

17. user
study Better Media management
Media and Media Library are in Core 🎉

18. user
study
Simplify complex editing
experience

19. user
study
Simplify complex editing
experience
Which one?

21. Layout Builder 🎉

26. user
study
Fear to Save:
Preview the content

29. user
study
Fear to Save:
Losing data

31. user
study
Fear to Save:
Losing data
https://www.drupal.org/project/drupal/issues/3029488
https://www.drupal.org/project/autosave_form

32. user
study
Content-role configuration
for editors
https://www.drupal.org/project/drupal/issues/3059984

34. Redesign
Admin UI

35. JS Drupal
theme
new
design

36. We needed a new design for Drupal 9.

37. Claro
New core administration theme

41. Modernization of Frontend
developer tools
https://www.drupal.org/docs/frontend-developer-tools-for-drupal-core

43. We needed to use the same design in both UI.

45. Design System
this is why we created a

46. We used Figma.

49. Automatic integration with
external style guides
Storybook, Fractal, PatternLab…

52. What’s coming
Admin UI

53. Color
Site theme customizations
https://www.drupal.org/project/ideas/issues/3090894
Palette

56. font size, hight contrast…
User UI customizations
https://www.drupal.org/project/drupal/issues/3067273

58. layout changes
Future

63. Outside the Initiative
More things happening

64. Dashboard
User
https://www.drupal.org/project/dashboard

65. Content Forms
Future of
https://www.drupal.org/project/ideas/issues/3091766

67. Content Strategy
is key on Drupal

68. Content
is key on Drupal

69. Content
consumed?
Where is the

70. API-First
https://www.drupal.org/about/strategic-initiatives/api-first

71. https://www.drupal.org/project/ideas/issues/607396
Fieldable fields
1 cup of flour
QUANTITY UNIT INGREDIENT
Field Union, Rich Field, Multifield…

72. reflexions
some

73. Drupal 9 is not the same
product as Drupal 7 was.

74. Core workflows are slow.
Be aware:

75. Long term involvement
has a huge impact.

76. We need the people
(and companies)
to move forward the project.

77. Contribution
will give more visibility
to your company.

78. d.o./about/strategic-initiatives
d.o./project/ideas

79. Admin
UI
UX
meetings Olivero
#admin-ui
#admin-ui-design
#ux #d9-theme

80. #admin-ui
#admin-ui-design
ckrina - @chumillas
drupal.org/slack

81. Thank you!