Designer + Developer Workflow

Live.

Yeah, we're recording it looks like it. Hey, Dan. Dan, do you want to make a website?

Let's do it. Let's do it, Brad.

So we've been talking about this for a while. We've been working together for a long time now, and we do quite a bit of talking about the web design process and what all goes into making websites. And a lot of our work together involves us collaborating pretty closely. So we're like, we need to actually make this happen. Like, let's actually show people how we work. Not just sort of talk through it, but just do it real time. And. Yeah. So finally carved out some time to do it and we were like, okay, well, we need some actual work to do, just because that's. That's helpful. As it turns out, we're going through a redesign or sort of like a. That we're entering into the next version of Pattern Lab. So Pattern Lab three. And there's like a bunch of new stuff coming out and stuff. And as a result, we want to make sure that the design of the Pattern Lab website looks distinct and looks nice and looks sort of different than it. Than it is. So I'm going to share my screen real quick to just sort of give you an idea of like, sort of what it currently is. If I go to Pattern Lab IO, can you see my screen? Okay?

I can see it all right.

Excellent. So, yeah, so what we're looking at here is this sort of like crazy, crazy design. This is all sort of like pre CSS grid and stuff like that. But basically I made this at the time just as like, I wanted to sort of be clear that Pattern Lab was like a workshop environment. So it's like not like a tool like bootstrap or foundation or something like that. It's not like a UI kit that like, you get an aesthetic style. And so that's what sort of like inspired this sort of very like grayscale sort of system font. Just sort of like blank slate almost. Does that make sense so far?

Yeah, totally. I mean, for the record, just for everybody watching, Brad has said, hey, look who should work on a Pattern Lab thing? But we haven't really talked about this more than that. So even some of the stuff that you're saying, Brad, I'm like, oh, that's interesting. I didn't know that. I'm going to take a couple of notes here too.

Yeah, we're totally coming into this cold. Like we have not pre planned really any of this. And that's sort of the spirit of it, because I think one of the, the goals I want to get out of this video is to just sort of like help people understand like that you could actually do real work pretty quickly. You don't, you know, like, of course you should, you know, in a real project, you know, you have a lot of stakeholders, you have a lot of stuff floating around. It's not just like, oh yeah, me and Dan are just like sort of off on our lonesome sort of doing stuff. But like, I think very often we get into the bad habit of going like, we paralyze ourselves in not building stuff right out of the gate because it's like, oh, you know, we don't know like what the overall mission is or whatever. It's like, come on, like if you're working on E commerce site, it's like, I could build that whole E commerce site like right now without knowing anything about the kinds of products that are being sold. It's like, you know, there's going to be some sort of requisite parts of that stuff. And that's, I think the sort of, the spirit of this thing right here is just like, all right, we're building a, a site for an open source tool. It has some documentation, it has sort of like some areas for demos. It has like a homepage. It like needs to sort of talk about what this thing is, but also sort of show how we use it. So that's like the sort of spirit of this project. And so irrespective of like what the project is, you know, even if it's not Pattern Lab or whatever, it's like there is a type of website project that has certain parts to it and yeah, you could get funky with it. You could like, you know, sidestep certain things or do whatever, but it's like, you don't have to do that. You don't have to do that before you actually start building. In fact, it's like a hell of a lot easier to do it like while you're building or after you build it, you can sort of reshuffle things or explode things or whatever. That's, that's the fun of it.

I think one of the important things about the way that we work too is quickly getting to a first draft. Like you said, if you're building an E commerce site, yeah, you do have to know what the mission of your particular site is, but you'd also abstract it a little bit and go, all right, well the first version just needs to be able to sell and buy things. So you know that about an E Commerce site. That's enough to make a first draft of the thing. It might not be enough to finish it, but we don't need to finish it yet. So I think part of this is just like how quickly can we get to a first draft and then, and then a second draft and a third draft and a fourth draft and really like iterate our way to a final thing in the same time that other designers or developers might take to do like the one perfect version?

Yeah, I totally agree with that. And I just like want to sort of like this sort of iterative process. Like we talk about it as almost like sculpture where it's like you sort of, you know, you have a slab of material and you just start chipping away at it. You carve out sort of a rough shape. It's like here's like the general shape of the project and then it's like we can sort of take a second pass at it and start it. You know, all the while we're sort of talking back and forth, we're establishing ideas, we're sort of like playing around with stuff. But it's like we're able to do that while simultaneously chipping away at this thing. Right. And you know, eventually you get to a point where yeah, you like have out your fine grained sandpaper and you're like really bringing the thing home. And that's important, but it is, it's like this sort of iterative building up fidelity all the time. And yes, sometimes there's like sort of like weird, you know, sort of tangents will go on or things that end up in the, in the garbage can and stuff. But that's, that's okay. That's part of the process.

So make some things.

So, yeah, so yeah, with that in mind, let's, let's, let's make some stuff. So I guess maybe I'll tell you my strategy and then if you want to talk through your strategy. So I haven't done any pre planning for this aside from what I've done is I spun up. I sort of have a vanilla version of Pattern Lab. This is a little confusing because it's like we're using Pattern Lab to build Pattern Lab's website. But that's fine. We do that stuff all the time. It's like this weird dog fooding, cannibalization sort of thing. But I don't have everything built. Nothing in here is related to the Pattern Lab project. I have a few sort of basic components, just like some basic stuff. Like here's like a button and like, here's like a page, and this is just a page that has, like a header, some text and a footer, and it's all pretty bare bones. And this sort of same thing goes with, like, I have, like, my CSS structure. And so you could come in here, you could see, like, my sort of button component and sort of stuff like that, but it's a blank slate. It's just like a vanilla, like, starter kit. Like you would download, like a vanilla, like, WordPress theme or something like that. So that's my environment.

What is that? Open source? Can anybody get to your vanilla Pattern Lab?

I think so. I think it might be live, but I'll make sure it is by the time we do this. But, yeah, but it also includes, like, some other sort of cool stuff. Like, so, for instance, it's like, yeah, so these brand colors, like these, like, color Chiclets and stuff, are all sort of representative of the variables in my sass and stuff. So it's like, if I add a new sort of color variable and stuff, like, it'll actually show up in my. In these little color Chiclets on the front end. So there's like some niceties in there and stuff that are sort of just like, sort of. We built this up over the last five. Five years, you know, it's sort of like automatically sort of building things and establishing conventions and little sort of tricks. So anyway, so all that's to say, I'm ready to rock and roll on my end. And so I'm going to be doing this work through the lens of Batterlab. Cool. What are you going to do?

So right now I've got three notes because I don't even know what we're designing and building yet. You haven't even told me. So I'm just kind of listening and preparing. I've got Photoshop open on my end. I'll share my screen in a little bit. But I've got three notes of what you just said. One is. And they're just kind of idea starters for me. So the first thing is, you said part of the goal of Pattern Lab, and you've written about this a lot, is that it is a workshop environment. So that's given me a couple of ideas of, like, it can't feel too polished, because if it feels too polished, it sort of betrays the nature of, like, it's got to be kind of a place where we can play maybe it's got to be a little bit messy. So it's given me some stuff, aesthetic ideas, you Mentioned, like system fonts is kind of where you started because it does have to have that kind of rawness to it. So it's kind of making me think, like, maybe there's sort of a Craigslist vibe or an ebay kind of vibe or, I don't know, something utilitarian that's not too over the top or too, like, too designed, I guess. And then the third note that I've got, the last one I've got is, you know, you said it's a little bit weird because we're building. You were using Pattern Lab to build Pattern Lab. And that made me think of the movie Inception. And I'm like, I wonder if there's like sort of like a thing inside a thing metaphor that we could use, which is like, you know, fitting with atomic design and atoms and molecules and, you know, all of that stuff. So just thought starters. I don't really know what we're going to do with that yet, but I've got three notes on my paper, I've got Photoshop open and that's all I've got so far. It's just like, you know, tell me what we're going to make, but that's what I've got. Those are my raw materials so far.

That's great.

I love it.

I'll give you one more thing, and this is one other sort of consideration for this design is that, you know, so Pattern Lab now is like five years old. So it was born of projects that we worked on. So our very first projects we worked on together. It was like sort of like the nugget of the idea that eventually became Pattern Lab. And Pattern Lab sort of like taken on a life of its own. People like Dave Olson and Brian Munzenmeyer and Evan Lovely and like all these great people have the way smarter, actual programmer people have taken this over and turned it into this really powerful software that helps power the UI design systems for a lot of big organizations and stuff. But at the same time, we live in a sort of weird industry where it's like anything that is old is considered stale and crusty. And it's like, even if it's just stable technology and tried and true, it's like, if it's not a brand new repo that was released yesterday, I'm not interested in it. It's a very sort of weird mindset and stuff. And it's also worth pointing out that sort of like the new version of Pattern Lab, we're paving the way for a lot more flexibility. So it's like supporting a lot more templating engines and supporting a lot more stuff. And we're actually sort of getting it ready to sort of build both the workshop view and also the sort of polished storefront view from the same code base we have react started in there. All that's to say the tool is still around. There's old dog, new tricks situation here. And we do want to have people come to the website and have it feel like this is a modern tool, because it is.

Gotcha.

But, yeah, so cool. That's just one more thing to chew on.

Bless you.

Sorry, it's my brother.

We're polite on this video.

Anyway, so. So, yeah, so that's. That's really all I got. So I think, yeah, let's. Let's get to work.

All right, where should we start? Like, do you want to start with the Pattern Lab tool itself, or do you want to start with the marketing site for Pattern Lab? Like, what's the. Let's.

