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! ❤