A presentation at Drupal Mountain Camp 2019 in in Davos, Switzerland by Sascha Eggenberger
The current state of the Drupal Admin UI Redesign 9th March 2019
Sascha Eggenberger Design Unicorn at Unic Drupal.org/u/saschaeggi @saschaeggi
Cristina Chumillas Drupal Dreamer at Ymbra Drupal.org/u/ckrina @chumillas
Archita Arora’s Session
Zero lines of code given.
Initiative Overview User Studies Drupal Design System New Admin UI Theme New content editor experience
Initiative Overview
Why all this?
The Drupal Administration didn’t had a refresh in years
” […] Drupal’s administration UI looks outdated and it’s preventing Drupal agency owners from selling Drupal […] dri.es/refreshing-the-drupal-administration-ui
Admin UI and JavaScript Modernisation Initiative d.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 updating the existing Admin UI with the new design system
In the longer term, we are working on creating a completely new JavaScript-based administration UI
User Studies
Comparative Study Survey Card Sorting Wireframes testing
Survey
What can we improve about the content editorial experience?
→ Modern looking UI → Simplify complex editing experience → Better Media management → More content-role configuration for editors
Card sorting Improve Information Architecture
Comparative Study A. Wordpress with Gutenberg B. Craft CMS
Drupal Design System
powerful empathetic, responsive clear, clean, concise accessible, transparent friendly, respectful
Base
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
What are design components?
Component based Design is the practice of splitting the UI into smaller, more manageable parts with clear names
Components are ireusablei
Components can ievolve over time
Iterative process
The story of a button… https://giphy.com/gifs/hd-Dqmts7W3iiRkA
Specifications
Collaborative Design Tool
Figma
Open Design System
https://www.figma.com/file/Oq WgzAluHtsOd5uwm1lubFeH/D esign-system?node-id=2442% 3A724&viewport=532%2C105 0%2C0.0978964
https://thumbs.gfycat.com/FelineBareGardensnake-max-1mb.gif
https://bit.ly/2Gk1ItH
The new Admin UI
Meet Claro
A ibetteri Mobile Experience
Accessibility is i!important;i
Exciting, right? https://media1.giphy.com/media/l46CkATpdyLwLI7vi/giphy-downsized.gif
But when will Claro ship?
Test version iSpring 2019i
Experimental theme iDrupal Core 8.8.0i* December 2019, d.org/core/roadmap
We won’t stop there…
A new content editor experience https://i.imgur.com/V4O01t8.gif
Even more exciting, right? https://fansofdavid.com/wp-content/uploads/2014/06/tumblr_mjl02zysKA1r0k70yo1_500.gif
Get your hands on!
Help wanted! d.org/project/claro https://giphy.com/gifs/sad-baby-crying-8ykJ4yAnwgK2I
Drupal Design System #admin-ui-design UX Research and User studies #admin-ui Figma Wednesdays, 8pm IST Claro React App & JS Modernization #admin-ui #javascript d.org/project/claro github.com/jsdrupal/ drupal-admin-ui Mondays, 11pm IST
Any Questions? Questions? https://giphy.com/gifs/snl-saturday-night-live-season-42-l0Ex7QyrZeDd2GBLq
https://media.giphy.com/media/xULW8wG4l2XMmMkjzq/giphy.gif
In this session we will be doing an overview of the UI, UX and Research parts of the initiative, the plan and phases, and also a walkthrough of the conclusions we have got to so far.
We will explain and showcase the new design system, wireframes and the current state of designs we are proposing.
Speakers: Sascha Eggenberger (@saschaeggi), Cristina Chumillas (@ckrina)
Here’s what was said about this presentation on social media.
for free. You
can too.