I think the marketing site is sort of the area that I think needs the most love. It's like, you know, I'm just not a good designer in that respect. And like, so I sort of like, look at this and cringe a little bit. And it's fine, you know, like, it's all good, but like, one of the big things that we're really trying to do is like, just like really making like this documentation and stuff, like, really shine and just like make it like really easy for people to get up and running with and understand what this thing is and how it gets used and stuff. So it's like my hunch is almost starting from a documentation detail page, like, oh, here's the installation page, for instance. And that as we sort of look at this, it's like, oh, there's table contents kind of thing you'd see on any documentations thing where it's like, here's all the different docs and then here's some stuff. And it might have some image. We want to get more images or animated gifs and stuff. Hell, even videos and stuff like that involved in this, which would be really, really cool to just say, hi, I'm Brad. Here's how you install Pattern Lab. I think that that could be really cool. So, yeah, doing something like this could be really neat. Maybe sort of along those lines. One of the other things too that we're trying to do is like, right now we just have like one demo of Pattern Lab that just sort of kicks you out and it's like, oh, here's What Pattern Lab sort of looks like, it's also sort of an old version of that, but also it doesn't reflect, like, how vast our ecosystem is now. So it's like we have things that are powered by mustache, things that are powered by twig, things that are powered by handlebars, and, like, you could build and do so many things inside of it. We want to have a demos page that actually shows that breadth of what Pattern Lab can do, rather than just like, oh, here's a demo of this thing. So this is sort of like a gallery, sort of demo gallery kind of page going on docs stuff and then the homepage that basically sort of, like, gives you an idea of, like, what it is, what sort of features it has.

Cool. All right, so I'm going to treat you a little bit like a client here. Have you seen stuff out there that you're like that? You see pieces of that, like, oh, that'd be cool. And that'd be cool. Like, you know, is Node's page great, or is there, like an app that you're like, oh, they have a really good sort of, like, getting started flow. Like, is there anything that you've seen out there that you're like, oh, I want to integrate that stuff in here?

Yeah, yeah, there's like, as far as. As far as docs go, I've always been impressed, strictly speaking, from a content perspective here, but it's, like, always been impressed with WordPress's documentation. It's always super comprehensive. I feel like I'm able to go there and understand what's going on, and they give a lot of examples and stuff like that. I really, really love that. But one other thing that's been really, really cool has been Vue JS's guides have been just incredible. It's just, like, incredible copy. It's just incredibly approachable and really sort of like, friendly. And it's no sort of secret that I've been sort of overwhelmed with a lot of These sort of JavaScript frameworks and stuff, and, like, sort of feeling like I'm sort of stepping into this alternate universe and stuff. And they've just been doing, like, I think, just a really great job at creating these really nice, you know, approachable guides. Look, they have, like, these, like, little. Try this lesson on scrimbo, whatever the hell that is. But, you know, it's like, there's like, these. These, like, little, like, interactive things, but lots of examples. But if I'm honest, you know, so much of good documentation is, I think, just, like, Good copy and good, you know, sort of like just like cleanliness. You're able to sort of come to it and sort of feel like you can you have this. You're not just getting buried in a bunch of jargon and what have you. So that stuff, head and shoulders, I'd say above everything else is just like, wow, I want to learn this now because it's very obvious that they put a lot of effort into making it easy to learn.

Okay, so one thing that I'm looking at, the WordPress one, and you've got the view one up. One thing that I can see as a commonality sort of between the two of them is a side navigation. And I think that if we're talking about patterns, side navigation is really helpful for lots of different, especially a tree structure where you've got lots of different nested levels. Whereas a top level navigation is sort of good for like a handful of categories. But if you've got a longer one, side navigation is helpful. Do you think that side navigation will be good for the documentation side of Pattern Lab?

Yeah, I absolutely think so. And I'd say that you could go to any tool anywhere. Chris Coyer just released this new thing. What was it? It was like Chris Coyer, it was like a documentation template, sort of. He just made this thing and it was like, yeah, free template doc template. Oh, no, no, this is from 2010. Of course it is. Of course, yeah. He's like, done. Yeah, I'm gonna have a hard time finding it, but it was like within like the last week or two or something. But like it's, it's basically like a boilerplate for like documentation and stuff. And there's, there's, there's a few of them out there, but like, I think that you would see probably 95% of them have some form of sidebar. So I'd say that that's like a common thing for developers going to different tools and seeing stuff they're going to expect. I would say that that sort of like sidebar, that tree navigation kind of thing.

All right, so here, this is a good place to kind of jump off of. And this is I think, sort of like the way that we start our process that's maybe a little bit different than the way other people would do it, which is that when there's no need to reinvent the wheel, don't do it.

Right.

So it's like if there's a common pattern, especially in documentation of some side navigation, whether that's left or right, I think we can Argue about that and we can test that out and look at both variations. Some sort of side navigation and then some sort of, like, main column that has the content. Now, what most designers would do is they go, cool, I'm going to design. I'm going to go whip up something in Photoshop that has the stuff on the side and then stuff in the middle. But we don't need to do that because you can build that faster than I can design that in Photoshop. Because what I'm going to do in Photoshop or Sketch is I'm going to be really nitpicky about all the little details. And it's going to take me hours to get all the details right, to get to a point where I can show you a PNG or a JPEG or something. You can scaffold that way faster than I can. And so I think this is one kind of big point to point out is that where we started the design process, this is really what it looks like to design in the browsers we started in code. Because you can build the scaffolding and I can focus on the little nitpicky bits of the spacings and the typography and the colors and all that stuff. So as you all can see, what Brad's doing is he's just building the scaffolding. Right now we just need to build an FPO scaffolding of this. But because Brad has a boilerplate, a vanilla pattern lab installed that has some patterns already in there, just the typical stuff that you might see on any website, we can build that stuff really quickly. I'm not worrying about making that in Photoshop. I'll show you what I will do in Photoshop in just a sec. But Brad maybe just set up the scaffolding for a sidebar and a main column.

Yeah, totally. Oh, yeah. So here's this. I just sort of created a new. Just created a new template that just sort of built upon this. So the way that this works, I'll just sort of zoom in here if code lets me. There we go. So I have like, I have my header, right? So I'm including my header organism, I'm including my footer organism, and then I'm including the guts inside of it. Inside of it. I'm including a page header, and that page header looks like this thing. So it's like, okay, I have a title and I have a description. So it's pretty basic, but that's like you're sort of H1 and sort of like an optional description. And then Sort of, I have a text passage and a text passage is essentially just sort of like a big blob of text, right? So this is like something that like WordPress or Jekyll or Gatsby or any other sort of like static site would like spit out. And markup, it's just like sort of like raw markup, right? And that's, that's what this, these documentation pages would be written in, right? So they're written in markdown, converted to HTML. So it's like you just sort of have a wrapper, but then inside of that wrapper there's like raw H2 tags, raw block quotes, raw bulleted lists and things like that. So what I did was I sort of created, I created a template and I called it Detail. So I call it Detail. And I could have called it like documentation detail or something like that. But I just trying to keep things, the naming of it sort of pretty agnostic. And now so within here you'll see that down here I've created a, I've created a tree navigation and you sort of see this hanging out here. What I'm going to do here is just bump this up. We have this other little file called Pattern Scaffolding. Basically this is stuff that doesn't actually appear in your real code. It's just a thing that's involved in Pattern Lab. This is for stuff that appears inside of Pattern Lab shell but doesn't actually get exported to your code base. I want a 4 placement only block essentially for this new sort of tree navigation. So I'm gonna do that. I'm gonna say text align center. And now I have this sort of, this thing. Let's go sort of rebuild the project. I don't think that I have this part wired up in my, in my starter kit here. Okay. Go back to my detail page. Yeah. So tree navigation, did I get that right? Ah, crap. Why isn't that working? Yeah, we'll leave that be. But the, the basic deal is this, right? I'm basically just trying to like chunk this out as like a. Oh, hey, I need to build this pattern somewhere along the lines, right? It's like I'm going to sort of rip this out, you know, I'll do font weight, bold, whatever, Text align, center. You get the idea, right? It's just like here is this thing that allows us to sort of, you know, sort of. I'm gonna sort of replace this thing, this FBO block with an actual pattern in a couple minutes. But so I could, I could get started. Now back to what you're saying, like, I could get started doing a little. Doing a little thing here, right? I can make my little lgrid. Maybe I should. I'll follow our conventions. I'll sort of go lgrid main, lgrid sidebar. So we sort of follow like a Bend style syntax. So I'm sort of defining like a global layout object called it called a grid, and then sort of like giving it grid main and grid sidebar or something. Okay, so now inside of here. Oh, yeah, I do have some defaults in here for this stuff. How do I want to do this? I'm just gonna burn this down just because it's easier. We're gonna start from scratch. This is where sometimes even your vanilla boilerplate gives you too much. So. All right, what I need to do now is get this tree navigation stacking beside my thing. Have you done any grid stuff yet? I have.

It's great.

All right, help me out here then.

I don't know if I can do that.

Do I have it right that it's something like this? Grid columns, and if I, like, define this thing?

Yeah. The stuff that I've done so far, and I'm showing my naivete here, is I usually don't go with units quite yet where I'm just like. I just kind of want two columns. So I'll just do like one one or something like that to be like, all right, this is two columns. And then my cheat is exactly what you're doing. I'll go to the grid plan.

Grid by example by the great Rachel Andrews.

Cool. I'll just copy and paste.

Yeah. Okay. So she. She's using the. The grid area stuff. I don't know if I'm. I'm down with that. Oh, grid template columns. That's what we're talking about. I just didn't have the syntax right. Grid template columns, please work. Hey, there we go. Nice. That looks like a page layout. And so basically, as I understand it, this FR is basically almost like a. Like a Flex one kind of situation for this stuff. So we're basically saying, okay, our grid container, which is this guy here. So it's like L grid. And then we're basically saying the first column is going to span the remainder of the layout, except for this sort of 250 pixels that I defined for my sidebar. So that's pretty neat.

Cool. All right, let's switch over to me. I'm going to show you what I'll do in Photoshop. I'm going to share my screen here.

