iD E S I G N I N Gi

The Future of theDrupal Admin UI
DrupalCon Amsterdam 2019
Sascha Eggenberger (saschaeggi), Archita Arora (archita-arora), Cristina Chumillas (ckrina)

Sascha Eggenberger
Senior UI / UX Designer at Unicdrupal.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
ClaroDesign 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 COREJS
CHANGESIN COREJS APPUXCHANGESIN COREUSER
RESEARCHUI
CHANGESIN COREDRUPAL
DESIGNSYSTEM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 newiadministration UI

02Claroi1000+i sites
are using Claroalready** Reporting number on drupal.org, End of October 2019A ibetteri
Mobile ExperienceAccessibility isi!important;i

Timeline

noisret v 9i

es y 201ttrsFir bruaiFe1 ia9lph 01

A ay 2Mi19iem
hlt

ta 8.0i
ne 8.

205r
rimCorea beehplp
Al ptemEx rupaiSeiDem
he .xit al 9nip

Dm Drudi
Atlu
afee

RoadmapFeatures

A11y

UX
Improvements

DesignImprovements

TechnicalDebt

Bugs

Performancestable blockers

Beta Blockers

14939999

Should-have issues for stable release

Could-have issues for stable released.o./node/3066007

03

Design Systemclearaccessible
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 canievolve over time

The history of abutton...
https://giphy.com/gifs/hd-Dqmts7W3iiRkA

Messages
redesignNewComponentsSpecifications

Available toieveryonei

Collaborative
Design Tool

Figmahttps://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StickyAction bar

DesignMockups

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 contrastmode
https://www.drupal.org/project/drupal/issues/3067273

Improved RTLSupport

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 andUser studies#admin-ui

Figma
tinyurl.com/
drupaldesignsystemClaro#admin-uid.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 forcontribution opportunitiesThursday, October 31, 2019

MentoredContribution

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 Claroalready** Reporting number on drupal.org, End of October 2019

Available as anexperimental 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! ❤