Maya Gans | Creating a Design System for Shiny and RMarkdown | RStudio (2022)
A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels. This talk will go into detail about the history of design systems, what components to include when creating a design system, and lastly various examples of implementation. By the end of the talk, you should have the tools to create your own design system within Shiny/RMarkdown to be used by yourself, your brand, or your company. Session: Pour some glitter on it: Polishing the design of your shiny apps
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
Hi, everyone. At first, I'm like literally shaking. Those talks were so good. How am I supposed to follow that up? But now I don't do hashtag sports ball, but that is a layup where this is going to be great. So today's talk is going to be about creating a design system for Shiny and RMarkdown, which I've called hashtag on brand. I don't care if your company is 100 people, or you have multiple clients that you're trying to manage, or just yourself, having a consistent and cohesive UI, Greg might not hate it.
Okay, so this talk is coming from a very selfish place. I work with a lot of clients where I'll look at their websites, and we'll see eight different styled buttons all performing the same action. So I've kind of provided this like scholastic compare what's different in these photos of a bad and good UI. So don't do this. You'll see the top image and the bottom image are different sizes. Why, why, why? Why? You have header text under both images that are different sizes, different colors, and different opacities. I'm literally getting hives just thinking about this. There's a bunch here. I'll leave that to you. These slides are available for free.
What is a design system?
Okay, so Greg talked about incredible rules, but I am not a designer. I'm a programmer, and I want rules that I can govern my code by. So I'm going to talk about a design system, what is a design system? I got you. It's a set of rules, constraints, and principles implemented in design and code.
Let's walk through an example here. A rule for color would be that you have to pass a minimum color contrast ratio for accessibility, legibility. If you're going to put text on a background, I have to be able to read that. Now, a constraint of that is going to be these are my colors in my color palette. I am a millennial. I love pink. This is going to be my color palette for the rest of this talk, and that's also my guiding principle that I'm just leaning into loving these two colors. There can be a whole conference itself in color theory and why you should use green or whatever, but your principle can also just be as simple as, like, I like Barbie.
A little bit more informative here, shiny twist is an error message, right? That's something really important that you want to leverage to your users, so you're going to use a bright, bold color to denote that. You will see my background color and the text color are legible enough that you can read that text, and then my governing principle again is that red is important, and my eye is going to go straight towards that.
So, this set of rules, principles, and the constraints, you're going to apply that to all the things, not just color. Spacing, how tightly are you going to pack those things that Greg just taught us we should put together? Do you want to let them breathe, or should they be really tight? Typography. I overheard at lunch one of the most incredible developers I know using a PowerPoint slide deck, and he was like, I just changed my font from the default, and now it looks like I have a brand. Yes, Queen, yes. All these things are important. We can use all of these components of our system to create components, and we're going to use those reusable components inside page layouts.
he was like, I just changed my font from the default, and now it looks like I have a brand.
Do you need a visual? I do. Here's a component. Let's say it's a button. I'm going to apply my rules, constraints, and principles to this button. Now, in shiny land, which we all are, now we can create a shiny module like a plot that always lives with this button. This code always lives together. And then finally, I can put those reusable modules inside my entire page layout. That pink little cutie is always the same one, and we will always be using that one all the time, and not eight different buttons, please!
Building a design kit
So that takes us to a design kit. It's a collection of assets that contains a set of design elements such as UI components and styles. So, Joe did a ton of heavy lifting for me yesterday. Thank you so much that I don't have to talk about the basics of HTML, and Greg's hashtag no HTML, no CSS. Where are my nerds at? Yes, we want to learn these things! If you use tags dollar sign button in the console and see what that prints out, that's your HTML that Joe was talking about, and this is the ugly button that you get with vanilla HTML, but she's reliable and faithful. You get this pointer when you scroll over it, a thick dark border, and a grey kind of background colour. So that's a vanilla HTML button.
But now we have an action button, and harking back to Joe's talk where you have HTML and actions if X do Y, but what Joe didn't talk about and Greg did was that we also get CSS for free using Bootstrap. We're opting into a design system. Thank you so much. This button is already so much better. When I hover over it, the background turns grey. How is this happening? My HTML element has classes that Bootstrap is going to leverage. I urge you, the best way to learn this stuff is play with it, break it, and the rest of my talk is going to be the journey of doing that to create my super extra button that I am, again, I don't want to be put in a box. My buttons are going to be round. I have my pink text and my pink background, and I call this button primary button.
Making a package
So we're going to make a package, R code, sigh, I can do this. We're going to make a package, and in this package, we're going to put all of our assets, but, again, this is the journey of our humble button. So this is a root directory of our package, and we have an R file for our button, a CSS file, and then within an ins folder, we'll have a CSS file and a JavaScript file because I want to give you in this talk pedagogically all the things. You don't necessarily need all of these, but you'll have the code, can play with it.
So let's start in R. If there's one thing I want you to take from this talk, it's probably this slide. Love that for you. Take a shiny input, and then you can use the function tagless append attributes to put your own classes on those HTML elements, so it's like, psych, I don't want to use BS lib or whatever, I want to use my own thing that I'm making from scratch because I'm stubborn, I'm a developer. And then we can use this wonderful magical function, HTML tools, HTML dependency, which essentially says take that JavaScript file and that CSS file, and now when you render that button, you get those for free along for the ride. So now I can just call primary button in my Quarto, RMarkdown, shiny app, they're all going to look and feel the same because you get all that in your list object, chef's kiss, beautiful. So that's our button.
CSS and JavaScript
Now for the CSS. I really just want you to focus on the first three lines here. Primary button was the class I gave it. This whole first three line in CSS is called a rule, and in that rule, we're going to say apply to my class of primary button the value with the value of background color white or pink, whatever, in my case. And here's where you're going to lay out all the CSS that you want for your button. I am not, Greg, I am not a designer. This talk is not to tell you what color pink to look and why you hate the things that you do. That's your own journey. But I just want to give you the tools to get up and running with this, right?
And I want you to also think about different states in CSS. So we have this concept of pseudo selectors. So not only am I styling the button, I need to think about hovering. I need to think about people who are not using keyboard for navigation, and if they're using tab, how do you know where you are in the page? That's a focus state. You'll get usually a heavy ring around it. And then disabled. I can't click this button. What does that look like? So I want you to focus on the button itself, but also these different states.
And then lastly is the JavaScript file. I'm not going over this. It's kind of just a flex that I can't do this. My button, when you click on the button, it creates this little ripple effect. Again, slides, play with it, have fun. But I just again wanted to show you, you can attach JavaScript and do more things there too.
The design kit
All right. This is my Easter egg slide. If you click on this, you get my design kit, which is a markdown of all the elements here. And I don't have time for that. You guys all have computers. I want to talk about my two favorites in the kit. In the kit, you're going to put the output. I need to see what it looks like. But also the code. Because if it's not documented, it doesn't exist. So document. Okay?
And why I want to show these off is because they're so cute. So when I hover over this input, it turns black. And then when I'm inside that input, my label turned pink. And that was hard. So please let me have this moment. Another thing I wanted to show is you can really have a lot of voice in what I'm going to call or what are called microinteractions. I for my tab panel here, I wanted a little swoop, swoop. I think that's really fun. These little microanimations are a really lively way to set up your slides. But you don't want to go too crazy and like turn it into, you know, a PowerPoint deck with like animations all over the place.
So this is kind of like a take a picture to last longer slide of elements to include in your UI kit. Nav bar, tabs, buttons. You know, go ahead, smash that like button. Perhaps not needed in an academic setting. So you don't need that in your presentation. But other elements here that you can take away from this.
And then lastly, I this is all like standing on the shoulders of giants here who have written incredible books on how to integrate JavaScript and CSS in HTML and R. And then I wanted to also plug this incredible book refactoring UI which has amazing visuals for like this why does this bother me and this looks great. And with that, I just want to thank everyone. It's been so awesome to be here and hanging out with everyone has been incredible. So thank you.