Sounds good.

Got my screen here.

Yeah.

All right, cool. So I've got a browser open here, and I've got the Pattern Lab site up right now. And what I'm thinking that you're probably doing. So this is going to be a little bit linear where you do a thing and then I do a thing and you do a thing. But in reality, we would be working in parallel. While you're doing that, I'm also doing some other stuff, but because we can't share both of our screens at the same time, we're just kind of going one by one. So my thought is, okay, you're working on the scaffolding right now, and you could probably dump in some content if that tree navigation column is on the right side. Well, you can start getting the content for that, the markup for the tree navigation in that. That whole time I'm working on, like, what's the general. Like, what are some of the globals in terms of the style of this thing? That's gonna be kind of what I work on. So I've got Photoshop open here. I don't have a document yet, so I'm gonna create a new document. And Photoshop here is really incidental. Like, this could be Sketch or Figma or illustrator or whatever, PowerPoint, you know, keynote, whatever you want. Just something. Because the way that I'm thinking about my work is that everything I make is discardable because all I'm doing is making documentation for Brad. So everything that I make is going to go in the trash. So I'm going to do it really quickly enough that Brad gets the gist. And then let's work on the software directly as much as we can. So I'm not worried too much about, like, did I get my spacing right? Because we can tweak all that stuff in the browser. I'm just trying to get some of the generals worked out. So I'm not even going to make an artboard or a particular layout. I'm going to go 3000 by 3072dpi and I'll just make a. Just make a thing here. And the first thing that I'm thinking is, well, we're gonna make a, you know, we're doing like a techie thing, right? Like, Pattern Lab is like. Is for developers, you know, and it's for designers. And so maybe I'll start with a dark palette just to, like. I don't know. I'm not sure why yet, but. So let's. Let's pop open a solid color Here. And I'm gonna just say, let's make it dark gray. And let's just kind of see how. See how that works. So this is kind of my background, and I'm just gonna work out some stuff over here. The other thing, the next thing that kind of comes to mind is, you know, you mentioned, well, you were using system fonts, so maybe I'll start there. Maybe, like, what's in my head right now is maybe some system font stuff or maybe some monospace font stuff, where maybe it's system mono. Monospace fonts or something like that. That's what's in my head. What's that?

That'd be wild, seeing some monospace stuff. I haven't seen too much of that.

So what I'm gonna do is I'm just gonna. I'm gonna pop open Ember. And Ember is a screenshot saver, right? So I take screenshots of websites all the time and I tag them. I'm just gonna see what I've got for websites that I've tagged with monospace, you know, that I've liked. So here's one, you know, Manchester Wire. This is kind of interesting, you know, where they're kind of doing this pattern, I mean, masonry kind of thing, and they're using this monospace typeface that isn't. It's not, like, too techy. It's still kind of utilitarian, but. All right, maybe something like that. That's interesting. This one I've sort of tagged with monospace. So this is interesting too, where they're using like a Helvetica or an aerial or something like that. But then doing the calls to action as monospace. I kind of like that. Maybe we'll do something like that. So I'm just going to type out some stuff just to kind of get a sense of it. So here, I'll type out Pattern Lab. I'm gonna make that white. And let's go with Helvetica, because that's what you're using right now, Helvetica Bold. And I'm just gonna blow this text up. And really what I'm trying to do is just kind of work out some relationships, some type relationships, some color relationships. So we'll go with Helvetica Bold, you know, type, but not touching. Some good graphic design practice for you there. And then I'm gonna test out, you know, Call to A Call to Action, right below that. So Pattern Lab, you know, visit Pattern Lab, two T's. And I'm going to just Drop in a monospace font. I'll see what I have activated right now. I think I have. I have Operator, which is a great monospace typeface from Heffler. So. All right, let's grab that. I'll make this a little bit smaller. You know, just kind of work out a couple of relationships here. And I think what I've seen and I'll try to find some samples of this, but what I've seen is, like, kind of dark palettes look good with maybe some vivid call to action. So maybe we have white text and light gray text here. And our call to actions are a bit fluorescent. So I'm just gonna kind of play around a little bit with like, you know, maybe it's kind of this neon green color. I don't know, like something I'm gonna play around with. So I'll stop. I'll sort of use that for now. Maybe they have icons next to it or something like that. And then the next thing I'm going to do is because I'm early on in my process, I want to test for accessibility, too. I want to make sure that this thing is accessible not as a checklist afterward, but as part of the design process. So I like this tool. There's lots of really great tools for accessibility. I like contrast A, and I'll show you what I specifically like about it. Let me grab the hex color of this. So I'm going to grab that hex color, and in contrast A, I can say I'm going to plug in that hex color, and then I'm going to plug in the background color. I can sample that. I don't have that. That's a great app called Frank Da Loop, which gives you an eyedropper everywhere. So there's my eyedropper. Grab that, Paste that in.

I need that so bad.

That's great. So, okay, so what this gives me is. It gives me is this particular green color and this on top of this particular dark gray color. Is it accessible? And it shows me here. Yep. Passes for level 2A WCAG. And it shows me it passes level 3A for WCAG. So great. I'm doing great. If it didn't, though, there's this great button here called Visualize Thresholds where I can just sort of drag this around. And you can see my checkbox is unchecking. Right. If I use this dark green over this dark gray, it's not very visible. I don't have the right luminance contrast ratios, but I can sort of grab this all the Way up. And I can say, all right, around here still gives me a 7 to 1 contrast ratio. So even this color would be great. So the original color that I tested worked. I got lucky. I'm going to kind of keep around with that. And so right now I'm feeling like, okay, this is a pretty decent combo that will look pretty good. I don't know if this is going to work ultimately, but as of right now, this is good. So the next thing I'm going to start to do is I'm going to start to build out my navigation because that's kind of what we're working at right now. So jump back to pattern lab, go to documentation, and I'm just going to copy some of this text so I can use some real content here. So I grab this stuff and just going to make a text box here and just type it out. And we'll go with the Helvetica for now for this, because this is not technically call to action. You know, we might decide to change that later. But I'm going to grab this. Just give it some space in here. Let's see what this looks like. Come on, Photoshop, you can do it.

By the way, while we're doing that, I've created a color brand green in my sas, sort of variable declarations. I've also establish another family declaration that's just set to monospace.

Nice.

It's like, I haven't done anything with that yet, but I'm just sort of anticipating that stuff. Right. So the materials are already sort of there.

So one important thing to point out about that is that what Brad and I are trying to do is we're trying to work literally in parallel. Like everything that I'm doing, he's doing at the same time. All the stuff that he's doing, I'm doing at the same time. Like, that really is the parallel pathing of design and dev, as opposed to a waterfall chain of you do a thing and I wait and then I hand it over to you and then you do a thing and then I wait. So we're really trying to work in parallel together and almost like finish each other's thoughts. So, like, if Brad is watching me do this, he's like, cool, I get it. I can take it from there. And then I watch what he's doing for a little bit. Okay, cool, I see what you're doing. I'll take it from there. So I'll just do a couple more steps and then switch back over to you, Brad. But like this to Me seems like a pretty decent nav. The bold is feeling a little bit too bold here. So what I'm going to do is maybe we'll go back to a regular weight for this and then maybe just for the one thing that we're on, maybe that switches to bold. And I don't know if this is enough contrast. So maybe the things that aren't current, maybe we go a slightly lighter gray, you know, or slightly, yeah, slightly grayer for those so that we get some emphasis on the one that we're currently on. And again I'll do the same thing. I'll test the accessibility of that.

Right.

You know, before I mentally commit to that.

Yeah.

And then the other thing I'll do is, you know, let's say these, is this is like a second level. Let's, let's see what that might look like. You know, I'll invent. Right now I'm just kind of picking numbers. So I like using an eight point grid just as a starting point. So let's say I use a multiple of eight. OK, so 24 points over. We'll indent that thing. Let's see how that looks. Oops, you did the wrong one. 24, it's not quite enough. Maybe we'll go up to 32. All right, we'll start there and then a typical pattern that I've seen before is maybe we have a rule here or something like that, change that to white. And then I'll just sort of drop the opacity of that to say, alright, we're in this section. So as of right now, that's kind of all I've designed. Brad, what I would do at this point is I screenshot all of this, send it over to Brad. Hey Brad, check out what I'm playing with. And then Brad might give me some feedback on this. So I'm going to stop here, I'll stop my screen share punt over to you and actually let me do that, let me take a screenshot here of this stuff so that you snap and then let me stop my screen share, give you that in the chat. There's your screenshot and now you can kind of take it from there. So I haven't asked you for your opinion on any of this stuff yet. I just kind of been playing around. So. All right, so for you, like what do you, what do you make of all this?

