 I am an interaction designer at Red Hat on the UXD team all at these guys introduce themselves I'm Gina. I'm an interaction designer on the UXD team as well I'm Rachel. I'm an interaction designer on the UXD team So we're gonna be talking to you guys a little bit about pattern flight today and designing in the open So just as a note This is the first talk in a series of pattern fly related Talk, so we definitely encourage you to attend the the ones later on today And just quickly to go over the agenda We're gonna do a bit of an introduction go over what open source is I'm sure a lot of you are familiar with the idea already But we'll also go over design systems and then talk a little bit a little bit about pattern fly Why you should use it how it works how you can use it and then we'll have some final takeaways for you guys So Gina's gonna kick us off Okay, so as many of you have been contributing to And probably already know open source the definition is written on the screen, but I'm gonna read it anyways It's denoting software for which the original source code is made freely available and may be redistributed and modified So there's many benefits to open source, but some of them are flexibility and agility as well as cost effectiveness culture a culture of collaboration and transparency and then better access to innovation there's other areas where open source principles are applied other than just software and those can include hardware and digital services like video streaming services and then some research areas as well but within the Software fields GitHub which I'm sure most of you have used is a widely known and used example of open source In which a massive community has evolved from and it's primarily used for code although it's a great place to host an entire design system and Since it's an open area where the community can see and contribute to it The design system can get constant feedback and grow as it goes So now design systems in general, so what's a design system there? They're involved of components and Other smaller modular elements that are used to create a UI So here I'm giving some examples of existing design systems that one on the left is Google and they use the material design system on The left you'll see that there's that snapshot with the purple highlight and then on the right there's one with the red highlight and that just That is an example of some product differentiations that come from the Original elements that they use within the design system and then each product then has its own flavor kind of thing The bottom one is Apple so there you can see all the little elements that they use to create a larger UI Like the emoji keyboard The switch the copy tool tip and then the top one is IBM and they use the carbon design system and that is a full snapshot of All of their elements combined, but if you can imagine each section is Introducing different information, but it all looks consistent and has a similar feel so red hat has its Design system that it uses across its products and it's called pattern fly it's an open-source design system built to drive consistency and unify teams and It provides design documentation components and code examples for users to build responsive and accessible user experiences So some of those components are shown on the right here drop down many some buttons There's also some chips that become a chip group down there And then we would use those components to build the screen on the left and you can just see some similarities there Just from those examples So I'm going to now go into why you would use pattern fly and give some specific reasons that may get pretty cool so our design system is modular and flexible and Modular design systems enable you to take very isolated patterns and combine them to build complex designs that can support different user tasks modularity helps ensure consistency what you'll see across all the full screens that I show and Since the isolated pattern shouldn't change much between the context you'll see that those similarities carry on So the layout specifically here layout structure the layouts pattern fly offers help you easily organize and arrange these components on a page and we supply you with a documentation like I said before of how exactly to use those components in your application and it ultimately improves your workflow and gives you More time to think about the higher level aspects of your application So everything is responsive and when we design we always design mobile first Here it's a little difficult difficult to see but you can see the different breakpoints that we offer in pattern fly And the cool thing is that all of our components are built to be responsive and designers and developers can rely on the CSS To define that behavior. So like I said, these are the breakpoints and as the screen width gets smaller Some of the design will change which is why we offer these up front And again that will supply you with more time to concentrate on other aspects of your application So another thing big thing is accessibility. So in addition to modularity flexibility and responsiveness Our design system is accessible and designs are evaluated to consider all the ways a user might experience the component So the component So that the design is solid before we develop it so semantics and visual Presentation are decoupled allowing the component to use semantic elements that fit the context of the component An example of that would be within an accordion, which I'm not showing here But the heading level in an accordion should be based on the heading level that comes before it and then For like actions in a menu. They might be links to other pages or buttons that open a modal All CSS styles are also programmatically checked for accessibility violations And if you're interested in learning more about accessibility, we're having another talk after this That will go into a more deep dive about that So lastly within our design system everything maps to the variable system so we have obviously our team is composed of designers and developers and We have a design library that they're able to use which you see a little bit of on the left And we break it down so it matches directly with the variable system So it was created to parallel the CSS So not only does that make it easier for designers to design, but it also allows designers and developers to talk and communicate on a more more of the same level and All of the colors name color names for example here will match with the variable name. That's listed on the right So now I'm going to give it off to Brie to talk about how pattern fly works Okay, great. So now we're just gonna take a little bit of a deeper dive to look at pattern flight in action So just to sort of go into the flow a little bit more. So we all know how this works So this is just a quick flow that shows the general process We go through to add to pattern flight and to keep the design to some updated and constantly evolving So first you have future requests Then we go through a little bit of a discovery phase after that we'll pass off to design and we'll actually build the component out And then of course we have to implement it which is the final step Okay, so the first step is feature requests and there are various ways that requests come into pattern flight Each type of request generally follows the same design Contribution flow So the first kind is downstream adoption And this is when a when someone might have a component that's already designed in another product But it's not yet exist in pattern fly So that request will come in to add that component to pattern fly for others to use We also get completely new feature requests which are similar to down to adoption except that The component doesn't exist in another product nor does it exist in pattern flight So with this type of request the design is added to product and the design system simultaneously And then we also have enhancements So this kind of request comes in when we do have a particular component in pattern fly But for example, maybe a new use case comes in that requires in addition to the components make it more flexible So we can use it in different contexts So for example, if we wanted to add a multi-select option into a component that was previously single select So after we did those requests in we go through a little bit of a discovery phase to learn more about what's actually happening So We dig deeper into some of the use cases and the requirements and this is a multi-step process that does involve Looking at from multiple perspectives to make sure that we're trying we build a well-rounded component that can be used across multiple products and Context So first we'll do some background research to get a feel for what already exists So for example, there's a navigation on the right-hand side of the screen here So so you want to add navigation to the design system? We'll ask some questions like how common is this? We know this is pretty common. I'm sure most of you have seen navigation from redhat.com to gmail It's a pretty frequently used component Are there already existing conventions for this? There's definitely are so we don't want to reinvent the wheel and create a navigation that is confusing Or that doesn't work the way people expect it to So we also look at what products would use this How it works and you'll notice that navigations work pretty much the same across things except they do vary in color or theme animations typography things like that And then once we know a little bit more about the background we want to look at use cases So for example if we take this other component the selection drop down right there in the center That might be needed across a wide variety of products in context So for example, we could use that in a form we could use in filters it might appear in a toolbar So we need to make sure we're taking all those use cases into account when we're building this out And then finally after we're kind of dug into this a little bit more We do want to come up with requirements that way we have sort of a vision going forward with this component So it's important to consider here which functionalities are non-negotiable for this component And which if any enhancements should also be included So this last example in the bottom here is an alert in that case we might can we might say that a title and a description are required elements But enhancements might include allowing people to change the color the icon Maybe adding a call to action or dismiss button or maybe even changing the amount of time before that alert dismisses and goes away And the cool thing about being open source is that we can host a variety of channels to have these discussions So we make sure we do get those multiple perspectives to build out this big well-rounded component And those are all available for the community to participate in So after discovery, of course, we need to design this we need to know what the component looks like how it behaves Our team will often use sketch to build out components and this was mentioned a little bit earlier But we have a sketch library that developers and designers could use but it has a library of all the components in pattern fly So you can easily pick out those components you need and build out a full screen These designs also include schematics in context mocks and a variety of specs. You can see a toolbar The top one is it all specced out using our spacing system in pattern fly and below it You can see it without all those spacers and how it might look But right before you throw it into a product Some designs also require a little bit further documentation. So we might have a detailed write-up Including when you should use it how you should use it What it looks like in context how it responds on mobile? How it may or may not interact with other components So trying to really give any users of this component a good idea of where it lives and how it should interact there And all these designs are shared and reviewed in our Biweekly pattern fly demos those are also open to the community and we do record them and host them on our youtube channel So we encourage you to check that out But again this process just really helps us see the design through multiple lenses and make sure that we're addressing as many needs and use cases as possible And the last thing about design too is that it's important to remember that none of this is set in stone It's not unchangeable. We often get like I said earlier bug fixes or enhancements People open PRs on our Github to make sure that these components are always being updated and that can mean addressing new use cases Or like maybe fixing strange behavior that we didn't foresee the first time around And so the last step in the process is development so for pattern fly we do create components in both HTML CSS and react And it's pretty cool on our site You can interact with the components to see how they work and see them in different contexts And throughout the stage there is communication of course between the developer and designer to make sure the component is being developed as desired Sometimes things will come up and it might require more design work and go go back to Figuring out what it should look like and if it should work a different way than we initially thought Sometimes it's a technical limitation or maybe an unaddressed use case But they'll often work together to address that issue So while the flow diagram does look linear, there's always opportunity to take a step back and sort of refine any previous work that we've done This implementation also is shared in our By weekly pattern fly demos are shared on Github and we encourage all of you to take a look at that and contribute if you'd like But yeah, now that we've covered the flow We're going to get into a little bit of how you could use pattern fly and maybe contribute to it Great. Thank you so much Gina and Brie So how can I use pattern fly? We're gonna walk through the use case today of implementing a table so At first kind of think through a time you've used a table you've implemented a table And think about some features or elements that were Included within that table design you probably fall within one or two path Pathways when you need to implement this table Which is you have a design that was delivered to you by a designer or you have no design You may be a designer and you need to implement a table that has certain requirements All right, so to illustrate this today, I'm gonna jump right into our website Start here All right, so a little bit about pattern fly what we're on pattern fly or slash v4 right now And this is getting started for designers Hang with me as I try to nav on our mirror screen here so with Designing with pattern fly we provide a variety of resources so for starters We'll go ahead and introduce the design system to you and how it works If you are more of a design mind we offer the sketch library in here We're offering our components in full design as you'll see in our design system today To be pulled from and ready as reference later for developers And then also we have several things we'll cover within our design system, so I'll try I will quit trying to nav through on the mirror screen here, but we have styles which really gets into the colors and the Variable system that we offer as well as icons typography Within our icons page. There's a plethora of things to pull from that really keep your application standardized And these are all really great concepts to become aware of whether you're of the design or development background And it's a really great foundation as a great starting place for digging into these deeper concepts Around components, so I what whether you're a designer and developer? I really encourage you to go ahead and Get get familiar with Designing with pattern five Yeah, that's great, okay So I'll stick to the slides So I really encourage you to explore pattern fly org slash v4 Within our design guidelines. We really detail the usage and the usage and behavior of the table so what is what this will walk through are certain examples for the table and The the different usage and behavior patterns that we would recommend for the table So there'll be Even in this particular use case you see there's a label of one two three on the website You'll see that we really break down the anatomy of of the table So at this point in time you're learning a lot about how this could be Potentially implemented and these are great conversations to have from the beginning with your developer if you are of the design mind Okay, I mentioned the sketch library There's a handy link here, but again, it's on the design guidelines on the website Super easy to download it and if you don't use sketch no problem at all. We have plenty of resources available All right, so the design Table design has been delivered after you explore those design guidelines and you read more about the usage and behavior able to understand the requirements and Interpret that for your table design Then you'll want to access the documentation on our website So this documentation again covers html react and you can go ahead and follow along here This is really the the cool nitty gritty stuff that makes the table possible So at this point in time We've set you up with success here if you're using react have props and More detailed documentation You could also Because we're open source peeking to our github and learn more about the life cycle of this table and how it arrived here And go ahead and pull the code and get going All right, so yeah, I think that many ends illustrated best this concept of collaboration But this is something that the pattern flyer team holds Dear to us because that is how we make our components accessible modular and flexible across all of our Products that we're servicing Try to make them as universal universally usable as possible So as you're implementing your table, it's imperative that the designer and Developer communicate which I am sure you've all learned over a time And through this collaboration, you know, it's not always the picture perfect Story you might run into a bug We try to fix bugs as quickly as possible and our community is very active about filing them when they need to So we'd encourage you to do the same here. I've linked the our HTML and CSS repo and our react repo So do you start using pattern fly and you need to file a bug? We're on it We're we're speeding through those bugs as quickly as possible and let us know if it's something that's blocking you So we could address it more quickly All right into sum up Implementation if you have design questions, you you can work with your designer And if that's something you think our team can help answer definitely reach out to us I'll I'll be going through a slide that talks a little bit more how to get in touch with us here in a second test for Accessibility so even though our components are accessible and ready to use Once that gets into your application That's when it will fall on unit test Accessibility within your application so within accessibility guidelines that would highly recommend getting up to speed For how to go about that testing and we're going to be talking about that later today and talk this afternoon So customizing for features and I'll offer them pattern fly and contributing them back to the community It is a design system, which means you might see there's the need for customization and if that's the case We'd love to know a little bit more about that and see if it's a good use case to be used across many products and Go ahead and contribute them back because this is an open-source project So thinking thinking about that I'll be walking you through some criteria for what would make a great contribution because we hope that you'll become Contributors are inspired to be after learning a little bit more about pattern fly So a little bit about our design contribution workflow in timeline In the discovery phrase that we're really asking you to become familiar with our Repos by filing an issue and telling us a little bit more about your requirements as well as posting any wireframes and as a team we'll come together with you and we'll review those designs and We'll talk about where that could potentially live priority wise and really what that time we're figuring out out how it could live across Products and if it it will live across products. Well, and maybe I should just more generally say applications So we're thinking about things both inside Red Hat and outside of red hat in the design phase We're working with you to kind of finalize those wireframes into visual mock-ups and interaction specs We'll review that with the pattern fly team In implementation, we'll ask you to be involved with the PR process and reviewing those And we'll update updates. The design is required during development So we have we have a team on our side and as you can contribute if you're interested We have we can support you in whatever way that you need to support As well as if you want to take that contribution and run with it and implementation We'll try to work with you on that as well And finally, this is this is one of our most valuable parts of the process is Documentation so after that's been implemented and put online. We really do need These great design guidelines that document behavior and usage so at that point in time we'd love to work with you to go ahead and Update the website with design guidelines that talk about the usage and behavior of that contribution that you're making So if anything you've heard today Interest you and you want to learn more there are several places you can reach us We have our mailing list Where we send out bi-weekly updates at the minimum sometimes more Slack if you have urgent questions, I really encourage you to get in touch with us either on this on slack or our forum We've got we've got our team in there every day answering questions that may come up design or development related So we'll find the right channel for you and the right place on the forum And you can kind of go ahead and plug into the community there We have our pattern fly blog and that is hosted on our website and we update our blog very regularly To make sure that any changes that we're seeing that touch the system are published and Especially highlighted if we think they'll be important to the community And finally our YouTube channel is Right a series of demos that we host every two weeks Those demos are on a blue jeans link a meeting link that's open to our greater community We have a lot of people attend outside of Red Hat and really want that greater community to be there to hear what we're working on and Also, we're gonna start hosting a monthly Community meeting that's more of a town hall style and it's gonna be a great great time to hear from both folks internal to red hat and external to red hat As far as what they're working on and how they've approached pattern fly and Some key take takeaways today Open source is flexible and agile cost-effective and collaborative design systems get carried over to product design to unify designs across products and pattern fly is an open source design system Our goal is to be consistent and to unify teams Any documentation you need is that pattern fly dot org slash v4 and I also encourage you to check us out on get pub And the product pattern fly contribution process is open to you So at this point in time I will pass this off for questions and I'll just if in case you weren't here for our intros I'll just remind you that Gina bring and myself come from a design background So they answering both will be best answering design questions And if we don't know the answer to a more technical question We have an HTML and CSS and a react workshop later today So we'll defer to that but we are here for any of your questions that are more design specific to pattern fly Yeah, absolutely, um that happens with pattern fly every day So I do want to I want to correct something that um, it sounds like you you may have heard I might I might have mumbled or something, but um, you yes the pattern fly components are customizable. Yeah, yes, um, and We they're really meant to be thought of as like like a Lego system building blocks So you can take one of our components and you you can customize it to fit your needs It's just meant to be flexible that being said at times We've heard that many products needed as something of this component that we were offering and that when an issue is filed that's the conversation we have every single time and Which which makes for an exciting project and a very fruitful project because you're really hearing out Those requirements that might be coming on so at that point in time we evaluate If that's something that can be used by many people and many contributors and if that is the case that it can be used by by many folks who are engaged with pattern fly And we think it will exist across many applications Then we'll go ahead and bring that into the component itself and build that out Yeah, that's a great example so on our Website if you were to navigate to alerts We had offered this alert and when I say alert I'm talking about when you see that alert icon and then maybe we have some banner text around Exactly, what's what this alert would be about and we're asking we're already offering several several variations But what was cleaner when it we started implementing it and in different products and user started implementing it in different products was that it only worked in the context of like I'm gonna say like a In a traditional or second like toast like pop up and once it we needed it in line The styling didn't quite work. So we went back in and we restart stylized it and introduced a new Variation a new example that would include different styling for that inline alert So we're taking in use cases like that all the time where we find that Something we thought even think is a little bit more universal it needs a little bit more tailoring. So yeah, those are great conversations to have Just a note on that too. There is Another example that we're going through actually currently is we're looking at I work on the open shift team in red hat So we're using pattern finder. We're trying to make our console as consistent with pattern flies possible and so we do have a lot of list views in the console and one thing that came up was pattern flight does offer a variety of tables and different examples you can use bulk selection you can have a number of different filters Textbox filters fasted filters a combination there of Global actions all these things that pattern flight offers sort of built into that so we can use that customize what we want in the toolbar That makes sense with our table One thing we did come across was that For example In certain list views we might have hundreds and hundreds of items and there might be three of them that I care About most and is there a way that I can go ahead and favorite those So what we did is we opened a bug on the pattern flight site and we said we would love the opportunity To add favoring to this and is it something that you would consider to add to pattern flight? Is this something other products see as well with would this be used by the community or is this maybe open shift specific? So those are the channels. You know we have that conversation Internal or external products teams can comment on there and say this is something I would want or I don't know about this This maybe seems custom And that way we can have that conversation about does this belong in pattern flight? Is this a customization and sort of go from there? So that conversation is ongoing and we're working on ferreting in tables now, so I think that's a really cool part of pattern flies that conversations always open Are you talking about like taking in it like an entire existing Console and really just applying pattern fly on to it Yeah, I can take this one So I haven't quite seen that what I have seen is that there's that desire that they want to make the switch but that's That's that's the end goal and what needs to be taken into consideration in the short term is What are those main elements I could pull in a immediately for that migration process so taking it step by step and We do have a migration guide on the website So even if you're just interested in trying out one pattern flight component, we make recommendations there about like really high-touch Parts of the UI that would be good to try that out so one would be perhaps a mast head and a top nav because that is Really high visibility place where you could potentially test usability within your application And that migration guide on the website goes a little bit more deeply into that So we have a lot of people we work with who want to get there eventually But we also recommend that you don't try to take on too much at once We think that's great and then also provide the support someplace to migrate as needed I guess if there are no more questions We're wrapping up there and the three of us will be here all day and probably throughout the next couple of days as well so you guys have any more questions and Feel free to approach us and also don't forget about the other three talks in the pattern flight series So go see you guys there. Thanks