The Future of the

Drupal Admin UI

DrupalCon Amsterdam 2019�Sascha Eggenberger (saschaeggi), Archita Arora (archita-arora), Cristina Chumillas (ckrina)

iD E S I G N I N Gi

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

Initiative

01

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

JS APP

DRUPAL

DESIGN

SYSTEM

DRUPAL CORE

JS

CHANGES

IN CORE

USER

RESEARCH

UI

CHANGES

IN CORE

UX

CHANGES

IN CORE

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

Claro

02

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

Experimental theme�iDrupal Core 8.8.0i

Alpha 5�iSeptember 2019i

Alpha 1�iMay 2019i

First test version�iFebruary 2019i

Default Admin theme�iDrupal 9.xi

Roadmap

stable blockers

Features

Should-have issues for stable release

Could-have issues for stable release

14

9

3

9

9

9

9

A11y

UX

Improvements

Design Improvements

Technical

Debt

Bugs

Performance

Beta Blockers

d.o./node/3066007

Design System

03

clear

accessible

friendly

powerful

Foundation

Major Second - 8:9 - 1.125

Modular scale

-apple-system, BlinkMacSystemFont,

"Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;

We use system fonts

font-family:

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

The Future UI

04

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

Accent colors

Accent colors

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

Get involved

05

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

UX Research and User studies

Claro

#admin-ui-design

#admin-ui

#admin-ui

Figma�tinyurl.com/

drupaldesignsystem

​

​

​

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

​

#DrupalContributions

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

Wrap up

06

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

https://media.giphy.com/media/xULW8wG4l2XMmMkjzq/giphy.gif

We’re out.

Thank you!

https://giphy.com/gifs/obama-mic-drop-out-3o7qDSOvfaCO9b3MlO

https://giphy.com/gifs/dog-what-confused-7K3p2z8Hh9QOI

Any Questions?

What did you think?

​

Thank you! ❤️

Locate this session at the DrupalCon Amsterdam website:

​

​

https://drupal.kuoni-congress.info/2019/program/

​

Take the Survey!

​

​

https://www.surveymonkey.com/r/DrupalConAmsterdam