Yeah, what I make of it, this is, this is where things get, get interesting because I'm sort of simultaneously playing the role of both client but also your sort of partner. So it's like with this, it's like, you know, if I were a client, like how we tend to approach this stuff is like. And I love how you frame this stuff with our clients is basically like, how, how does this feel? Does this feel totally like off the mark? It's basically like, are we moving forward or does it seem like way out of whack? Like, does it seem like just, just a place that we shouldn't go? And it's all about sort of an evolution, advancement of the conversation, sort of like getting like the concept down rather than. It's like here is a finished finalized thing and we want your thumbs up or thumbs down. And like in, you know, just getting into all that sort of granular level stuff, especially this early in the process is just like totally like totally not constructive. It's like it just, this is what like a bunch of teams fall into that like sort of loop that ends up having them get, you know, create homepage version 24. You know, Brad edits or for dev review or for client review. It's like, it's just like sort of nasty stuff. So it's like the framing of all of it is much more important as like this is like, here's some stuff, here's some ideas and what I could do is sort of like take that stuff and go, oh, okay, I could do stuff with that. I like this idea of the sort of Helvetica and the monospace pairing and I think that there's some stuff to work on there. But also me, Brad, as a front end developer, I'm like, cool. Well, I know we're going to have this navigation and I think that this looks just like a fine place to start to sort of get that component actually built. So what I'll do is I'll sort of share my screen now and. Am I sharing my screen? Excellent. All right, so I'm looking at this thing and this is where things get fun because it's like Zeppelin and like all those other tools, it's like we're just share like dumb screenshots to each other and sometimes I'll take it, I'll copy it and sort of dump it into my version of Photoshop. But it's like it's, it just, it doesn't matter. Like the actual tools don't matter and like it's just strange that we tend to dwell in or a lot of design teams like tend to like dwell in those and care very deeply about them. And it's like, no, it's all means to an end. So let's come back over. While you were sort of like sharing stuff, I did a few things. First thing I did was I sort of created a few new templates. So I created a detail page and, and that could be sort of considered like one of these documentation detail pages. We created a gallery page because like I said, we're going to have this demo gallery sort of thing. I don't know what that looks like yet, but that'd be cool. We're going to have a homepage and we're going to have what I'm calling a table of contents and that might be able to be used for this documentation homepage for instance. And then I created a new tier called pages. And what the pages do is our sort of specific implementations of these templates. So these things are generic, right? So it's like if we had like a gallery, well we might have like a demo gallery and that'd be cool for that. But then we also might want to add, and this is a thought that has come to the team's mind is like have like a gallery of like people who are actually using it, right? Like public pattern labs and like link out to like, you know, different companies sort of public facing pattern lab sites. That'd be really cool. So all that's to say that's the same template or potentially the same template. And then at the page level we'd be able to sort of say okay, here's our demo gallery. But then we might create another page that is like examples gallery or sort of like in the wild sort of gallery. So all I did here was I just sort of created these pages in my editor. The way that I accomplish this stuff is I'm able to suck in my gallery template at the page level, I'm able to suck in my detail template for our documentation detail. I'm able to suck in our table of contents page here. Then at the home page I will suck in my homepage template some of this stuff. Again, all I'm going to do here is just these are just blank files. For right now. We're at least going to have a header, a footer and a main area. That's safe to assume, I think of any site that we work on. It's probably safe bet we're going to have a header, we're going to have a footer, we're going to have some stuff in between. All I did was just copy those things over. Now we're looking at, you know, sort of, you know, the exact same Page, essentially for this stuff. And then now, of course, you know, we could go in here. It's like, we don't want this sort of two column kind of thing for the homepage. Right. I could just sort of rip this stuff out and I can just say, you know, just say homepage and sort of save that out. And now you sort of are getting the idea. So this is another sort of part of our process that we're not actually sort of talking about, which is like IA and stuff like that, and actually like sort of getting all this stuff. Historically, this stuff was done in a bunch of crazy wireframes. It's like, here's a 200 page document that explains what a homepage is. And it's like, cool. Well, we could like literally stub this out as like a bulleted list, right? So it's like if we wanted to talk about what goes on the homepage, and this is a good conversation to have, we don't have to do it right now. It would be like, you know, like sort of hero, you know, splash area or whatever, something like that. And then we'll sort of come, you know, create a new list item and we could sort of call that, you.

Know, let me jump in here because I think I can, I can help you while you're building this.

Okay, great.

So oftentimes what we'll do is, you know, we often work with another frequent collaborator, Josh Clark or Jennifer Brook. And like one of the things that they as sort of like prior to product directors and IAs and user experience designers is help figure out what the jobs are for the page. What are the jobs that this page needs to do. I just did a quick jotting down of what would the homepage, what would the jobs of the Pattern Lab homepage be? The first job would be to explain what is it that hero splash area. The job of that is be like, what is Pattern Lab? You can get even further than just saying hero. You could say, well, this is what the hero is supposed to do and just in plain text. And then the second thing is how do I use Pattern Lab? Right? So maybe that's a link off or call to action to documentation or examples or something like that. And the last thing that it could do is, sorry, not the last thing. The third thing that it could do is show me examples of Pattern Lab. And that goes to the gallery idea or the, in the wild idea that you were talking about where it's like, all right, well, I get what Pattern Lab is, I get how to use it. But Will it work for me? So show me some cool stuff that that was done in it to convince me. And then maybe the last thing for now and we could always edit this list. The last thing for now is, okay, show me the actual thing, where do I download it? And we can talk about maybe that belongs in the splash area. But we know for sure it's got to be on the homepage somewhere. So we can always reorder this. But now we're at least capturing this is the job that this page has to do. Here's the list of stuff that needs to do and then we can reorder that if we realize, oh, this is actually needs to be more important or.

Higher up on the page. That's right, just this thing right here, like with a client we can have a thoughtful conversation about like here's what this page needs to do and here's the general hierarchy or priority of the stuff that goes on the page. And this is great because this doesn't presume anything about the aesthetic about the layout and make any sort of technical assumptions about any of this stuff. So it's like, this is fantastic. So and quite literally like our wireframes anymore sort of look, just we'll use like a Google spreadsheet or something like that to sort of do that. But then we'll very quickly bring that into Pattern Lab and just sort of stub this out. And then so, you know, it could be a safe assumption that we go, oh, okay, this HERO splash area, we know we're going to have some sort of like featured sort of like call out area. Let's say that that's like a safe assumption. So what I could do now is sort of come in to my molecules. So we tend to sort of call this like we create a new folder and I tend to call these things like blocks. And blocks are just these sort of like groups of tech, like callout area. Let's say that that's like a safe assumption. So what I could do now is, is sort of come in to my molecules. So we tend to sort of call this like we create a new folder. And I tend to call these things like blocks. And blocks are just these sort of like groups of text and or images that travel together. So I can now create a new thing called Hero. And so now using our sort of CSS conventions, I have like a C Hero. The C stands for component and I'll just say H1 class equals C hero Title. And then we're going to have some sort of title in here and Again, I have no idea. And like, you know, this is all to be determined, right? But what I'm able to do is I'm able to sort of come in here and I'll just do a description and let's just say I have like a description in here as well. So sure, who knows? But now, okay, now I could come back into my homepage template and I could say, all right, I want to include my molecules called hero. And I'm just going to remove this from my little FPO IA list and come in here. And now I have Title by default. You can see I sort of like set this to Title, nothing set for description. So that didn't show up. But Title is actually company name apparently in my little vanilla build. But now the cool thing is now I could come in here and create a homepage JSON. Now I can actually override those things. I could say title, welcome to Pattern Lab. And again, we have to work on all of that, right? And then here's a short description of what Pattern Lab is. I don't know. Right. So this is going to go through and this is going to build and now we sort of have our content updated. So that's cool. So again, so it's like we're sort of all at the same time just sort of blending like IA and blending visual exploration, blending like a lot of this sort of what I call like front end prep chef work together. It's like, okay, we know we're going to have some sort of HERO area, so I could get started building that as a front end developer right now. We could have conversations about the copy, we could have conversations about the art direction of that thing. But it's like it's at least, we at least know we're going to have this stuff, so we might as well get to building it. Right?

You know, one thing that's worth noting is that we both talked earlier about how we try to work in parallel and all sort of work on the same thing. So you just stubbed out a JSON file of the hero. And in projects that we've done before, you've got the stubbed out JSON file that has temporary data. The copywriter that we're working with, if they know how to edit JSON, they can now go and edit that JSON file. While you've got the scaffolding, you've got the stubbing that's all built. The copywriter can edit the JSON file to write the copy directly in the build. While I'm off sketching Some other components and some other things in sort of a visual environment. So again, this is like enabling us all to work together on the software. And it requires a little bit of changing of kind of process and dynamic and everybody learning a couple of new things. But they're not hard things to learn and they're not tall orders. It's not like you have to learn how to be a developer to do that. You might have to learn to edit a JSON file. And that's not terrible. That's something that, with a couple of lessons, you can get that under your belt pretty quickly.

Right? Right. Yeah. So one thing I'm also going to show. So while you were sort of creating your little visual exploration with the tree navigation, I did go ahead and build out this tree nav and just gave it this passed in this data. And again, in Pattern Lab, we have a global data sort of thing. So inside of navigation, I was able to create. Create tree nav items and then I can sort of come into navigation and go to tree nav. So I just have like a loop, right? So it's like, okay, here's like a list of stuff. And granted this is probably not all the markup that we would have. I definitely want to make sure we have the right sort of like role attributes and stuff, like in there for accessibility and stuff like that. And there also could be different sort of considerations. But at the same time, a tree nav is in essence like a list of stuff. Right? So it's like, okay, I at least can mark that up now and again, fully knowing that we're probably going to be touching this stuff quite a few times after this. And that's okay. And I think one other thing that I want people to take away from this is like, historically Dev has been paralyzed in that it's like we have this one shot to do this. It's like Star wars where it's like this tiny little hole and if you don't get everything, the whole mission has failed. But it's like, no, you know, this is a first pass at all of this stuff, right? This is not like this isn't. You know, we're gonna be revisiting this component and all the rest of them like a hundred times over the course of a project. And that is. That's the right kind of iteration because we're iterating over the real stuff rather than artifacts of the real stuff. So anyway, so just wanted to show that so I can, inside a Pattern Lab, I could just sort of zoom in on this tree Nav thing here right now. But then what I do want to show is sort of remember we've created that little FPO sort of brick there. So now what I want to do here is I want to come back into my detail template. Here's my little FPO brick. And now I'm just going to. Now that I have a real component built, I'm going to sort of rip that out and replace that with tree nav. And then whenever pattern library builds, it's going to go through and it is going to sort of spit out. So there's my little tree nav. Okay, so that's like starting. It's starting to come together, right? So like we'll sort of brick out these pages like we just showed with like the homepage. But as we sort of build out the components, we'll sort of rip out those sort of like four placement only things and drop in the actual sort of like rough sketch of the actual component instead. So.

