Redesign of an established Open Source CMS

A presentation at FOSDEM21 in February 2021 in by Sascha Eggenberger

Slide 1

FOSDEM21 Open Source CMS R E D E S I G N O F A N E S TA B L I S H E D @saschaeggi #FOSDEM21

Slide 2

Introduction Sascha Eggenberger Senior UX Designer @Unic @saschaeggi #FOSDEM21

Slide 3

Introduction One of the Lead Designers of the Drupal Design System @saschaeggi #FOSDEM21

Slide 4

Follow me @saschaeggi on Twitter, Drupal.org etc. @saschaeggi #FOSDEM21

Slide 5

Agenda 01 02 03 04 Drupal Redesign Takeaways Questions @saschaeggi #FOSDEM21

Slide 6

01 Drupal @saschaeggi #FOSDEM21

Slide 7

Drupal Drupal is an Open Source CMS/CMF first released 20 years ago @saschaeggi #FOSDEM21

Slide 8

Drupal Latest major release is Drupal 9 @saschaeggi #FOSDEM21

Slide 9

Drupal The Drupal community counts 1.39 million members Source: Wikipedia @saschaeggi #FOSDEM21

Slide 10

Drupal 117,000 active contributors Source: Wikipedia @saschaeggi #FOSDEM21

Slide 11

Drupal UI History @saschaeggi #FOSDEM21

Slide 12

Drupal Drupal 7 Source: http://general-guide.howtodrupal.easternstandard.com/content-management-createmanage-content-how-manage-existing-content/managingexisting-content @saschaeggi #FOSDEM21

Slide 13

Drupal Drupal 8 @saschaeggi #FOSDEM21

Slide 14

Drupal Drupal 9 @saschaeggi #FOSDEM21

Slide 15

Drupal Drupal 9 @saschaeggi #FOSDEM21

Slide 16

Drupal Drupal 9 @saschaeggi #FOSDEM21

Slide 17

Drupal Drupal 9 @saschaeggi #FOSDEM21

Slide 18

Drupal Drupal didn’t had a design refresh in recent years @saschaeggi #FOSDEM21

Slide 19

Drupal “The Drupal Admin UI looks outdated” basically everyone on the internet @saschaeggi #FOSDEM21

Slide 20

02 Redesign @saschaeggi #FOSDEM21

Slide 21

Design System Principles @saschaeggi #FOSDEM21

Slide 22

Design System powerful empathetic clear accessible respectful @saschaeggi #FOSDEM21

Slide 23

Design System Accessibility @saschaeggi #FOSDEM21

Slide 24

Design System @saschaeggi #FOSDEM21

Slide 25

Design System Typography @saschaeggi #FOSDEM21

Slide 26

Design System Modular scale @saschaeggi #FOSDEM21

Slide 27

Design System Colors @saschaeggi #FOSDEM21

Slide 28

Design System @saschaeggi #FOSDEM21

Slide 29

Design System drupal.org/docs/8/core/ themes/claro-theme/design @saschaeggi #FOSDEM21

Slide 30

Redesign Claro @saschaeggi #FOSDEM21

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Claro Included in Drupal Core since Drupal 8.8 as an experimental theme @saschaeggi #FOSDEM21

Slide 36

Claro Stable release of Claro is planned for Drupal 9.2 @saschaeggi #FOSDEM21

Slide 37

Claro drupal.org/slack #admin-ui #admin-ui-design @saschaeggi #FOSDEM21

Slide 38

Redesign Gin Future UI @saschaeggi #FOSDEM21

Slide 39

Future UI Started last year as a customization layer for Claro @saschaeggi #FOSDEM21

Slide 40

Future UI Serves as an ideation for Claro @saschaeggi #FOSDEM21

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Future UI Major Drupal Distributions are using Gin already as their default Admin UI @saschaeggi #FOSDEM21

Slide 51

Future UI Is available as a contrib theme drupal.org/project/gin @saschaeggi #FOSDEM21

Slide 52

03 Takeaways @saschaeggi #FOSDEM21

Slide 53

Takeaways 1 We have a heavy focus on accessbility @saschaeggi #FOSDEM21

Slide 54

Takeaways 2 Claro is on track to get stable with Drupal 9.2 @saschaeggi #FOSDEM21

Slide 55

Takeaways 3 Gin further improves the overall experience @saschaeggi #FOSDEM21

Slide 56

Wrap-up You’ll find more in-depth talks about the Drupal Admin UI online @saschaeggi #FOSDEM21

Slide 57

Design System It’s a community (team) effort Thanks to all contributors! @saschaeggi #FOSDEM21

Slide 58

The end Thank you. https://media.giphy.com/media/nEMmyUp4hl1QOzovKh/giphy.gif