-
Drupal Admin UI Redesign
The current state of the
9th March 2019
-
Sascha Eggenberger
Design Unicorn at UnicDrupal.org/u/saschaeggi
@saschaeggi
-
Cristina Chumillas
Drupal Dreamer at YmbraDrupal.org/u/ckrina
@chumillas
-
Archita Arora’s Session
-
Zero lines of code given.
-
Initiative OverviewUser StudiesDrupal Design SystemNew Admin UI
ThemeNew content editor experience
-
InitiativeOverview
-
Why all this?
-
The Drupal Administration didn’t had a refresh in
years
-
[...] Drupal's administration UI looks outdatedand 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
-
JS APPDRUPALDESIGNSYSTEM
DRUPAL CORE
JSCHANGESIN CORE
USERRESEARCH
UICHANGESIN CORE
UXCHANGESIN CORE
-
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
-
UserStudies
-
Survey
Card Sorting
Comparative Study
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 sortingImprove Information Architecture
-
Comparative Study
A. Wordpress with Gutenberg
B. Craft CMS
-
DrupalDesign System
-
powerfulempathetic, responsiveclear, clean, conciseaccessible,
transparentfriendly, respectful
-
Base
-
MAJOR SECOND - 8:9 - 1.125
Modular scale
-
-apple-system, BlinkMacSystemFont,"Segoe UI", "Roboto",
"Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue",
sans-serif;
font-family:
We use system fonts
-
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
-
OpenDesign System
-
https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Design-system?node-id=2442%3A724&viewport=532%2C105
0%2C0.0978964
-
https://thumbs.gfycat.com/FelineBareGardensnake-max-1mb.gif
-
https://bit.ly/2Gk1ItH
-
The newAdmin 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 willClaro ship?
-
Test versioniSpring 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
-
#admin-ui-design
UX Research and User studies
Drupal Design System Claro
React App & JS Modernization
#admin-ui #admin-ui #javascript
Figma d.org/project/claro
github.com/jsdrupal/drupal-admin-ui
Wednesdays, 8pm IST Mondays, 11pm IST
-
Questions?Any Questions?
https://giphy.com/gifs/snl-saturday-night-live-season-42-l0Ex7QyrZeDd2GBLq
-
https://media.giphy.com/media/xULW8wG4l2XMmMkjzq/giphy.gif