So, okay, I have a question for you.

Yeah, sure.

Can you humor me? I've changed my mind that I don't think I want it to be a right side navigation. Could we make that a left side navigation instead?

Sure. I guess this is fun because I don't get to play with grid all that often and so let's just try this out. Let's see if this actually works. It might be a little different. All right, let's see here. Refresh. Did that do anything? It didn't seem to do anything. All right, let's try this out instead. I think what we might have to do is go into our do do, do do detail page. And actually I think we just want to switch these around. Right?

You can do that. You could also go. And again, I'm showing my naivete with grid.

Grid.

With grid, I think you can go into your sidebar component and tell it which column to line up on. So I think like grid column. I forget the syntax, but you say like be on the second column, not on the first.

Okay.

Yeah, yeah.

So this is. Man, I need to learn grid enough where I could sort of do live stuff with it. But for right now. So basically what we did is I did switch the source order in the actual sort of HTML, but then came in and flipped this around so that the 250 pixels is this and then the 1fr is the second column. Now, just out of curiosity, I do want to see what happens If I changed one fr and then 250 pixels. If this sort of squishes into sort of Like a sidebar kind of thing. Yep, that's funky. But anyways. Yeah, so that's like a pretty quick iteration right there. Right. So this is like once again, it's like in order to change that thing in a tool like Sketch or Photoshop or XD or something like that, it's like, it's not a ton of work, but it's work that.

You just saved me like 15 minutes at least, you know.

Exactly. And moreover, you know, it's like it doesn't, it doesn't. Those static tools, like, it's like we can't talk about like what the right break point is for this. Like, where does, where does this thing start breaking down? Like, we haven't done any sort of like media query sort of stuff in here, but what we can do is totally do that. Right. So we could say, okay, media and min width. What is it? You know, let's. Let's just say where does this start getting crappy? Probably around like there is, right? Yep. 740. We'll say 47 ems. 47 ems. And so what we actually want to do is sort of not do display grid with the grid template columns, or we could do display grid, but then sort of define different columns or something like that on small screens. And then like from here. Yeah. So it's stacked and then ah, whenever there's enough space. And so that's another cool thing. You know, this has been built into Pattern Lab for a while and this is sort of for this reason so that people like, you can go like, ah, at exactly 775, you know, sort of pixels on the four lines or whatever. We can't have that. Yep. So, okay, so I feel like we have like a pretty good structure in place. And so I do want to sort of go in and start playing around with. I think I called like the actual component tree nav. So I'm just gonna sort of also call the style tree nav. I do want to sort of get back to this thing and I think that this is really cool. How about this? Do you want me to spend like a minute or three sort of working on this? If you want to sort of dive into another area that you feel like you could sort of poke around in and sort of explore.

Yeah, because I should. What we did is accurate to how we like to work, which is like I finish a thing, I screenshot it. Here you go, Brad, take a look at this. Work with this. And then I'll go work on some other things. But this is not enough to style the whole site. Right. I've basically given you a color and a couple of typefaces. That's not enough. So I need to give you more so that you can work on more too. So let me show you what more looks like for me, what the next steps are for me.

Yeah, that's great.

I'm going to grab the screen share back.

Okay.

And then, you know, again for everybody watching, we have not planned any of this. So we're kind of making this up as we go along. Just trying to work like we work. So Brad, I think one thing, you know, curious might be helpful if I'll show a thing and then maybe we should just work for a while. Like we don't have to like over explain what we're doing or explain what we're doing. Kind of like work on some stuff silently and. Or not silently but kind of not narrating everything but maybe we'll just work on some stuff.

Yeah, yeah, I dig that.

Cool. So I'm going to jump over here to my browser. What I did was I opened dribbble and I just searched for monospace because I'm like, alright, I want to get some inspiration. I want to get like just some ideas. And the way that I like to get ideas, the way that I like to design is the framework that I use. And I wrote a post about this, we can link up which is that first you imitate, then you remix and then you can start inventing your own stuff. So the thing I want to do is I want to just choose some really good things to imitate and what I'm not going to do is I'm not going to steal from one site. I'm going to steal from a bunch of them and then combine them all together and move some stuff around and then it'll start to be my own composition. Everything is a remix lift from one site in particular. Now you just stole it. But if you can start mixing and matching pieces, that's when it starts to become kind of its own configuration. So I'll show you how I do that. So I just searched through here and I found a couple of things that I really like. Just as I'm browsing here, I'm looking at this one here and I'm like, oh, this is kind of a cool like switches from black to white in each of the sections. So that's a nice way to go. Like here's a top and then here's the main content or here's this. I could see that applying to a sidebar. So I've got that open in a tab. As I scroll down here, I saw, looked at this one and I was like, cool, that looks nice. Where it's got kind of a dark sidebar and a, and a white main column. Maybe we could do something like that. And it's got like a really strong highlight color in the yellow where maybe that's our green. Okay, so I got that open in a tab. Maybe I'll steal some stuff from there. And as I was going through, I saw this one that kind of has a little bit of the same thing where it's black and white, but they're using green as a strong accent for photos. They're kind of pulling in this grayscale. So maybe if we use photos, we sort of have a grayscale treatment and maybe when you roll over them, they turn a color or a tint or something like that. So again, I don't know, just kind of inventorying some stuff. And then the last one I had was this one here, which looks interesting in the screenshot, which is like, okay, there's this cool kind of monospace and really blocky looking layout. So maybe we do something with that. So I've opened that up. So I just kind of want to go in here and find some pieces of steel. So I've got this one open, this Pirate Bay open. And what I really like about this one is that it's got this cool like block level heading, or not block level, kind of blocked off type where it's kind of doing this knockout thing. I'm like, okay, maybe we can use that for headlines. Maybe that's an interesting way to kind of to write up some headlines and maybe even have like a call to action that way. So what I'm gonna do is I'm just gonna grab that little piece screenshot, paste that here into Photoshop, and I'm gonna remix my own version of it. So I'm gonna type out a headline, but the first thing I'm gonna do is I'm gonna use some real content from Pattern Lab. So let's see how it works with Pattern Lab headings. So working with patterns, right, rather than doing Lorem Ipsum, you know, why not actually use a heading that might, you know, that we actually might use in here? So I've got this. Working with patterns, jump over to my.

To Bold here.

And then what I'll do is I'm just going to do kind of a block around it and we'll make that white. I'll make that white. And we'll drop this down, And then that can kind of be black.

Right.

So maybe that's kind of a heading. This works really nicely when it wraps the two lines. So I'm going to just kind of make up my own two line heading here. So we'll go have another kind of taskbar thing. That's lorem Ipsum. So grab that. I can go down here. All right.

Pull this over.

Pull this down. That's kind of a cool look, you know, and we can mess with the leading and the. And the size and all that kind of stuff, but, you know, I'm digging that so far. And let me try out a version of that for our call to action, too. So let me grab this, and maybe that comes over here. And maybe what I'll do is I'll use that green color as the call to action. Block color like that. And then maybe the heading becomes white or black. So black is probably more of an accessible palette there. And again, I can open that up in my tool, my accessibility tool right now and just kind of test for that. So let's grab that hex. And then I'm using black. 000. So, yep. Cool, good.

There.

Sorry. Black it is on that. And, you know, just to check, I'm going to look around now. Okay. Just in case I'm not sold on this. Green. What's it look like?

Pink.

That's kind of interesting. And what's it look like? Blue. All right, cool. What's it look like? Yellow. And these are things that. What's important to me from a principal standpoint is, okay, maybe we have a highlight color. What that highlight color actually is. I don't know. Let's let the client pick that. I'm not precious about that. So it's just a thing that, as I'm designing, I'm kind of thinking about some of that stuff. So this is the way that I would remix this thing where I'm not trying to rip it off completely. I've actually applied the typefaces that we picked to it so that people can't look at this thing and say, hey, you totally ripped off of that thing. If they can. Maybe I want to remix this a little bit more. So maybe I'll grab the call to action and say, well, maybe all the calls to action should kind of overlap the main headline like that. And now it's even farther away from the original source where we're starting to create our own patterns for this particular site. So now that I've got this, I'm going to kind of ditch that, and then, you know, kind of go in here, maybe I'll grab one more thing to show, and then Brad, kind of jump back over to you. Let's see. So this is another one that I found interesting. And as I looked at this one, what I'm trying to do is I'm trying to apply our content and context to this design and going, like, where could this come in handy? And, Brad, in your initial description, you said on the documentation page, you show kind of the Vue JS stuff, where it's like they have these. I don't know if I have it on this page, but they have these sort of, like, inset, like, here's a demo right in line. Or there's kind of a call to action, like, go see the demo. So one thing that I could see is maybe we do. Maybe we have this kind of light gray somewhere, and we could do a white box on top of that light gray. And the white box is the thing that's kind of the call to action. So I'm just going to kind of try that out and see. Now, one thing to point out is that it's really important to keep your layers organized. It's really important to have organization. Every chef knows that at your station, you got to keep your station clean, right? You don't want to be cooking messy. So before I get too far, I actually just kind of want to go in here and do this. So I'm going to take some of this stuff and just really quickly say, okay, this is my nav. I've got a group by nav. I'm going to group my header here, you know, header. And this stuff, I'm going to say this is my headline. And then this stuff is my cta, my call to action. Then this is the headline plus CTA group. So now I've got a cleaner station. So now the next thing I'm going to do is I'm going to create. Let me test out a full layout to see, even in a thumbnail view, how does the harmony of this actually work? So I'm going to call this layout test. And inside this layout test, I'll grab. I'll just draw a big square. And this is essentially a canvas, right? So here's my canvas, and my canvas is gonna be white.

White.

