 Tami Rister is our next speaker. She works at Automatic as an experienced designer for the WorldWrestle 4 project. She does that for full time. She's currently the design date for Phase 1 of Gutenberg, which is the new WorldWrestle visual editor that is in a lot of talking points at the moment. She will be talking about how Gutenberg has been designed. So, let's start. Gutenberg Design Matters, creating an open source by Tami Rister. Thank you. Can you hear me? Is this microphone as well? Is this on? So, I said Gutenberg is the new content-creating and editing experience. And today I'm going to be talking about some of the foundations of Gutenberg, and also about what it's like designing an open source. And Gutenberg is going to be shipped in version 5.0 of WordPress. But why is this being created? Well, making rich content should be easier than it is today. How many of you have seen Snowfall? So, this was a story that appeared a few years ago and showed that this is the type of content that is expected by everyone. We expect to be able to create this rich content wherever we are. We want to be able to post photos on the move, write blog posts during a train ride. We expect to read and be engaged to not just have a wall of text. If we just want text, then we're going to save that to an offline service. The web has become an entertainment platform and not just one that delivers content. Without a change, the future of WordPress is uncertain and we will have to face that. Today we are, as a project, the only or even easiest choice often for people to make. And whilst right now that kind of phrase feels a little bit bleak, as a project, that's a good thing because that is where these changes where Gutenberg come in. And in itself, Gutenberg isn't going to save WordPress. It's not a super heroine or a miracle cure. It is a start. It's a step in the right direction in making shifting WordPress into the future and into relevance. So, this is Gutenberg. It has three phrases. I'm going to take a little bit of a look at each of these in this introduction. The editor, which is the phrase we're in at the moment, is the first phrase. And whilst this is focusing on editing, the groundwork has been set for the next phrases in the first. And this is the reason it's taking a little bit longer than others are going to take after. The next phase is customization. And this is where those more, you would say, page builder aspects are going to be happening. And while within a hard stop in between phases, this next one will transition and potentially overlap the phase one. And, likely, this is going to be starting by looking at templating. And that's one area of WordPress that is powerful but actually very problematic for most people to function with. And the last is that of theme. And this is going to involve that work in the past two phases being built on and potentially what that does is not known yet. And it's going to be a really exciting time to follow through these three phases. Gutenberg has been designed in the open. And there are lots and lots of different places where feedback has happened. And that has influenced and changed the design direction of Gutenberg. You can just see how many different types and sources of feedback has been given to Gutenberg. And Gutenberg has actually created, iterated and then released more or less in a weekly or bi-weekly rotation. And as the version members have added up, issues have been made, discussions happened on Gearhub and throughout the project. And this is truly a project made in the community. It's created in public also on a core editor channel. But what about the design foundations of Gutenberg? Before I dive into it, kind of a deeper look into some specific design decisions, I'm going to share with you some of the foundation patterns of the new editor experience. So it all starts with the block. This is the foundation. And what does a block look like? Well, this is a block. You can set the position of the toolbar. And you can combine blocks to get that rich content that I showed you before. And blocks allow for quick understanding. Once you understand how they interact and you understand the block, you understand how to use all blocks. And they allow for this drop-in functionality beyond the core blocks as well. So you can maybe get a plug-in with certain types of blocks as well and just have them work. The potential is really only just being touched on what actually can be done with these. Let's actually have an advantage. And one of those big ones is isolating errors. So block by block HTML editing or errors serve as a barrier over breaking the entire post. So if there is something wrong with that block or some error, then it will only mean that that block is flagged and you have to fix that. The block is a boundary, a safe container for your content. PaySoldiers are also a foundation pattern. They indicate what a block is going to contain and a few different states along the way. Each state guides you through that interaction. For example, in this case, an image block. And placeholders also change based on interactions. You see an image block in various different states and someone interacts with it. You can resize right there and then. And you can also add a caption. In a template, for example, you can take advantage of this. Imagine a template uploading showing just a page full of placeholders like this. This is a lot better than an empty large input box, right? Nobody knows what to do with a box that just says the content here doesn't actually say what type of content. It's not an indication of what the template will look like on the front and quite honestly a confusing experience for someone using it. Placeholders really progress towards what you see as what you get type of experience. So our brains actually don't handle everything all on the same level. We need to have options filtered. And Gutenberg and its core exposes all the options you need when you need them, nothing more. But our brains also kind of, they don't work with having everything surface because they freeze. And if we have to search endlessly for something, we grow impatient and we just have a break from that experience. Frustration leads to us really not having trust with what we're interacting with and nobody is going to want to use something that destroys that. Being able to have just what you want when you need it without having to hunt for options or really being overwhelmed is something Gutenberg is trying to achieve and that's news-based options. There are a few ways that this happens. The biggest one is through primary and secondary actions for blocks. Primary actions appear right beside the block. They are the must-haves. The things a block simply cannot function without for the majority of people. The expected options. Those are right where people need them and there aren't so many to overwhelm as you can see here with the power. Just enough, nothing more. Secondary actions are in the sidebar. And these are reached by another key interaction element which is the more menu. And this uses the ellipsis icon that is commonly used in all of our experiences. Here you have extras. Things it's okay to discover as they aren't essential to the usage of the block. For example, as you can see here, styling options. By following a news-based approach to options, the person actually creating the content feels more in control and by having those secondary actions, exploration can happen as well. Allowing for safe exploration is a key to interaction delight. And those little extra options at secondary steps also make sense. Someone discovers it and they feel an achievement. Another pattern is transformations and that's of changing a block to another block. So why is this so important? Well, it's a way to change your mind about content. For example, maybe you just write paragraphs down the page and you're just writing and you're in the flow. And then you want to change that content and add some style and change it to different blocks where you can do that with transformations. And this all actually boosters the actual flow of writing. That's not a pattern specifically. The different modes of Gutenberg are worth calling out as a recent feature because they're crucial to really giving that choice in how people interact. The first of these is Spotlight. Here you can focus on the actual content that's been interacted with and this is a step towards a kind of distraction-free experience that a lot of editing has. And talking about distraction-free, here you can see this mode takes it to four screens. This is still within WordPress. It's a layer that appears and it even removes that WordPress wrapper so you don't have to sign up. And you can focus on the actual content nothing more and that's great when you're writing. And where you have the toolbar is also up to you. You can position beside the block or you can have it in the top. It's really up to you for your writing style. And what about combining it all? I actually really like this as a writing experience. So those are some of the foundations in Gutenberg. But I'd like to share some actual examples of features that got made and designed in the open. And I'm going to dive into those but before I do that I wanted to share where you can find some of these design discussions happening if you wanted to participate and really discover them. If you're looking to get involved in Gutenberg from a design perspective you can follow two labels specifically. There are the design feedback label and here you can see the GitHub account. And also needs design. This is a great way of needs design to say, hey, something actually needs work on. And the design feedback is great to just jump in and be able to participate and give insights. And what I'm going to share now is kind of issues that have happened in this format. So block variants now, style variants depending on who you speak to is one feature that got designed by the community. And most designs happen like this in Gutenberg. Someone suggests something, then iteration begins an issue. In this case it's a proposal to add different styles for blocks, for example quotes. So Chris came along and he suggested a different interface and gave comments on previous one and the discussion flows. One practice is to see like here when someone suggests something in response to another mock. You can see this evolution of the interface happening where designers are passing designs to and fro each other. And here we get to the final point of the interface and it's slowly morphed. We have this one and then we have this. The final iteration which you will more or less recognize. It's worth noting that changes also happen after development or during development of pull requests and a pull request is the name for what GitHub uses which something is working code. And that occurs between developers and designers commenting in those pull requests. The feedback also goes beyond that and then iteration beyond that as well. Once the feature is released, iteration really isn't the heart of Gutenberg because it's at the heart of WordPress. So material icons were added a little while ago and this met the need of not having that many icons already in the set because having a larger set means that those making blocks can then have a wider choice. And beyond that, it also scaled beautifully and easily across all devices. So Readd actually came up with suggestions in this pull request and this then was iterated. So from the original idea, it then in the pull request was iterated, the developer had some ideas and this worked through. And just like WordPress Core, Gutenberg has this strong collaboration across roles. And here the iteration suggested are added and then the discussion happens. And just like anything in track, GitHub allows you to follow and dive into it historically. You can see all these examples I am sharing here and really discover for yourself the process and decisions. And after some discussion, you can see it goes off a little bit, you know, and then dove into some iterations. And then finally, we have merge. This is where the feature was shipped and released in the next version. So that's kind of a good insight into the lifecycle of how something happens in design for Gutenberg. And it's worth sharing one final thing of in this section on commenting. As far as this is in the feature being released in version one, it is something that's really had a lot of work done within the community. Unlikely, this is going to ship in later versions. One of the key designers involved in this is Tim. He has worked on iteration after iteration, really responding to the feedback. And often, as an example here, just a sketch gets the idea across. And I really like to encourage you this idea of sharing early and sharing often, because it's something within Gutenberg has really fostered and created the project. These are really pretty low fidelity designs, but after going back and forth in these, the ideas have formed. Eventually, things can then move into a prototype. So I've shared how things have happened in Gutenberg and some of the foundations, but I'd like to take a little moment to start thinking about why design is really important in open source and why creating an open source is important. I'm going to pan out a little bit and then I'm going to dive back into some lessons that I've learned through Gutenberg. Open source quite simply needs designers. And this isn't me saying it because I'm a designer. It truly needs design to be at the heart. Design, when I say this, isn't just tied to one role either. This goes beyond something really making something look good. And good design and a healthy design community is at the heart of successful projects. And all those roles combine to make a powerful force. They complete the universe. And there are a lot of problems when design is missing in a project with the lack of use of voice. And trust is often broken in a project that doesn't put care, respect and thought at the heart. You can pretty often tell a project that has design at the final point of sign off that has designers just colouring or choosing a font. And designers aren't actually a colour palette or really a checkbox. This focusing on design can benefit in a project in a number of different ways. And I've kind of alluded to the understanding of empathy. These are the tools of designers. And they can bring those to the community. Perhaps same design also allows you to pan out and see a project designing the whole community itself. It's often really easy to get obsessed about roles. And even in this talk, I said the word designers a lot. Open source often attracts hybrids. And this is something we really, really should embrace. You could say that WordPress itself is built on hybrids. But we often actually expect different levels of technical ability, sometimes only from our designers. Being open to blurring and those hybrids is being open to everyone. Yes, most are going to identify as one role or the other. But as a project, we have to level up design across every single role. We have to be careful of really dismissing an opinion but respectful of those that have made it their life work and craft. But that's the problem. Being a designer in open source, if we're really honest, isn't easy. And beyond design and creating an open source today also isn't the easiest thing. Those high-lessy working can feel themselves drained, reduced to pixel pushers and punishers. And the design voice is often, unless space is given, quieter, and often the open source project is far from quiet. One of the ways we can solve this is through design infusion. That's making everyone in the project aware and activated on design. I'm not saying that you need to move the role of design at all. It's about really using that valuable resource and getting everybody infused with that design because a community that has that wins deeper. It's empathic and it has experience at its core. The voice of the users are going to shout from every single corner. A good community for design is actually just a good community. What do I mean? Because that's a pretty broad statement. Often the way things like this mean that when you create a good community like this for designers, everybody will also thrive. A community needs to give space for voices. How do we actually do this? I'm going to share some points that I think would be really good. Researching suggestions is a big one. Before you suggest something on an issue or on a ticket, really investigate. If you're coming into something midway, really get into the archeology of that ticket. This goes even more so, the deeper and longer the project has been running for. It's likely that it's come up before. Whilst you absolutely may have the key to unlocking, knowing contacts also helps so much. It may also be that you actually have the key for another lock. Another really simple thing to do is visualize everything. Take a screenshot for your progress and your issues. Designers are amazing, but we are not mind readers. And beyond this, don't just stick to words to describe something. The reality is that actually every single person can in some way draw and embrace sketching no matter what role. I really believe that everybody should be doing that. Get an idea out visually, even if it's just rough shapes or sloppy and pasted together with neon arrows, it matters so much. All voices need to be heard and to do this, the culture of feedback needs to be cultivated. Space should be created and the community really shouldn't be focusing on who is shouting the loudest. Feedback needs to be learned and it's an art form that really should be practiced by everyone in the community. A community's ability to give feedback or not is kind of an indication of its health. When a healthy feedback culture exists, every single voice flourishes and is heard and respect those with that community. This is probably the hardest thing to do, really, that I'm going to share now, and that's make a safe space for ideas to grow. Allow an experimentation through the giving space to just see if an idea has formed. This is how boundaries have pushed and really incredible work happened. And don't worry about how fully formed something is either. Allow people to share early, share often, and really don't judge that work. If you have that culture of feedback I mentioned earlier, those ideas are just going to shoot and thrive. So this one really isn't easy to do as a discipline, but don't discuss away from where the action is happening too much. Don't use Twitter or Facebook to steer or guide an idea. Sure, throw ideas out and iterate if that's your platform of choice, but bring it back to where the work is going on. If someone has to follow too many platforms to get feedback, their work is going to suffer. And even worse, that feedback, which is potentially amazing, is going to be missed. The best solution may just simply never have been heard, and that would really be an incredible shame for the project. This has been a little bit of one of the issues with Gutenberg, and one I would say we all have to work to get better at doing. So designers in fact any role needs to be onboarded into a project. You can't just land someone into a vast universe of an open source project and expect them to survive. Onboarding should also adapt and be iterated. Contribution needs to be seen as a product, and with that as a community we can start really thinking about how to fix and create the best product we can. A mentoring, I would add, is really crucial for any type of contributor. And this goes beyond that onboarding or that initial stage, and can answer a lot of the time zone and diversity issues that face when someone's new to the project. It's also a two-way project experience. I don't know if any of you have had the pleasure of being a mentor, but you've learned so much. But something we actually do right now, we have a design team, and that is in many respects isolated from other roles. But as has been seen from other projects, design needs to be truly in all areas and infused across the project. Creating safe paths and bridges and empowering designers to go off and choose their own adventure across the entire project, that's when success happens. This one sounds a little bit obvious. We want to care for everyone, right? We have to though recognise that different types of people, those that focus on roles for example, may need a different type of space. Ultimately, any space that is caring will be better for everyone. And this really gives the space for everyone to be heard and speak up. So the problem with most projects is they attract the same people. And this can also go beyond countries to accessibility and diversity. Even a project that attracts designers doesn't mean that that gets sorted at all. It's potentially attracting the same type of designers. That's still not good. This is a challenge, but it's one incredibly worthwhile pursuing. By having a wider variety of different designers, you're going to end up with a rich, deep pool to create from. And that can only be a good thing. So that was quite a panned out look. And I'm going to go back and have a look at what I've learned from doing Gutenberg and from creating in that space. Design infuse developers, I really think, are the future. Designers are often in projects that scarce their commodity. And that becomes a problem when we force them to do everything all the time over and over. By infusing developers with design, some of the burden gets spread. Developers also become empowered. They're not just waiting for a designer to do a bit of work. Conversations happen. Ideas generate. And an incredible workflow occurs across both roles. This truly is where the exciting things happen in a community. A good first pass can be made in patches once the developer activates with design. And then the designer can be engaged. This saves time. And then issues can be iterated by expressing in design. And that includes that conversation. Feedback processing needs to be done by anyone in the project. We really need to find a way forward, as I mentioned earlier, for these disparate sources and really look at how we can tile that feedback and get it to the right places. I don't have a solution, but it's something that I think needs flagging and it's something that we really should all work together to make sure that we're getting the right feedback in the right places. And similarly to design infusion, working in cross-discipline teams is priceless. It really is. What you maybe haven't seen so much in Gutenberg is across-discipline interactions. The way developers have influence design and the way designers have embraced development. I kind of have used the term UX developer because I firmly believe that exists in WordPress and it's something we should be embracing. This is a hard one for me because it's been a big lesson. As a designer in Gutenberg, knowing when to make a decision or when not to make a decision is something that I've learned. Yes, at all times you need to listen and be open to changing over a set direction in your mind, but you also need to make decisions. As a project, we have this amazing future of iteration that's out there, but we sometimes forget that we have that possibility to do that. Just because something goes one way, we aren't actually casting it in stone. Similarly, those we let lead, we need to enable those to make the decision and enable more people to lead and make those decisions. It's actually a personal challenge for me because making a decision is something I find really hard. I share away from it, but it's something we all need to embrace. So we expect designers to do a lot of roles when we have a base guest commodity. And this goes the same for anyone that leads in our project right now. Just like designers, they are scarce. And this is wrong. We need to make space for more people to lead. And we need to create a community and tools where everybody can thrive. And if a designer thrives, remember a good community for designers is a good community for everyone. Because I think anyone that contributes, you get to feel the pressure to do everything. And we have to change that because we can't just teleport a lot of people of a particular role into the project. We really have to use the people that we have in the most effective way so that they don't burn up and that they can be there for a long term. As a project, we also really need recognition. A lot of the work that people do is invisible and that needs to change. We need to make visible what a lot of that work is done and recognize it. And this is really, really important. Tools we use and get hurt are slightly better than track, but they don't actually recognize designers all the way that work actually happens now. They're fragmented. We use many, many different tools to make up one flow. We have to sign into different accounts and know how to use everything. It's just too much. And once we can't wave a magic wand and make us whole and different today, we have to really invest in that as a project. This is from GitLab and this is just a start. It actually recognizes design or contribution or contributions that aren't cold by having comments recognized. GitLab actually has some really bad features. There's a negative emoji or reaction where someone can not comment and just give a thumbs down. That's not necessarily something that moves anything along for people to make the suppressed voices. These tools that we have can be an instrument for building a better future. And we need to do that. As a project, we need to focus on creating workflows that nurture and allow many in that world to thrive. One other thing I'm sure we need sooner or later, I would say sooner is a design system. This has been said a lot of times in the WordPress project. We can't go on as a project without that source of truth. We need to audit what we have at the coding design level and then look at solving the problem once and for all with having a design system for WordPress. Patterns are the key here and Gutenberg has unlocked some of that potential with components. We need to turn that key and really walk through that door. Along with this, let's not be afraid of setting guidelines. A more consistent expected experience across WordPress is actually good for the entire project. A design system also uses the scarce resource we have at Designers with Respect. They don't have to reinvent everything. Everyone actually gains and iteration can happen on the components themselves. I've covered a lot in this talk and I've shown how Gutenberg has been designed and also panned out to see how design needs and shared some thoughts I have based on the work that I've done within Gutenberg and how hopefully we can change the future of WordPress to welcome everybody. Design has mattered in Gutenberg and it matters in WordPress and we need to create a space where it can thrive. Thank you. We've got a few minutes for questions. If you have any questions please put your hand up. My slides are available there as well. In Japanese, this slide is on the bottom of the URL. Later, the official tweet will be switched off. It's a bit hard to explain. Stay in the URL of the slides at the bottom. Thank you. You can ask questions in Japanese. You can ask questions in Japanese. Any questions? Anything? Thank you very much. When it comes to client work it's very difficult to make designs with open source. I think many people have different opinions so when you make a decision what kind of timing do you think you should take? I would like to summarize that. How do you incorporate feedback in different opinions into design? I really hope I got that. It should never be something that just happens at one point but it shouldn't be something that happens loudly all the time. My best advice would be at the beginning of a project that noise should be very vocal and louder and as work is happening in a sprint format the noise should dial down still keeping that stream of feedback going and then checking in at various points. So building into your process the space for feedback that opinions from everybody is really important. If you don't build that in people will just throw opinions at you. So it's just a way of doing that. I would also say that there needs to be that constant stream going at all times as well it's just how dialed in you are to that. Thanks Neri. That was a great presentation. A philosophical question. I've always identified WordPress as the product. Now with Gutenberg inside WP Admin and a lot of the gravity shipping towards Gutenberg itself especially in client meetings I feel like Gutenberg is WordPress in a way just from how you pitch it and present it. At what point are we losing the name and making it the face of the product and unrolling it all together in one nice little thing. Do you mean using the name of Gutenberg? Yeah, I mean losing it completely because right now I feel a bit of a disconnect in client meetings still where I'm saying there's Gutenberg and WordPress and that's okay because we're still on beta I guess but we kind of have to move away and I feel like Gutenberg will just be called WordPress in the future. I have no facts but my feelings and this is a personal. I think it is it's just WordPress. I think like any other project it's kind of okay to have a project name but it should just be seen as a project name. I think the passion in a good way that that project name is given you know from the logo through I think that's something we should explore later on when we do I really hope this isn't the only thing we do like Gutenberg. I hope there are more things like that that's why I'm saying this is a star not the end but for me personally I think it is WordPress when I'm talking about it. Thank you very much for this amazing talk. You just talked about the design system for WordPress and it's really such an amazing idea and I was wondering how do you have any ideas on how we would develop our stars or is there a roadmap to develop like a design system in open source Yeah so I have no roadmap that's me just thinking and speaking. I would say me potentially as a community already on the roadmap and that started by having in Gutenberg components. The next step I really strongly feel we need to do is auditing. You can't have a design system when you don't know what is in your house and at the moment really not sure what is hiding in different corners of our house and there's famous tickets of multiple shades of various colors and different things like that because we don't have that consistency yet. There are areas that we haven't audited and by doing that we are taking a strong step forward because you can't build a system around anything that doesn't have that. So that would be my suggestion of the first day and that is something that is relatively easy to say but quite a thing to do in order but it's just something I think that really should be done. Thank you. So you're asking if you can have access to the documentation for Gutenberg? Is that correct? Yes. There is a handbook for Gutenberg so absolutely you can have that. You go to WordPress. This is like a test. WordPress.org forward slash Gutenberg handbook. I hope I passed. There is the handbook for Gutenberg there and if you do not find the documentation you are looking for there are two options. One on GitHub, you can request that documentation or two you can come into Slack to core editor and we will get that information for you. Hi guys, thanks. We have sufficient time but maybe one more please. So out of all the different UI elements and features that have been shipped so far which one do you feel like you kind of need to go back and reimagine? Which one do you feel like if you can go back and fix them? So in a few years I like to see everything anyway because I believe in iteration so yes, it's solid I've added a lot of things. I don't think we require transformations, we're getting there. We've been circling around it. Block library I used to feel that way but I think we've got block library now, that's good. So I think from listening and exploring I think we're getting to a good first I don't know if you know there's a system of cupcake, birthday cake I prefer them to skateboard, scooter car because it's just more delicious. And I feel that we're pretty baked for our first version from the UI and I think if we change too much now we'll be doing this for another two years and it's actually a good thing to ship something. So yeah I'd say that there's a few bits I think we're circling around but we're really close to there but most of it I feel is a pretty good first bake. The thing that really excites me is when I'm not the design lead when other people in the years to come do what has happened across WordPress and iterate and bring their amazing ideas and make it their own and that's that's when I'm probably going to see something in like three or four years and go that's how that should have been done. Can I ask one more question for myself? Because we never had someone who is so involved with WordPress design on our side to speak about anything so you've been involved with WordPress project for quite a while as a designer what is your motivation to be involved in this wrong as you mentioned about design system if you work on that kind of stuff you might want to work on some other project there's like other services out there but what is your motivation as a designer to keep working with WordPress project? So I have a few motivations I think when I feel strongly at the moment is making open source work for designers that feels like a strong motivation for me and that will say like it's a horrible place at all I think both designers don't get seen in open source as much and also design doesn't attract designers as much I really, my motivation is I just like iterating and making things better on this scale and that's something in design if you work for a big company as you do but this is incredible I have open source running as well as it can provide me like my veins so it's like both of my happy things to do that the chance that your design makes a difference you can be working on a project as a designer and you're or that makes money but it doesn't necessarily make the difference that WordPress can make that's a huge thing and enabling people to contribute as designers really is a huge motivation for me I have and nothing is ever the same when you work in open source project as a designer it's always different because we need to have that thank you so we're going to finish this session Tommy is going to be in the I, the Waffle Cafe after this for a bit so if you're in your chair it's hard to ask about anything about Gutenberg so you can find her questions if you're not she'll be here for the rest of the day so we'll catch her there too so and if you I'm sure about the English please grab a staff from somewhere and I'm sure they'll translate into Japanese English so please give her a big applause once more thank you so much