A presentation at DrupalCon Europe in in Amsterdam, Netherlands by Sascha Eggenberger
iD E S I G N I N Gi The Future of the Drupal Admin UI DrupalCon Amsterdam 2019 Sascha Eggenberger (saschaeggi), Archita Arora (archita-arora), Cristina Chumillas (ckrina)
Sascha Eggenberger Senior UI / UX Designer at Unic drupal.org/u/saschaeggi @saschaeggi
Cristina Chumillas Front-end Developer at Lullabot drupal.org/u/ckrina @chumillas
Archita Arora UI / UX Designer at QED42 drupal.org/u/archita-arora @architaarora
01 02 03 04 05 06 Initiative Claro Design System The Future UI Get involved Wrap up
01 Initiative
Why?
The Drupal Administration ididn’t had ai irefresh in yearsi
Admin UI and JavaScript Modernisation Initiative drupal.org/about/strategic-initiatives/admin-ui-js
DRUPAL CORE JS CHANGES IN CORE JS APP UX CHANGES IN CORE USER RESEARCH UI CHANGES IN CORE DRUPAL DESIGN SYSTEM
In the short term we plan on iupdating thei iexisting Admin UIi with the new design system
In the longer term we are working on creating ia completely newi administration UI
02 Claro
i1000+i sites are using Claro already* * Reporting number on drupal.org, End of October 2019
A ibetteri Mobile Experience
Accessibility is i!important;i
Timeline
n o i s r ve 9i t 1 s te ry 20 t s a Fir bru e iF 1 i a 9 lph 01 A ay 2 M i 19i em h lt ta 8.0i n e 8. 20 5 r rimCore a be e h p l p Al ptem Ex rupa iSe iD e m he .xi t al 9 n i p D m Dru d i A t l u a f e e
Roadmap
Features A11y UX Improvements Design Improvements Technical Debt Bugs Performance stable blockers Beta Blockers 14 9 3 9 9 9 9 Should-have issues for stable release Could-have issues for stable release d.o./node/3066007
03 Design System
clear accessible friendly powerful
Foundation
Modular scale Major Second - 8:9 - 1.125
We use system fonts font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, “Roboto”, “Oxygen-Sans”, “Ubuntu”, “Cantarell”, “Helvetica Neue”, sans-serif;
Accessible colors
Components
Components can ievolve over time
The history of a button… https://giphy.com/gifs/hd-Dqmts7W3iiRkA
Messages redesign
New Components
Specifications
Available to ieveryonei
Collaborative Design Tool
Figma https://giphy.com/gifs/love-i-you-that-70s-show-2dQ3FMaMFccpi
tinyurl.com/ drupaldesignsystem
04 The Future UI
Work in progress https://giphy.com/gifs/ease-g4nHG6pBP525q
Proposed Layout changes
New Toolbar concept
New Sidebar region
Sticky Action bar
Design Mockups
Blue isn’t your color? Too much spacing you say? https://giphy.com/gifs/nervous-pDdzX4l9jqA80
Personalization options
Accent colors https://www.drupal.org/project/drupal/issues/3067273
Spacing setting https://www.drupal.org/project/drupal/issues/3067208
Reduce motion https://www.drupal.org/project/drupal/issues/3067273
High contrast mode https://www.drupal.org/project/drupal/issues/3067273
Improved RTL Support
Many more options possible
But there is one more thing…
Dark mode https://giphy.com/gifs/darth-vader-star-wars-voKRB2g96S8q4
Exciting, right? https://giphy.com/gifs/excited-birthday-yeah-yoJC2GnSClbPOkV0eA
A ilong wayi to go
05 Get involved
Get your hands on https://giphy.com/gifs/dog-shiba-inu-typing-mCRJDo24UvJMA
Issue queue moved to icorei
d.org/project/issues/ drupal?component= Claro+theme
tinyurl.com/ drupaldesignsystem
Drupal Design System #admin-ui-design UX Research and User studies #admin-ui Figma tinyurl.com/ drupaldesignsystem Claro #admin-ui d.org/project/issues/ drupal?component= Claro+theme Every Wednesday at 2:30pm UTC Drupal Slack #admin-ui chat only (no audio or video)
iEvery Wednesday ati 2:30pm UTC Drupal Slack #admin-ui chat only 💬
Join us for contribution opportunities Thursday, October 31, 2019 Mentored Contribution Contributor Workshop Contribution 9:00–18:00 Room: Europe Foyer 2 9:00–14:00 Room: Diamond Lounge 9:00–18:00 Room: Europe Foyer 2 #DrupalContributions
06 Wrap up
i1000+i sites are using Claro already* * Reporting number on drupal.org, End of October 2019
Available as an experimental theme iDrupal Core 8.8.0i December 2019, d.org/core/roadmap
Accessibility is iimportanti
New stuff is iin the worksi
No GIFs were harmed during this presentation. https://giphy.com/gifs/goats-tongue-rTfN2FHPPTABy
We’re out. Thank you! https://giphy.com/gifs/obama-mic-drop-out-3o7qDSOvfaCO9b3MlO https://media.giphy.com/media/xULW8wG4l2XMmMkjzq/giphy.gif
Any Questions? https://giphy.com/gifs/dog-what-confused-7K3p2z8Hh9QOI
What did you think? Locate this session at the DrupalCon Amsterdam website: https://drupal.kuoni-congress.info/2019/program/ Take the Survey! https://www.surveymonkey.com/r/DrupalConAmsterdam Thank you! ❤
The Admin UI & JavaScript Modernisation initiative is re-imagining the current content authoring experience and site administration. By now you might have seen the new Admin UI “Claro” out in the wild already, but this is just an intermediate step to apply the newly crafted Drupal Design System and deliver a first change to Drupal Core. In this session we’ll talk about what we’re working on for the future of the Drupal Admin UI – the so called “next-generation Admin UI experience” going through the following main topics:
Speakers: Sascha Eggenberger (@saschaeggi), Archita Arora (@archita-arora), Cristina Chumillas (@ckrina)
Here’s what was said about this presentation on social media.
for free. You
can too.