And then I'm gonna. I'm gonna create my sidebar there. And let's call my sidebar, you know, kind of a gray. I'll make it a little bit lighter just so we can see it. So I'VE sort of approximated what my layout is going to look like. So we've got our tree nav, conceivably, is going to be over here. Our documentation stuff is going to be over here. And I already see the problem with this, where I'm like, all right, well, the reason that a white box works is because it's not over white, it's over gray. So I've got to figure out a way to get gray into here. So I don't have any good ideas off the top of my head, but maybe there's a gray section here somewhere like that, and maybe it's kind of a light gray like that, and we'll attach it there so that maybe we have these sort of gray sections, and then inside of that, we've got our call to action like that as a white box. So that could work. Right now, I'm just kind of testing this out. The other thing that kind of comes to mind is, I don't know, maybe it doesn't span the whole thing, but maybe it's kind of offset like that, and I lose kind of the edge of this, of the left side of this here. So maybe I want to put a shadow in here to kind of help establish it. I don't know. At this point, I'm still kind of playing around. I'm still establishing the palette and sort of the globals and sort of these global patterns where this is kind of what our tree nav looks like, this is kind of what our header group could look like. And then what does the kind of overall thing look like? And what I'm doing here is again, just establishing sort of our globals and so that Brad can work with those as he's doing some of the specifics. And that's opposite from what designers and developers usually do, right, where designers are usually doing the specifics, when developers are doing the globals. So what we're trying to do is kind of like balance each other out. When Brad's working on the specific stuff, I kind of zoom out and work on the bigger stuff. When I'm working on the detail stuff, then he zooms out and kind of works on that stuff. So this is kind of what I would be doing in the meantime. I'm going to stop there. Brad. You probably have some stuff to add to that or comments or some other stuff to show, but this is kind of what I would be doing in the meantime.

Yeah, no, I think that that's really good. And I'll say that it's hard to sometimes it's hard for clients and stuff to see stuff floating around in the ether. So it's important to sort of help ground it in a page layout and stuff. I think that that is really important. I think that all of this stuff is really great as far as the, the color explorations and sort of get, you know, because that is, that's one of the hard things about any team designing and components is it's like, okay, like you can actually create all these things that look really cool in isolation. Like that page header kind of treatment with that sort of staggered effect is like, ah, that's pretty neat. But it's like cool. Well like what happens whenever you actually put that into the context of a page? Like, does it hold up? Or like, oh, because this is on top of a white background and this is on top of a gray background. Like that actually sort of conflicts and like we were just working with a client who like they had an agency or something like build them a design system sort of off in isolation, which is like a handful of components. They put them all together and they were all freaking blue. So just like the screen looked like giant wash of blue, which was like not what they were after. Right. So it's like, it's sort of. This is a dance between sort of. It's like you need to sort of play around with like the, the weeds, you know, and sort of like use that stuff as exploration and playing and stuff like that. But ultimately this all sort of comes together into a screen. And that's sort of, you know, why we like atomic design so much and why we sort of still work that way, is because it allows us to sort of move back and forth, zoom back in and out between these sort of like two, Two different, you know, sort of. Yeah, two different like worlds. I guess one thing that I want.

To emphasize, a couple things that you said that I think are really important that I want to emphasize is that like I'm not making a UI kit. That's not what I'm intending to make is not. It's. It's not like make all the components. It is like Brad said, it's this dance of like, let's work at a zoomed in level and then let's work at a zoomed out level all in the same kind of canvas. And so again, we're trying to work in parallel. Well, what I'm doing and what Brad are doing is the exact same thing where I'm just doing it in a Photoshop canvas, but he's doing it in a WebKit canvas. And so when Brad is building, he's simultaneously building the molecules, but then going out to a page. And when I'm designing, I'm designing some of the atoms and the molecules, but then also the page. So it's always this back and forth of a little bit zoomed in, a little bit zoomed out, a little bit zoomed in, a little bit zoomed out. Not design all the components up front and then put them together at the end, because it'll be too late to realize, oh, these don't work together. And it's also not design all the pages up front and then explode them at the end, because that doesn't work either, because then you might not segment them the right way. So it's doing all of the things at the same time.

That's right.

Yeah.

That's, I think, a great way of putting it. It's not the. It's not the part and then the whole or the whole and then the part. It's the part and the whole at the same time. So. Okay, so I'll refill my water while.

We'Re over to you.

All right, cool. So what I've done while sort of Dan was working on that stuff, and, you know, sort of from here, I would sort of sort of take again the output of those explorations and sort of build. Sort of start bringing that stuff in. Before Dan started showing the sort of, like, dark sidebar and then that sort of, like, light content area, I just sort of went ahead and, you know, went into my body tag and sort of changed my background color to this sort of, like, dark gray and changed the color to white. So it's like a, you know, sort of a dark website all of a sudden, compared to what it was before. I also sort of, you know, just because Dan was sort of creating one of those green buttons, I created a green button. I did not. Dan, was that button the monospace font?

Yes, it was. Yep.

Okay, so just to sort of show you real quick, so I have. Here's how we tend to sort of set up our variables and stuff, and we could talk about this maybe a little bit more, too, but, like, this is, like, okay, brand blue, brand green, whatever other colors we want to add. And then we'll sort of have, like, a neutral palette, and then we'll have some utility colors for things like errors and warnings and stuff like that. It's probably not terribly useful here. And then getting into typography, we'll have font families, font primary, font secondary, and stuff like that. So now I have this sort of font secondary that I could come into my buttons and I could say, okay, I want my font family to be font secondary. So the cool thing is that, Dan, you're using this, what, operator font, and I don't have that, and that costs 200 bucks. And, like, that's fine, like, if that's, you know, an investment we want to make and stuff, and I think that that's great. But for right now, I just have monospace in here. So it's like, for those that I'm mostly speaking to designers here, this is how this stuff comes to life in the browser, right? Like, this is not like, you know, on a component by component level. Like, we're able to sort of define these variables in the sort of, like, global sense of those wor. And very often Dan will sort of own that stuff. Dan will own our brand color palette. If Dan does these sort of, like, accessibility analysis stuff on this color green, he's like, oh, this needs to be a bit more muted or it needs to be more bright than it is right now, then he can do that and sort of. I could point him in the direction of this variables file and he. He's able to sort of have at it. There's another layer of this, which is design tokens, and that's sort of like us really bridging our worlds together, whereas. Meaning that Dan can work in the tools he's comfortable with. And then I could sort of ingest those design tokens as sort of CSS variables and then sort of map them out. Right. So I could sort of like map the tokens out to, you know, button background color or something like that. So, yeah, so I haven't made too much detail here, aside from just sort of like changing this up. I sort of started getting in my tree nav. I started getting some of this stuff in here. I sort of took Dan's, you know, this thing as a queue and created a little active state for this sort of area here. But I haven't really done a whole lot of work on the rest of the page. So it's like we have this idea, but Dan, were you thinking that the whole page was going to be dark or with that exploration you were sort of talking about this thing. It might just be the sidebar or something that's dark.

Yeah. My initial thought was, okay, maybe we go full width on the whole thing, and then the left side is dark and. And then the right side is light. But I don't know, I'm still working that out. And Actually, if we do switch over to my screen, that's actually what I'm working on right now is like, I don't know, what does it look like if it's all dark or this is light gray or, you know. Yeah, I'll actually. Let me just quickly switch over.

Sure.

That's what I'm just like, honestly playing with right now. And I'm like, where should this go? So what I've done is I've made this, made the whole thing light gray. So maybe we do have kind of a white box. And then I'm actually now starting to lay out a portion of the page. I'm not worried about finishing the page because I don't need it to be pixel perfect for you. We'll figure all that stuff out in your world where I'll sit with you and we'll talk about spacing and all that stuff. But I'm just sort of getting the broad strokes down where I'm like, what color should the right side of the page be? Initially I was thinking white, then I wasn't sure. Now I'm trying light gray. Maybe it all turns dark. I don't know. Like, that's what I'm kind of working out right now.

Yeah.

Yeah. All right, Back over to you.

Yeah, I like that very much. You know, if I had a, you know, again, this is sort of me putting on my client hat, I would sort of say, you know, that sort of visiting a website that was like totally and completely dark. And there have been some, you know, sort of all dark websites out there in recent years years. Vision Studio comes to mind and that Mac Pro sort of web page. And so there's been some like, cool, like, all dark stuff. I just like, I don't know, like, part of me is thinking. It's like I want it to feel approachable and sort of sometimes, I don't know, like, some. It's not to say that a dark website can never be approachable, but at the same time, like, I feel like there's a. There is sort of like a lightness a little bit more to what Pattern Lab is than the sort of like, I don't know, I don't know. There's different thoughts around white and dark and all of that stuff. But I'm just like looking at this demo real quick and I'm like, ah, that might feel like a little too, like, intense and stuff. I don't know. But so back to your comp or whatever. I have these variables here. It's like I have a 7% gray or something like that. And so, yeah, I might have a play with sort of going, okay, we're going to change that to this. We're going to change our color back to this sort of like 88% gray. Nathan Curtis has a really good article about sort of like colors and sort of like naming sort of variables to actually sort of match. We used to do like gray 2, gray 3, gray 4, gray 5. And it's like, which one's dark, which one's light? It's hard to follow. So, all right, this is going to get really weird just because I'm going to hack this right now. This isn't how we would do it necessarily, but what I want to do is I just want to see what it looks like. If I do L grid sidebar. I want to do that background of color gray 88 and then change the color to color white. I just want to see what that looks like in the context of this page. Like I said, I'm hacking this and I guess we can do something like L grid main. Actually, no, I could do this in grid gap, can't I? How does grid gap work? Where is it? Yeah, there we go. Grid gap. Two rems. Right? So right now, like, that content is sitting right up against our thing and stuff. So it's like I want to sort of push that out a little bit to make sure, make some room for that. I also realized that I don't have like the. I'm not using the latest version of our workflow. This all happens automatically now. Just noticing this is like I grabbed the wrong vanilla starter thing. So anyways, so we have that I'm also sort of using. We have this sort of like L container sort of thing that sort of caps it at a max width so it doesn't go all full width sort of Craigslist. But sounding like. Dan, do I have this right that you're sort of saying like, I don't know, what does it look like with this full detail?

