Designing the future of the Drupal Admin UI

Slide 1

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)

Slide 2

Sascha Eggenberger Senior UI / UX Designer at Unic drupal.org/u/saschaeggi @saschaeggi

Slide 3

Cristina Chumillas Front-end Developer at Lullabot drupal.org/u/ckrina @chumillas

Slide 4

Archita Arora UI / UX Designer at QED42 drupal.org/u/archita-arora @architaarora

Slide 5

01 02 03 04 05 06 Initiative Claro Design System The Future UI Get involved Wrap up

Slide 6

01 Initiative

Slide 7

Why?

Slide 8

The Drupal Administration ididn’t had ai irefresh in yearsi

Slide 9

Admin UI and JavaScript Modernisation Initiative drupal.org/about/strategic-initiatives/admin-ui-js

Slide 10

DRUPAL CORE JS CHANGES IN CORE JS APP UX CHANGES IN CORE USER RESEARCH UI CHANGES IN CORE DRUPAL DESIGN SYSTEM

Slide 11

In the short term we plan on iupdating thei iexisting Admin UIi with the new design system

Slide 12

In the longer term we are working on creating ia completely newi administration UI

Slide 13

02 Claro

Slide 14

i1000+i sites are using Claro already* * Reporting number on drupal.org, End of October 2019

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

A ibetteri Mobile Experience

Slide 22

Slide 23

Accessibility is i!important;i

Slide 24

Slide 25

Slide 26

Timeline

Slide 27

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

Slide 28

Roadmap

Slide 29

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

Slide 30

03 Design System

Slide 31

clear accessible friendly powerful

Slide 32

Foundation

Slide 33

Modular scale Major Second - 8:9 - 1.125

Slide 34

We use system fonts font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, “Roboto”, “Oxygen-Sans”, “Ubuntu”, “Cantarell”, “Helvetica Neue”, sans-serif;

Slide 35

Accessible colors

Slide 36

Slide 37

Components

Slide 38

Components can ievolve over time

Slide 39

Slide 40

The history of a button… https://giphy.com/gifs/hd-Dqmts7W3iiRkA

Slide 41

Slide 42

Slide 43

Slide 44

Messages redesign

Slide 45

Slide 46

Slide 47

New Components

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Specifications

Slide 53

Available to ieveryonei

Slide 54

Collaborative Design Tool

Slide 55

Figma https://giphy.com/gifs/love-i-you-that-70s-show-2dQ3FMaMFccpi

Slide 56

tinyurl.com/ drupaldesignsystem

Slide 57

04 The Future UI

Slide 58

Work in progress https://giphy.com/gifs/ease-g4nHG6pBP525q

Slide 59

Proposed Layout changes

Slide 60

Slide 61

Slide 62

Slide 63

New Toolbar concept

Slide 64

Slide 65

New Sidebar region

Slide 66

Slide 67

Sticky Action bar

Slide 68

Slide 69

Design Mockups

Slide 70

Slide 71

Slide 72

Slide 73

Blue isn’t your color? Too much spacing you say? https://giphy.com/gifs/nervous-pDdzX4l9jqA80

Slide 74

Personalization options

Slide 75

Accent colors https://www.drupal.org/project/drupal/issues/3067273

Slide 76

Slide 77

Slide 78

Slide 79

Slide 80

Slide 81

Spacing setting https://www.drupal.org/project/drupal/issues/3067208

Slide 82

Reduce motion https://www.drupal.org/project/drupal/issues/3067273

Slide 83

High contrast mode https://www.drupal.org/project/drupal/issues/3067273

Slide 84

Improved RTL Support

Slide 85

Slide 86

Many more options possible

Slide 87

But there is one more thing…

Slide 88

Slide 89

Slide 90

Dark mode https://giphy.com/gifs/darth-vader-star-wars-voKRB2g96S8q4

Slide 91

Slide 92

Slide 93

Slide 94

Slide 95

Exciting, right? https://giphy.com/gifs/excited-birthday-yeah-yoJC2GnSClbPOkV0eA

Slide 96

A ilong wayi to go

Slide 97

05 Get involved

Slide 98

Get your hands on https://giphy.com/gifs/dog-shiba-inu-typing-mCRJDo24UvJMA

Slide 99

Issue queue moved to icorei

Slide 100

d.org/project/issues/ drupal?component= Claro+theme

Slide 101

tinyurl.com/ drupaldesignsystem

Slide 102

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)

Slide 103

iEvery Wednesday ati 2:30pm UTC Drupal Slack #admin-ui chat only 💬

Slide 104

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

Slide 105

06 Wrap up

Slide 106

i1000+i sites are using Claro already* * Reporting number on drupal.org, End of October 2019

Slide 107

Available as an experimental theme iDrupal Core 8.8.0i December 2019, d.org/core/roadmap

Slide 108

Accessibility is iimportanti

Slide 109

New stuff is iin the worksi

Slide 110

No GIFs were harmed during this presentation. https://giphy.com/gifs/goats-tongue-rTfN2FHPPTABy

Slide 111

We’re out. Thank you! https://giphy.com/gifs/obama-mic-drop-out-3o7qDSOvfaCO9b3MlO https://media.giphy.com/media/xULW8wG4l2XMmMkjzq/giphy.gif

Slide 112

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

Slide 113

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