 Hello and welcome. Good morning, afternoon or night, depending where you are. So welcome to my talk, Facelift, your administrative experience. It's already quite late over here, so I'm based in Europe and it's already after midnight. So let's just start and dive in. My name is Sascha Eckenberger. I'm a senior UX designer at UNIC. I'm based in Europe, specifically in Zurich, Switzerland. I'm one of the lead designers of the Drupal design system, which also includes Claro and I'm also the creator of Chin. I'm also a maintainer of several modules and I'm with the Drupal community for around nine years or a bit more. You can find me at Sascha Eckenberger basically on like everywhere social media like Twitter, Drupal.org and so on. And this is the agenda for today. So first up, we will talk about Claro. Then we will talk about Chin and then we do a quick wrap up, so like the key takeaways of this presentation. And afterwards we will take questions or I will take your questions. Feel free to come up with questions. So first up, Claro. Claro was basically like the administration theme. We're currently working in the Drupal community. There's like the admin UI and JavaScript initiative. So we have a lot of contributors and whenever I refer to we as a community or just we, this basically means there are like a lot of people behind this. It's not just me. There's like a bunch of people. And also to mention that everybody is welcomed. So feel free to join as well the initiative if you like it. If not, that's fine too. The first thing we created for Claro was basically as you know like a new design system. So like we call it like the Drupal design system which we basically outlined all the different elements we need in the admin UI. We had a strong focus on accessibility. So you can call it like accessibility first approach. So everything was basically centered around this approach to make it accessible you know like the human-centered design approach but always like with a strong eye on accessibility and taking decisions with accessibility as a key feature. So Claro started as a contract theme. So basically as a contract theme we could you know like move on with things faster than it would be just you know like in core from the beginning. So it was basically available from Drupal 8.8 onwards. It was included into you know like into Drupal 8.8 core as an experimental theme. So basically it's already there. You can enable it. You can test it. You can try it. You can use it already today. And I think we just move on to how does Claro look like? So for those of you who aren't familiar with Claro I wanted to share you some screens of how Claro looked like. So this is not the talk where we talk about the design system or specifically about the initiative. There are like other talks where you can find online where we basically do you know like a deep dive into those topics. So if you're familiar with salmon or with Drupal in particular this should be like a familiar screen. This is the content overview. What we tried to achieve with Claro to move it you know like in a fast pace was basically with the new design language or with the new design system we tried to basically just you know like refresh all the component which are there already. So if you're familiar with seven and you enable Claro you basically have every single function in the same place where it was before. But spoiler alert this is not basically the end. This is just the beginning. So this is the node edit form. Yeah as you would expect it looks similar to seven just with the refresh design nothing spectacular there. I think the most important part here even if you know like from a design point of view it doesn't look that much different to what we had before was that taking all those decisions in for you know like to make it accessible to make it work in high contrast mode and so on was basically a stretch also for the frontend team for the implementation. Screen just like the block configuration as you can see we have like a tap element there as well. We added some depth for certain fields also like you know for better to distinguish these elements a bit better from each other. This is the configuration overview and this is basically just a structure overview. So the stable release of Claro as I mentioned before it's currently available as an experimental theme so you have to enable it to being able to use it. The stable release of Claro was planned with Drupal 9.0 but unfortunately that didn't happen for you know like several reasons but basically we were behind schedule and because most of the people are just contributing in their free time you know like people are on and off so things can be a bit delayed and take longer and we really strive for this you know like that we implement like the accessibility features perfectly and this takes time. So the new plan was to basically have it stable by 9.1 but that didn't happen either because of the same reasons. There were even more and more feature requests coming in and things we want wanted to consider to include for a stable release so you know it got a bit postponed and we needed more time. But so this is basically the new roadmap so the stable release of Claro is now planned to come with Drupal 9.2 which is due sometime in summer next year like I think around June. So this is basically the goal we strive for. In the long term we well this is the plan that Claro will replace seven in core once it reaches stable. And you might ask okay what's left for a stable release because I was referring to it as an experimental theme. It's already quite stable you can use it we use it in a lot of different projects in production. It's more that you know like some some finished touches of the media library for example contextual links toolbar style update and stuff like that is maybe not perfectly from a visual point of view but it's it's for sure already usable also for production use. There's a ticket called roadmap to stabilize Claro. It's this issue number so if you go to Drupal work in the core issue queue you can find basically all the open tasks which are needed for a stable release you know like for minor releases nice to have box stuff like that so you have like a good overview of what's open. If you're familiar with you know like Drupal org you can also already step in and you know help the team out and give a helping hand and try to contribute to Claro. So how can you do that how to get involved? The easiest thing to do is go to Drupal.org slash Slack you know there's like a Drupal Slack group there's these two channels admin UI and admin UI design. The first one is for general contribution like front end you know like everything which goes into contribution. The second one is more focused for designers so if there are any designers listening and you want to help us out join this channel this is basically where all the design happens and everybody else for sure is also welcome to join there of course Chin. So it's maybe not what you're thinking it's not like this type of Chin it's not like you know the drink. The name Chin basically comes from the word origin. So we just shortened the name origin because of several reasons and that like a major game publisher owns this name to Chin and why we or why I wanted to you know like choose this name was because it should serve as a source of inspiration and ideas as well for Claro. So talking about that is is there a relation between Chin and Claro then? Yes there is there's a strong connection between the two basically Chin uses Claro as a base theme so it's kind of a sub theme but also it's standalone theme and I wanted to give you a brief history of like how Chin became a thing. So the whole thing started last year as a customization layer for Claro so we had the need at Unique and also with you know like when I was talking to others with agencies there was a need from a customer point of view to customize the UI from you know just for branding reasons they could integrate Drupal more with their branding which means like placing their logo using like internal color schemes like the accent color and stuff just to make it appear nicer to clients. So this is basically where version one started it was just like this wrapper which added you know like some bunch of features like like the accent color which I mentioned but eventually Drupal cum Amsterdam happened and as you know we had this talk designing the future of the Drupal admin UI and eventually a few weeks or like the design process was much longer but like a few weeks before we hold this talk in Amsterdam we basically like when I refer to we is like you know like the lead designers of the initiative we came together and we're thinking like okay should we rethink some stuff of or should we show off like a potential future UI so what Claro could maybe become in the future because as I mentioned before we don't want to stop with how Claro currently looks like. So this is basically what we came up with it was a completely new layout it has like a cyber navigation it has like a sticky you know like a sticky bar at the top with you know like actions in there it's more compact you know you have some visual clues so it was a complete new layout and it seemed that people liked it especially like the node edit form which I think if you're a content editor listening to this talk and if you have a side which has like you know a lot of elements on it like let's say paragraphs or fields or whatever you're using and you have a very long page the safe button is always out of reach because if you want to change like the first paragraph you need to scroll down to the end to basically save your note and this is basically one of the patterns we wanted to change to have like the so-called call to action buttons like the safe button and preview button always on hand so we moved them to the sticky to the sticky bar at the top which would always be sticky there even if you scroll down the content and and you know do your content editing or creating content um this has some uh you know some implic implications from a technical point of view because uh actually it's not part of the you know of the form itself but I won't go into details for that so that all said I was basically the you know like the preparation with all the feedback we gathered and like people really like to see something like that so that we have a completely new UI I basically was was trying to expand this chin layer for Clara and try to implement this new design language which I referred to as as future UI so let's have a close look at what chin currently in version 3.0 um looks like so this is basically how chin looks like so um most of the stuff you saw before with like all the layout changes we we wanted to do are basically already in place here so we have the sidebar we have the sticky bar we have always the call to action on the top right everything is in there so this is the all-new layout um we also have like a clear distinction um so we we added layers to group content better you know that you can um but it's easier for the eye to track you know like to to get the informations which are belong together um then for the note edit form we basically added just what you saw before so the sidebar is now a real sidebar we have the sticky elements um there's another example of like the use of paragraph um there's also talk improve the content editor experience where I deep dive into those topics how you can basically provide a better content editor experience at DrupalCon Europe this year later in December so we strive for this better editor experience um basically the layout resembles something like a content editor knows like a word or a google doc so it resembles like in the middle like this content piece which is also visually layout as a as a document which really helps the content editors to focus on the content but not everybody is a huge fan of the sidebar approach for the navigation so um basically we added some some other you know like ideas there so we have a horizontal toolbar we have the the original toolbar you know from Drupal basically you can choose the style you want we also have like a refreshed media library which is just like visually nicer than what you have in core also contextual information is key so basically something pops up if you really need it otherwise we hide it you have a lot more to customize here so you can change accent color stuff like that you can even go fully in a dark mode so you can use a dark mode the whole admin UI a lot of modules are supported so if you're if you're you know like into these things you can also um go fully dark um there are also other modules like the chin login module which um just gives you like a seamless um you know like experience um from the login so if you have a headless site you can basically install this module for example or if you're not having like a styled login in in your front end you basically can use this module to provide a nice login which also supports all the different styles and there's more incoming like a custom select box and so on um from a statistic point of view there are over 2400 sites already using chin um and open social uses chin already as their default admin UI in their distro so that being said um I also want to say many thanks to all the contribute to contribute futures and sponsors um because without them it wouldn't be possible right so um open social thank you all the individual github sponsors uh you will find them at the link below um thank you very much because this really helps me because on this project so um as you see I'm speeding up because I have a lot of slides so um as a as a short wrap up so the key takeaways claro is on track to get a stable release in 9.2 the second thing is we have a heavy focus on accessibility which is great uh the third one being chin further improves the overall experience as you can see um you have a lot of um customization options and yeah these are basically the four takeaways I want to give you um go out there try chin and claro no matter which one you like more just use them provide feedback create issues do whatever um give me feedback if the team give the community feedback we really need it so um you will find more in-depth talks about the admin UI online as I mentioned before just google for it or I can provide you some links and if you're interested in the experience for content editors where I do a deep dive there's a talk at Drupalcon Europe so feel free to join there as well and you can follow me at Sasha Ecke on Twitter to stay on you know to get the latest updates and yeah just I will always provide there all the stuff thank you