Yeah, exactly.

Full screen thing. Let's come up here. And I'm just going to rip that out. Then real quick, I have this L container, so I'm just going to remove that. What that should do is kick that out and make that stuff full screen. I also have some. What looks to be padding on the entire thing or maybe on the main column. Yep, there's padding. Sorry. So I want to sort of like zero that stuff out. And obviously, like, if we're talking about this, you can see I still have like a horizontal Header sort of like floating around up there. So if we wanted to do something like this, right, we would want to sort of like probably bring in the logo and bring in like the main navigation into that thing. Or are you thinking that this would be the header, would be its own beast?

Yeah, maybe it is its own thing. I'm not sure yet. But I like the full width in the bottom section. So I'm not sure where we're going to land on the IA yet. So I like what you've got so far. I think that's better.

Yeah, yeah. So it's like for those, in case it's like not clear, right. So it's like, okay, so we have this header. So it's like we could do that, right? We could have like sort of like the main bits, the main sort of chunky sections of the site sort of like across the top and then sort of have like the actual sort of documentation sort of along the sidebar. And that totally works if that feels good. But then another approach and you'll see this on the lightning design system or something like that. Or you'll sort of start seeing like everything is sort of contained in that sort of like left sidebar. So that's like again it sort of gets into this intersection of like IA UX visual like DOM structure and stuff like that. So it's like obviously I would build something like this a bit different than I'd be building like just the tree nav sort of on its own. Right. So all right, what should I do now? Here's one thing I will do obviously all four full width things. But at the same time that's not really a good readable experience. One other little trick we usually not a trick but a convention we have in our code base usually is something that we call a line length container which is basically like it caps a passage of text at a readable sort of like line width or something. So if I go into detail and around my text passage, what I'm going to want to do is sort of just create like a div and say line length container. And then that way we're able to sort of play. Right. Like you as a designer, you could say, okay, what's, what's Trent's article? It's like Trent fluid type. He has like this like really cool thing. Do you remember this one?

No, I'm not sure what you're getting.

Yeah, yeah. So he like talks about, you know, it's like okay, between 45 and 70 character width is accepted as safe for Comfortable reading. And then he does this cool little, like, asterisk trick where it sort of like, if. If, like, if at any point the two asterisks appear on the same line of text, I know it's time to increase the font size. That's just, I think, a really cool way of approaching that. And still. So you can see what just happened there. So by adding that nice little utility, I'm able to inspect this element inside here. I have this line length container. It basically says max width of 36 rem. And we could change that to whatever we needed to be, you know, based on whatever sort of type system and font size. For something like documentation, you know, I would say, you know, like, actual body copy can be pretty. Pretty big, right? Do you agree with that? It's like, that's. That's why people are there. So I think that, like, I'm trying to think. Let me just see, like, how much pros we have on sort of some of this stuff. Not a. Well, it can get pretty good. So you can see, like this. This just sort of falls apart, right? I made this, like, fully fluid. This is like, sort of like 1998, right? Fluid design rather than like CSS grid responsive fluid design. So anyway, so that's something that. I know that we've talked about this, that, like, we should, like, do, you know, sort of be a bit. Maybe more diligent about, like, sort of like our type systems and stuff like that and sort of get into that stuff. But, like, I think that that's all stuff that we could work out. I think that, like, doing some stuff. Well, let's. I like where you're going with, like, the page header thing. Do you actually. Can you send that to me? Can you send me that?

Yeah, let me. Let's. Let's flip over to me for just a sec.

Okay. Okay. All right. Oops. Not new. Share. Stop. Share. All right, all right.

Sorry, one second. I'm finishing something up.

Okay.

All right, here we go.

Okay.

So what I've been doing while you were doing all that stuff is like, just kind of figuring out some other styles, you know, like, the stuff that you were working on is exactly what I was working on. But just like, you know, there's some things that are easier to do in css, and then there's some things that are easier to do in a visual design tool. And the problem with the typical designer developer process is, like, for a designer, you have to solve all the things in your visual tool which is not suitable for all of the Things. And for. And then developers have to deal with all of the things in code and that's not suitable for all of things. So you're kind of struggling with line length in the browser. And I'm like, well, I could futz with that. That's an easy one. To resize a text box in Photoshop to just kind of line it up versus the whole code, some numbers, save and refresh, rebuild. And then that's not quite right. So the point of all that is, what's the right tool to solve that problem that we're having? And so in Photoshop I'm like, cool. Now I've got like a pretty decent looking readable line length with some margins and some spacing and again, not perfect. And we can massage all the rest of that stuff in css, but it'll give you a starting point now to say, cool, I can measure the width of this text box and say, yeah, why don't we start with, you know, why don't we cap it at, you know, 800 pixels or whatever the REM or M equivalent of that is and then it gives you a starting point. So what I've started to do is go, all right, well what like now I'm working on some other components. Like, all right, let's work on the text passage component. How wide should that be? I can give you some numbers. Like, okay, let's do 16 points for the text size and we'll start there. And maybe a code block looks something like this and maybe like a live preview. So maybe the code blocks are kind of dark and then maybe you have live previews of stuff in there that's on white or something like that. And I've changed the whole background color of this thing to kind of a light gray. And like you were saying earlier, this is something that in our typical process, I could just own the colors of this stuff in the variables file. It's like, you don't even have to worry about changing the background color to light gray. I'll go in and do that. But we don't have a code block component yet. So. Cool. You've got to build actually the scaffolding of that. Build the hook for me and then I can go and tweak that hook. And so what I'm trying to do is give you a head start on. All right, I'm thinking about a live preview component. I'm thinking about a code block component. And I'm not necessarily happy with all these yet. I think the green stripe could go. I'm not quite sure about that yet. And I bet you have some opinions about this as well. But again, these are all stuff that we can work out while we're working on this stuff and see it in the right environment. But now some of the stuff that you were struggling with in code, I'm like, oh, I got that stuff. I can take care of that. What I'll do here. And again, I didn't even bother to fill in the tree nav, because I'm like, I don't know, it kind of looks good in yours.

We can.

We can finish it in your environment, but now I can grab this stuff and then say, all right, I'm going to upload that and then I'm going to send that to you in our chat. Where's our chat?

There's our chat.

So now you have that stuff, and now you can kind of get going on some new components. And then while you're scaffolding, then I can get started on some other things. So it's just kind of a game of leapfrog, where it's like, you're ahead on some parts, and then I'm kind of catching up, and then I leap ahead, and then I'm ahead on some parts, and then you're catching up, and it's just kind of like. I like that you described it as a dance. You know, it's like this. It's like we're each taking turns kind of leading, but we're both building this thing together at the same time, like, really collaboratively, where some of the stuff that I see and what you're doing inspires what I'm doing and vice versa.

Yeah. Yeah. I love that. And I think that it's sort of one thing to add to that, like, in a client capacity, because, like, people will look at this workflow and they're like, I. You know, like, my. My clients, like, won't get on board with this and stuff. Or, you know, they. They need to see. They need to see the comp in order to sign off on it. And I think that sort of, like, what this process, what we do here is, was we sort of. What we tend to do is, like, do all of this work, but recognize that, like, our comp is what's in Pattern Lab. Right. Like, our comp is like the living, breathing thing. So it's like, our clients totally get that. Our clients totally get the fact that they have to see something. Sure. But at the same time, what we're showing them is we want to be showing them the real deal. Rather than an abstraction of the thing. And if I could sort of switch over to my screen real quick just to, I guess, show real quick, just. It's like some of this stuff is just like stupidly easy. Like that pre block, like that took literally, like changing four properties. So what I did was I came into here just to get like an actual example, and so I created sort of a dummy component which I would eventually burn down. And I just called it Demo Text Passage just with that raw HTML text, just so I had something to work with. But now I could actually, I did was I came into here just to get an actual example, and so I created sort of a dummy component which I would eventually burn down. And I just called it Demo Text Passage just with that raw HTML text. Just so I. I had something to work with, but now I could actually see what that stuff looks like. Here's another idea for you, Dan. So it's like we have inline code things, but then we have these pre blocks where a couple instances of that stuff we might want to do this. But quite literally that was changing the text color, changing the background color and changing the board. See what that stuff looks like. So here's another idea for you, Dan. So it's like we have inline code things, but then we have these sort of pre blocks where, you know, like a couple instances of that stuff. And so we might want to sort of do this, but. But like, quite literally that was, you know, changing the text color, changing the background color, and changing the border. I had initially to border left green. And it's like. So it's like whenever this sort of conception of like, we have to order, I had initially to border left green. And it's like do all of this sort of like full comp work because we don't want to waste any time in dev if we get it wrong. It's like, I think that there's like a big disconnect. So it's like whenever this sort of conception of like, we have to do all of this sort of like full comp work because we don't want to waste any time in dev if we get it wrong. It's like, I think that there's like a big disconnect between like, sort of like actually the level of effort to accomplish a lot of this stuff is very, very, very low. In that between like, sort of like actually the level of effort to accomplish a lot of this stuff is very, very, very low. And like you said, it's like some things, yeah, sure, are better articulated and sort of a structure, static thing. But we always lean towards the finished product and to sort of present that finished product to our client, the actual working environment to our client. And then we'll show some of those explorations, if we have to, as like a supplement. Right. So it's like I've sort of said this in workshops as I was like, sometimes, you know, it's not only me, and we're not only presenting my work or we're not only presenting your work together, those things we're able to sort of demonstrate different things. So you're able to, in your environment, sort of articulate the vibe, the art direction, the color, the typography, the texture, the actual art direction of it, which might not be present accounted for inside a pattern lab. So that's great. And that's, you know, static tools can be great for that. And then sort of in my environment, what I can show is things like responsive design, like, oh, here's what happens, like on sort of small screens, or here's what happens if like we. We change this title to German. Or here's what happens, you know, here's the performance or the true type rendering or the true color rendering, or this animation or this transition or this like little micro interaction or sort of hover state or whatever. It's like all of that stuff. Stuff is like stuff that. Can you do that stuff in static design tools? Like, sure, but like, you have to do it in the actual product anyways, right? Eventually. And it's a truer representation of what that stuff is. Like, I've seen like really great, like motion prototypes. I've seen really great stuff or whatever. It's like, that's not to say that like, those things should never be used. It's just like sort of recognizing that we want to get into the actual environment and that allows us to sort of like, work more quickly through there. And also, this is critical. Address any issues that come up, like technical challenges and stuff. Like, cut that stuff off. Like, I can't count how many times I've gotten comps of stuff there. It's like, well, this is impossible to build. Or like, well, this is like a very, very brittle design. And I could show you why in two minutes in the browser. So it's like what we're able to do is we're able to sort of design with the actual sort of constraints and opportunities of the browser right out of the gate instead of, you know, learning about that stuff after the fact.

Two things. Oh, sorry, go ahead.

Yeah, yeah, no, the last thing is its own can of worms. But it's sort of. It's sort of recognizing that the developer is an equal partner in this and in the design process. And then also that not all dev is like, you know, there's still a ton of work to do on this and there's still a ton of work to not just tighten up the design, but also it's like, yeah, we need to test in all these different browsers, all these different devices. You know, when it gets into more functional stuff, sure. Like, you need your actual engineers to like, do real engineering or programmatic sort of work to anything. But it's important to recognize that not all code is that not all code is the implementation. We're getting this thing ready to launch. This is just like it's design. It's designed. Yeah. Using the browser as a material.

Yeah, exactly. Just to point out a couple things we've been doing that we've been on the screen share for an hour and a half, a little bit over an hour and a half. In that amount of time, we've got that much percentage into a build, whereas normally that would have been the same amount of time that it would have taken me to do a finished comp. So let's say to finish a comp, it would take me another two hours to finish the build. It would probably take you another two hours. If you and I spent two more hours here, we would finish the build as opposed to just having a comp finish that, then you would have to go build. The time. Saving in it is ridiculous. It's like we just save so much time doing it this way. We're collaborative, we can feed off each other's ideas. We're partners in this. Again, we're equals. And I think that there's a lot of ego that comes with designers going, well, no, I have to own this whole thing. And then you have to build exactly what I designed, because I figured it all out when lots of designers don't know enough about code to have figured it all out. And so I think that there's a lot of collaboration in this workflow. Two other things that come to mind is the way that we would normally work on this stuff is at frequent intervals, you would push that build to a staging server. I'd have access to that staging server or even have a local environment that I would pull down to. And then what I would do is if there's anything that you've got going on your screen, I would screenshot your screen, paste it into Photoshop, start cutting and pasting some things and moving them around and spacing and manipulating the actual pixels. And that's one of the reasons that I personally like Photoshop over Sketch is that I actually can't work with the, like, they're not vectors. I don't need to work with the vectors. I need to actually push around pixels, literally. So Photoshop, you know, and I know Sketch has a little bit of that too, but Photoshop lets me, you know, if I want to change the color of something, I can easily blending mode, change the color as opposed to having to retype it out and reset, you know, like retypes the whole thing. And then it's actually, I'm editing. I'm really getting close to editing what is seen in the browser as opposed to the Photoshop rendering or the Sketch rendering or something like that. So that part is important. And then the other thing that comes to mind is I remember when we were working with dot-formally about.com and the first thing that we showed them was designs. I remember sitting in the room with the CEO and I'm sorry, I wasn't sitting in the room, I think you might have been. And Josh was in the room and I was on screen share. So I was presenting the design and I sort of comped up a mobile screen that I was showing inside a mobile Chrome, like an iPhone Chrome, a projector. And the CEO Neil was just like, what, what am I look like? I don't even understand what I'm looking at. And he just, he just had a lot of trouble understandably going like, I'm looking at a mobile comp in a mobile phone on a projector. Like what? Like what, what? I don't. I'm not sure how to interpret this. Next time we showed him stuff, we just said, here's a phone. And we gave him a phone and I had a URL on it. And he's like, much like, now I get what I'm looking at. Because it was just. It is the context that people would use the site in. And so doing comps is showing something out of context. Doing wireframes or putting together presentations is just so much worse than just sending a URL and going like, here, load this on your phone or pull it up on your browser, on your laptop or whatever that is. It's just getting in that real environment of the software is just so much more productive because you can't hide behind it. As a designer, I cheat in my comps all the time. I'll nudge a thing over by a pixel so it Lines up perfectly. I'll make text wrap the way that I want it to do. The browser doesn't let you do that stuff. It's warts and all, which, for better or worse, and I think is better, I think that's a much better. It's a much more realistic environment. It's no bait and switch with a really beautiful, perfect comp. And then you see a building like this isn't exactly what I saw earlier. Now it's all realistic.

Yeah, that's the, that is the, that's the crux of all of this. I was going to share my screen just because, like not to, not to totally pat myself on the back, but like I do feel like this, this, this little thing that gets a pretty good laugh, like whenever I show it to people. It's like, you know, whenever we do, we spend like all of that time on this sort of like abstraction and the build doesn't get that same amount of iteration or that amount of love. And I'd say more importantly, like, you know, sort of recent projects. I feel like it's like literal designers eyeballs on the actual thing, right? It's like literal like eyes on the prize. The prize is the actual freaking product, right? Like it's like eyes on the prize. Like what is like the actual product we're building and everybody's energy should be going to building like the best product possible. And I feel like all of these talk, these design tools, while great and powerful and serve some purpose, I feel like increasingly they're just like these. They're just delaying the inevitable. They're just like, they're like keeping them away from the actual thing. Instead they're just like sort of creating these like additional little sort of pieces of busy work, whether that's drawing hotspots and linking them together or like sort of these like pseudo like red line sort of things or like the UI kits and stuff, it's like it's not the actual thing and it's a bit of a rant. But at the end of the day I'll ask people in my workshops and raise your hand if you're a designer and you've ever been ashamed to add a link to the live website in your design portfolio. Everybody has laugh and they raise their hand and it's like, yeah, my gorgeous screenshots are the things that go on my design portfolio, on my behance, on my dribble. And it's like. But if the thing comes out looking like a crap sandwich at the other end of the process, I'M like, what was all that for? I don't know. End rant there. But, like. But. But I do that. That iteration and like, literal eyeballs. It's like, what. What we welcome in our process is like we're all hovering art directors over the actual thing. Right? And it's like, I wanted to make sure that your smart brain, you know, and your vision, which is way better than mine in the design department, comes through in the work that I'm doing. And from a UX perspective, I want to make sure that Josh's smart brain comes through the final product. Right. So it's like. It's like we're just sort of pushing everybody further down the line and actually just doing that work there. And it's. I'd say it's not only possible, it's just like. It's hard for me to sort of even fathom doing it any other way.

I'm with it. Well, listen, we have. For anybody that's watching this, you've sat through almost two hours of stuff, so God bless you.

Yeah.

What's next for us, Brad? Like, what would we do? I think we would just do more work, right? There's like, there's nothing a lot more to explain here. It's like, okay, now we just keep doing this until we're at a point where we're like, cool, this looks good enough that we could share it with a larger audience or put it somewhere. This whole time, we would have been sharing it as appropriate, but I think that we would just kind of do this for another 2, 3 hours and get to a thing, get to real working code that is responsive and good enough to share, even if it's not finished. It's a good. I was going to say first draft, but technically it's like the fifth or sixth draft, because you've put in things and removed them and then replaced them. And it, like, it is. It's an iterative draft. And so we would just do this for another couple of hours to get to that point. You know, maybe if any people are interested in this, we'll do a part two or something like that.

Yeah.

Anything else do you think is worth kind of sharing here while we're on?

I think to sort of build with that as far as, like, next steps. And also it's like what you've seen is like a bit of a condensed thing. So it's like we do another couple hours of work, but it's also worth pointing out that we're like, not just, like, on a call, like, Going back through it. So it's like how it tends to work is like we'll come together at the very beginning and we'll do some sort of like level setting and like, you know, vision stuff. And then we'll sort of put our heads down for maybe like 10, 15 minutes or even an hour or something like that to just sort of get like a head start. And then we'll sort of come back together and we'll say like, all right, here's what I've done. Here's what I've done. We'll talk about that. We'll sort of get an idea and then sort of we'll depart again and we'll sort of put our heads down, put our headphones on again, and I'll sort of like weave in, you know, your ideas into sort of my like sort of initial sort of blah foundation. And then so we'll do that work and so you'll do another iteration and then I'll come back and say, okay, here's what we were at. And so it's like this sort of like going away, coming back together, going away, coming back together and stuff. So it's not just like to let everyone know that. It's like you don't have to be just like have like an ongoing call that sort of gets in the way of like actual like head down work. But it's like it's not a we go away for multiple days and then get back together. It's more like, okay, like I need a couple hours maybe at the tops to sort of like get this stuff stubbed out and then let's talk. Yep, totally agree. Cool. Well everyone, seriously thank you for your patience and hope you find this valuable. And again, you know, if there's, if there's an appetite for a part two, I think that'd be, that would be a lot of fun. But in any case, you know, if you ever have questions, Dan and I both do a lot of coaching with teams and sort of stuff like this and you know, we love it and we're happy to help facilitate the that's kind of where flow at other places. Thanks everybody. Cool, thanks. See you later.