Unknown - Current

Chris LaFay: Am I back? Voila. We back now.

Claude Ball: Yeah.

Chris LaFay: Cool. What if we. Where did I drop you?

Claude Ball: We were talking about the padding. I think you're about to say, like, we could set the 10 through whatever.

Chris LaFay: Yeah. So, like, what if we set 10 through 100, had like a whole. Like, had a different variable section here for spacing 10 through 100 in increments of 10. Those had assigned values to it. You could then adjust them if you wanted to. So, like, if you wanted the smallest one of 10, rather than being 8 pixels, you could make it 12 and then it all up from there. So that way paddings and margins and stuff are all pulling from something that would then port over to WordPress very easily. And then you have to think less about it too.

Claude Ball: No, this is where my thinking was kind of going, because we. We could. And it sounds like you might have already started this. Like, we just create a classic city library. So, like, all these preset settings are really easy to add to every site.

Chris LaFay: How do you do that? Is this what this collection thing is here for? I legitimately have no idea. There's a way to create like a library of variables, but I don't know.

Claude Ball: I don't know either. I don't. It might be that, honestly. And then there might be a way for you to, like, publish it. I have seen that several times, like, publish this something. But, I mean, I can look into it.

Chris LaFay: Okay, what I'm gonna do here, what I'll do is this. I'm gonna delete this collection. So then we're gonna go over here. We're gonna create a. Ah, no, no, not doing that. No, thank you. That's. That's interesting. You can actually have a variable, have multiple values.

Claude Ball: Yeah. I think that's why I've had a hard time, like, grasping variables, because when they edit it, they added like, like all this functionality and it was like a new language to learn.

Chris LaFay: Yeah, I get that. Can I change the title?

Claude Ball: Yeah.

Chris LaFay: Colors. All right, so there's colors I'm going to create all. So we're going to go, how do I add. I don't want to add a mode. I want to add a thing. Okay. Border thickness, Border radius. Don't need this anymore. Delete that, Delete that. So with borders, what else do we need? Border radius and border thickness. Doing anything else? More than that. For borders,

Claude Ball: color.

Chris LaFay: Color would then be. Color would be defined based on where you're at. Like, if you're using a button, the border color would be whatever the color of the button is. Right.

Claude Ball: Yeah. Just thinking about our design system at Chick Fil A. We got three different border colors, so.

Chris LaFay: Oh, I, I, I, I got you. I see what you're saying. Yeah, yeah.

Claude Ball: But no, I mean that's still a color though. So it could just be, you know, outline. Because that one is like outline one, outline two, outline three and you just pick the one that looks the best. I'm sure there's rules to it. I just haven't, you know, logically.

Chris LaFay: Of course. Of course. Okay, so now we got. I'm going to create another. I create another group. Good grief. I don't want to duplicate the group. I want to create another one. That's great. I'll just duplicate it. Spacings 10, 20. Oh, there's the create variable all the way down the bottom. It was hiding from me. That's cool. Anyway, okay, I'm not, I'm not gonna, I'm not gonna put all these in right now. I'll put them all in before I like before we finalize it. But we have spac. We probably.

Claude Ball: Yeah. When you add it from here, how does it know that it's talking about spacing it?

Chris LaFay: So here, this is, this is, this is the weird compute. So see this over here groups spacing. So because I, this is selected. This is, these are under the spacing ones.

Claude Ball: No, I meant so now when you go to the design file.

Chris LaFay: Oh, got it. Understood. Okay. Yeah, yeah, hold on. I got you.

Claude Ball: So

Chris LaFay: let's go over here. To gap apply variable. It's going to, it's going to bucket them in the same way. So spacing 1020.

Claude Ball: Oh, okay. So it'll just update it to the value.

Chris LaFay: Okay, yeah, exactly. Yeah, yeah. I'm going to create another one called so if we, if we did this. Hold on. So like this logo garden container is set to fill the width. So it's automatically whatever the, the screen size is I have over here. I don't have padding.

Claude Ball: How did that happen?

Chris LaFay: Oh, I just set a static width. Okay, cool. That's right then. Okay, cool. So do you like the idea of every row inside of a design is actually done at the mockup level. So like the component doesn't have the whole containing row, just the, the component is the component, the thing. So in a mock up we have this container for logo garden, this container for case studies, those always being fill for the width. And then on the inside we have. So what I did here, and I'm actually, I'm second guessing myself and I want your opinion on this. So in let's use services. Because I did it the. The right way, the consistent way at the container level. I'm going to rename this so that it makes sense. Services. Container services. I'll call this content. So now we're speaking the same language. So the container is set to fill. And if you notice over here I have 200. I have the. The gutter left and right at 240, which by default makes the content the 1440 number when it's set to fill. Right, Right. Is this making sense? Does it make more sense to instead have the container. And the variable and then the container is set to middle, middle, no paddings. Then the actual piece that. That actually contains the content, this width is set to content width, wide width, full width. That's where the variable comes into play. Not at the container, doesn't apply the padding. The content sets the width. Those are the two options. Does that make sense what I'm saying?

Claude Ball: I'm just trying to think through to the end to see which one. Because like the value of the auto layout is to. Where it makes it easier to do the responsive designs. Because I could just like shrink the frame size and it. And it auto does stuff. Yeah. So I think the.

Chris LaFay: You know what?

Claude Ball: I. It's. Honestly, it's one of those things like I, I feel like we just need to pick one because.

Chris LaFay: Okay.

Claude Ball: Because even in what I was just saying, we will still have to like manually go in and adjust the variable for the tablet size, the mobile size. Like we would still have to either adjust the padding or adjust the content width size. So it's.

Chris LaFay: Yeah, I think, I think width makes more sense because you're going to basically say thin content, regular content wide. And then full doesn't matter. You just set fill. So, so we're gonna go. This is gonna be content thin and we'll call that 850 content regular, which will probably be 1200 wide width, which we'll call. I think regular content width is 1200. Let's call wide width. 1440. No, actually this is 1440 actually, if I recall. Correct. So this actually needs to be about a thousand.

Claude Ball: Yeah, I was gonna mention that.

Chris LaFay: And then 1600 is wide.

Claude Ball: And so wide would be. The max

Chris LaFay: wide would be on this would be. I got, I got a visual for you. Hold on. So these right here, services, this is content, this is regular content regular. This Right here, Enterprise WordPress Agency, Enterprise CMS migrations would be content thin because it's inside still. Content wide would be this where it busts out the edges a little bit. Whereas full doesn't exist here.

Claude Ball: Yeah, but full is like. So if we have like a hero.

Chris LaFay: Yeah, yeah.

Claude Ball: Okay.

Chris LaFay: Yeah, we. On the same page.

Claude Ball: Actually that might be the one that will help us decide if we should do padding or width is. Because when you do a fill with a background image. No, no, no, that's fine. Because the content that's on the inside will get the variable. Okay.

Chris LaFay: So you would drop the container on it and then you would then drop the element inside, which would just be. You just put fill width. Like there isn't really a need to have full here because that content area you would just set. You would just set it to this thing here. You would just set it to fill container, which. This is doing that correctly because there's padding on the left and the right hand side right now. But if I were to do. Let's actually. Let's just test it really quick. Why don't we test it?

Claude Ball: Yep.

Chris LaFay: Yeah, we can do that. All right, so this container is set to fill width. Perfect. Let's go ahead and set. Let's get rid of this padding. Zero. We're going to align this middle, middle at the container level. And then this join here. Apply a variable of content regular. Boom. Voila. Yeah. And because it's set to. Because it's set to middle, middle, it's aligned well. Now if I put this to where it's aligned wide.

Claude Ball: Yeah. Let's see how it looks.

Chris LaFay: It's not. It's not. This isn't these. I think these cards have a. A static width to them, which is why they're not stretchy.

Claude Ball: Stretchy. Yeah.

Chris LaFay: But you can at least see. But you can look here though. Like that's at least. This is at least. It did go wide. And then now all we're doing at the container level is setting the like top and bottom padding, which would then be spacing 30. So.

Claude Ball: Yeah. Okay.

Chris LaFay: Does that feel good?

Claude Ball: When we are. When we are creating the block library, are you imagining we're creating the entire section or just the inside container?

Chris LaFay: The inside container.

Claude Ball: Okay.

Chris LaFay: So like this is definitely. So let's back up this. These two sections here would not be called homepage hero. This is. This is a bad example. Just because they're. They don't really have a HERO section here normally. Let's. Let's go down. So let's do this. So this case studies container, this is not the element. The element for case studies is literally just this.

Claude Ball: I see. Yeah.

Chris LaFay: Because here, all this is the H2 tag, the divider and a paragraph. Like this isn't really even a, like a thing. Like it's not even really a thing, if you will. And then the case studies, like cards and stuff are just the same one over and over and over and over and over again inside of a grid. Because there might be another element later where it's a two column grid or maybe a four column grid. I don't know, probably not for these, but you know what I mean? Like. Yeah,

Claude Ball: okay, I asked that question is, you know, you, you have like, since I've been working with you, you know, you've been calling the block elements components. And since FIGMA also calls those things components, it was, I have always had a hard time with like the language as we're talking between like what, what? And so that was where, you know, I was reading or I was watching a video about atomic design system and that's where I learned those words like atom, organism, molecule and all that. So the case study card would be the molecule probably because it's like a, because the case study card will have probably a button component as part of it as well as the rest of it.

Chris LaFay: Right.

Claude Ball: A tag component, probably. But when we're organizing the block library, it was easy to think in that framework of like, okay, so the case studies block is that whole thing, not just that one card.

Chris LaFay: Yeah, I, when I'm thinking about sharing things inside of figma, I like to think of things in their lowest common denominator to make them as more as easily usable across areas as best as possible. That was a lot of very generic terms. Let's go back. Yeah, I know, I hear you, I hear you. This right here is a good example in my head. I don't know the terminology they want to use, but obviously in a testimonial section there will obviously be more than one of these things. Right. But the lowest common denominator here of elements is what you just created. It is a single card.

Claude Ball: Yeah.

Chris LaFay: That in and of itself is the element that gets in the shared component. Whereas this, this in my opinion is not the, is not the component. The component is this. And if you wanted to create this is what would live on. Like this is what would live on the homepage. It would just be a container that happens to have a background image and inside of it you would have a grid of three of the testimonials back to back to back. Because you might not, for testimonials you might not use this, you know, what used to be this, like you know, gridded background with trend. Like you might not use that all the time. So this would just be on the homepage. This is what would be as a component in figma.

Claude Ball: No, that's fair. Okay, making sense. It's making sense. Yep, yep, yep, yep.

Chris LaFay: Obviously multi dimension, multi dimensional like multi element things like HERO sections and stuff where you have to have like an H1 apparent like everything kind of works in concert together logically. That's where I kind of break that mold is in order for this HERO section to work, you have to have all of the things together and then yes, you then save this away as something shared. But like here with case studies, these cards, they could be used in a lot of different ways in a lot of different places. There was another one. There was something else

Claude Ball: that is helpful.

Chris LaFay: Where was it? Where was it, where was it, where was it? I thought it was on this page of

Claude Ball: components. Hope this clicks eventually.

Chris LaFay: And also just could be like our, our own personal like styles with things too. This is actually. Okay, H. This is actually a. I get why, I get why you did this, but I think we should, I think we should talk about this a little bit. So this goes back to the whole like container thing, right? So in my mind these should not be container width. And then shorten down these blocks. The, These components and the variants of them should just be whatever with their setup. So you have default paddings and stuff set in here. So like if I wanted to drop in what is called a header. Let's. Let's go to the homepage mockup. I could drop a header right here, like right in line because you have it as its own separate containing element. So if I want to drop it right there, I could do that. And I think the way that my brain works and I said this is why I say this. It doesn't mean it's either right or wrong. It's just how it works is that from a containing standpoint in figma, this, these two what I'm going to call containers here we have the header and then the, the block for the windows that's all one container and that's all padded up the same way whether we, you know, with the same kind of like content width area. So inside of that you drop first the header block. And I didn't do that because it had all the padding and stuff like that built in. So my thinking is that the components in and of themselves here, this, this. I think this is actually a better statement. The components in and of themselves could be inside of anything. They could be inside of something that's full width, they could be inside something that's small width. They miss out of a lot of different things. So give yourself the flexibility when laying out a page with the lowest common denominator of components, which to a client, this right here, not the button, but the, the, the three things that go up with the errors and the dots to them, that's going to be a block. That's the thing that we're coding out with its own thing. But in terms of design, it's just the same thing over and over again. Am I making sense?

Claude Ball: Yeah. Okay. Yeah, that's fair. You know, the, what I was, what I was trying to accomplish was, you know, when we come back to where we're building out the template pages, we don't have, we don't, we don't have a concept of like how, how we're going to break up the, you know, different colors of each thing. And so creating a component in like a light version and dark version of those headers would just like make that faster. Was like, all right, like I know I need a header here. Boom, I throw it there. Oh, actually I want to turn this section dark. Now I have a variant that just makes it dark and it changes the whole thing just by a couple clicks. Rather, if we break it down to just the simple way or just to the core elements, we would have to. It's a similar number of clicks if the color is a variable. If the spacing is a variable, it's not more clicks, it's just a different way of doing the same thing.

Chris LaFay: So my thought to bounce off of that, and this is my, and I realize that some of where my thoughts come from here are, is like the programming side of me is for a moment I'm going to take this option out. Okay, I'm going to just, I'm going to just, I'm actually going to move it down here to the bottom. So pretend that these are not inside of containers.

Claude Ball: Okay.

Chris LaFay: You have two total options. One is center aligned versus left and one is with an icon and with a pre header dark and then dark and light. So what you just said is all the same whether you have it inside of a pre baked component, like pre baked multi component building block or not. If you, if, if this right here was the component and you could go center aligned, left aligned icon, pre header, you could still drag this one singular, you know, component that has these different iterations, but the width of it is flexible. You can still plop that wherever you want and then change in the same number of clicks. If you're like, I want this container to actually be dark, you would then just go into this little header block here and change it from dark mode to light mode and it'd be done. I think we're probably saying the same things.

Claude Ball: Yeah, yeah, yeah, we are. I think yours is. Is more like like nested. Like just keep everything in the, in the like nested version rather than. Yeah, so yeah, and I think, you know like how you. How we're talking about it, it does make sense that like it will maintain the flexibility better.

Chris LaFay: I have another thought to then like to. To balance out what you're saying as well too. I don't care. I'm gonna use it. I'm gonna use it.

Claude Ball: Oh my gosh. Okay. No, I'm sorry, real quick. I like your way more because I did run into this problem and creating those headers because that was just assuming that. See, here it is. This was just assuming that the headers like are sitting by themselves. That.

Chris LaFay: Yes. So, okay, so here. So about. So I. This isn't. This isn't one to one. But like let's say you wanted to put that header stack, like this header content stack in a. This. This hero isn't the right sample.

Claude Ball: Do the two column.

Chris LaFay: But. But it wouldn't, it wouldn't drop here like it wouldn't drop here well at all because it wouldn't. It literally just, literally wouldn't fit. The other term I want to introduce here that I think actually bridges my idea with. Your idea is if we call these, I don't care what we call them components, atoms. Doesn't matter. We call these components. What you're wanting to build here.

Claude Ball: Yeah, that's obvious.

Chris LaFay: Are sections. And so I think there is a place at some point, I think this is where nomenclature and organization comes into play. I think this would. I'm actually pretend that this default one doesn't exist again and we just have. Oh, that's actually not in there. Okay, cool. Anyway, this is a section right where this. You're actually pulling from that header stack that you already have and you're doing left aligned and dark. Right. This is just a paragraph that uses the large font size. This is a paragraph that uses the medium font size. And then you have a button. So this is not an element, it's called a section. And if you put the slash, it kind of buckets them as a two column layout. So you can then create predefined sections that have container width that go Full width. That then inside of this you would actually probably want to do because this is the content and you would want to. So this would be. The width would be fill container, which obviously on when you drag it onto something would be that 16, 17, 1800, whatever it was. And then content would then use. Oh, I'm not in the right one anymore. But the width 1 of like 14 for the content width.

Claude Ball: Yeah.

Chris LaFay: And then you just had to make sure that set to the middle. So now you actually have a full section at your disposal. So then if you were like, okay, cool, that's great. I'm gonna duplicate. This is my color equals light. Duplicate this. Yeah.

Claude Ball: An auto layout too, to help them.

Chris LaFay: Yeah. Organize better color dark. And then you could then go over here and make the background color, you know, do whatever. Like, so now you have multiple sections that are just pulled together from your smaller components. So I don't think it's a bad idea to create predefined sections, but I think going back to, like, where I was, like, if we make the components the lowest common denominator.

Claude Ball: Yeah, yeah.

Chris LaFay: Creating sections that actually going to be a lot simpler.

Claude Ball: Yep, it will be. Yep, yep, yep.

Chris LaFay: And then you can go here on the homepage and drop a whole section right into place.

Claude Ball: Yeah. Okay. So the. The language that we are agreeing on is components is the, like, lowest denominator. Elements. Elements. And then the block library will be just sections that are composed, compiled of components and variables. The padding, the. Yep. Okay.

Chris LaFay: Yeah.

Claude Ball: Right. Nala, do you agree? Are you staring at me?

Chris LaFay: Okay, so we have our style guide here. So think about, like, page, like, page structure. We have our inspiration. We have our style guide, which is really just where we can easily access colors and typography stuff.

Claude Ball: When you are thinking style guide, like, are you thinking and like, coding version of style guide? Because if that's the case, like, this should also have the, like, spacing stuff in it too.

Chris LaFay: I agree with the spacing stuff. The problem is how do you. How do you showcase spacing variables? Like, you'd have to just go over here to variables and be like, all right, I'm gonna go ahead and adjust my spacing here. Like, how do you. How do you showcase space? Like, do we just. Do we create literal, like, rectangles with just like 10, 20, 30, 40, and use the spacing variable as the height?

Claude Ball: Yeah, I've seen that.

Chris LaFay: Okay, cool. All right. Yeah, yeah, we can do that.

Claude Ball: I think.

Chris LaFay: Yeah.

Claude Ball: I'll try to pull some screenshots from. Because I think our design. Because I've seen a design system that has like grid spacing, border radius, like all that stuff in it and, and you know like it was just, it was what you said. Like you obviously have to like put in examples to show what the thing is. So yeah, it was, it was a little tedious but it looked like it might have been been tedious so I guess I can do it.

Chris LaFay: So we did something like this where we right now spacing.

Claude Ball: Look sleepy. Are you sleepy?

Chris LaFay: Always.

Claude Ball: Are you sleepy? Huh? I'm actually hungry.

Chris LaFay: Oh snap. So if we did something like this. So there's our, our spacing frame and then we have a size.

Claude Ball: Yeah.

Chris LaFay: So what I'm going to do here is inside size. I'm going to do a 10 which this would be. Yeah, I'm good with, I'm good with header too. That's fine. And then below that we will do one of these little guys where the height of it is 10. And this little sucker we get auto layouted

Claude Ball: like so it's been a long ass week.

Chris LaFay: Why? I wasn't expecting such like ferocity with that comment.

Claude Ball: No man, been.

Chris LaFay: It's been a long week.

Claude Ball: Here's what I've been like dealing with. So my, so my company came to me two weeks ago and was like hey, we want some concepts and I'm saying words for a reason. We want some concepts for our 2030 vision for the web application that we are building and we want you to lead it. Okay, cool. I hear concepts, I'm thinking

Chris LaFay: I hop

Claude Ball: in Miro or figjam, put some shapes down. It's just to kind of communicate some stuff. But as soon as we started meeting about it, it sounded like they wanted a full fledged thing where it was like mock ups and clickable prototype and like all that kind of stuff. And it's like oh like these are all brand new ideas. Oh, and you need it in two weeks. Like what it was, it was just. Yeah it was, it's just been like super intense. That's a lot for no reason.

Chris LaFay: And, and that's what you were working on today?

Claude Ball: Yeah, all week.

Chris LaFay: I got you.

Claude Ball: Yeah. And so, and like data presentation. I think it's at like 2 o' clock today so they want it all done by 12.

Chris LaFay: Ah, now are you presenting it?

Claude Ball: No.

Chris LaFay: Oh, nice.

Claude Ball: You know, but, but I mean it was, it was only hard because it was all like new ideas because it was you know, 2030 division. So hey like this is what we want. So we gotta have a lot of meetings to even figure out what we Want it to look like. And since it was all new ideas, there was a lot of just like design, you know, feedback. So you do a little quick thing and show it to them.

Chris LaFay: Yeah, I was tired. So is this what you're thinking for spacing? Showing off spacing?

Claude Ball: Probably, yeah. Okay,

Chris LaFay: just like go like. I'll probably just do like 10 through 50 and then 60 through 100 on the next line.

Claude Ball: Okay.

Chris LaFay: So we have, we have our fonts, we have headers one through five. We have paragraphs extra small through extra large. We also have our marked out font. So then we're doing mockups. We don't get people like thinking too hard on the actual like words. Variables. Yeah.

Claude Ball: Do you have in your head use cases for when to use what like or recommendations.

Chris LaFay: Ask that differently.

Claude Ball: Oh, okay. I was only more so mean the paragraphs like when. When to use paragraph xl. When you use the paragraph large.

Chris LaFay: So medium is default. So like paragraph medium is just like standard body content. You're writing page like stuff on the pages. That's medium. I typically think of small and extra small as like content that goes on smaller cards. So like if you need like two or three sentences inside of a card, whereas if you're like when you're doing like a three column layout with something, your standard font size might be a little bit too big for that smaller width. So small is typically that extra small. I'm in general, it's kind of like, you know, for tags and stuff that are like in pills sort of thing. Large is a highlighted paragraph, a couple of sentences.

Claude Ball: Say what, like a quote?

Chris LaFay: Like a quote. Yeah, exactly. Yeah, yeah. And then extra large is like like you're calling attention to this thing like typically like one sentence.

Claude Ball: Okay, okay, okay, okay.

Chris LaFay: What else

Claude Ball: do you have button text as one or do you just leave it in the button?

Chris LaFay: Yes, I typically do. This is normal for me. I typically use whatever the, the, the paragraph. The body content font is for buttons. That's my default at least.

Claude Ball: Oh, really? Wow.

Chris LaFay: But that. It doesn't have to be that by any stretch. That's not a. Like obviously with consume we had a third font.

Claude Ball: Yeah.

Chris LaFay: I just typically find that header fonts in buttons just don't. Header fonts typically are more display and they need to be larger. Yeah, they're inside a small button. Yeah.

Claude Ball: Okay. And then when my question go crap. It just ran off.

Chris LaFay: Oh no.

Claude Ball: Okay, that might be everything then. Oh, how many. I have seen things go up to H6.

Chris LaFay: You've seen things what go up to

Claude Ball: 86 headlines headings yeah, I need.

Chris LaFay: Yeah, you're right. I need to add another one. You're right about that. Good call. Okay, let me add that right now.

Claude Ball: This is why I don't let you in here. Knock over my coffee and you can be in trouble. Move. Excuse me,

Chris LaFay: Can I do this? Yeah, edit this.

Claude Ball: And it's funny, there is a rule on how to pick those font sizes. It's like a ratio or something. And I didn't. I skimmed through that during my boot camp because I. I wasn't grasping at the time, the, like, conversation around, like, sizing because since I had web, you know, understanding already, like, I was having a hard time. Okay, how are we setting grids on something that's responsive?

Chris LaFay: Yeah.

Claude Ball: You know what I mean? So, like, if. I wish Figma was able to add the, like, percentage and rims and stuff, because that I think will click better and help us design for. Because, like, even. I mean, actually, I think that might be what that extra column is for in the variables is. So, like, we can set H1 desktop, H2. I mean, H1 desktop, H1 tablet, H1. That's probably what that's for, now that I think about it.

Chris LaFay: Interesting.

Claude Ball: I've been trying to figure out how to do that to where it's faster, and that might be it.

Chris LaFay: So.

Claude Ball: So because that's part of why I try not to ever do the tablet and mobile versions, because it's just so tedious to kind of, like, go through all those changes, reorganize things. And so I've been trying to learn how to, like, design in a way that makes that easier so I can start doing it. And that might be it, actually. Like, I go ahead and set all of those, you know, from desktop to mobile. So then it's just. Oh, probably padding the same way. Oh, my gosh. That's definitely it. That is. Because then you can set the padding. Oh, that's definitely it. Oh, that's it. Wow. Yeah, yeah, yeah.

Chris LaFay: We got some genius stuff going on here, man.

Claude Ball: That's definitely how you do it. Can you click that column and just see what happens?

Chris LaFay: Col. Click this one right here.

Claude Ball: Yeah. Because doesn't. Yeah. Okay. So I don't know what.

Chris LaFay: I don't know how you change modes, though. Oh, hey. Oh, actually, look at this. If you add a mode, it adds it everywhere.

Claude Ball: So that's definitely how they intended you to do it then. Because I think they're, like, assuming that you're doing it on a different version of the same thing. So that's why they add it everywhere. Yeah, okay, I'll play with that on when I'm not sick of looking at my computer

Chris LaFay: and I'll. I'll go through and add the rest of these. Basically what I'm going to do is I'm going to basically take this. This project and create it as a, like, a starter point for everything. Yeah, please. And so I'm going to clear out all the, like, crappy variables that we have in here, the stuff that. That got added in for no reason, that kind of stuff, and then we'll have a clean place to start from. Jesus.

Claude Ball: Okay. And so this primo project has. Has technically started already.

Chris LaFay: It'll start on. It'll start on Monday. They need to sign the contract still. But yeah, okay, I'm doing kickoff on Monday.

Claude Ball: I can't put my payment in.

Chris LaFay: Yeah, you can put your payment in. Like, you put your payment on on Monday.

Claude Ball: Yeah, but don't we get paid next week?

Chris LaFay: Yeah, but I ain't getting paid next week, bro. I ain't getting

Claude Ball: my birthday coming up. I have to pre order something.

Chris LaFay: Put it out. Put it on Monday. You'll get it in like a week and a half.

Claude Ball: But that's like. That's not next week, though.

Chris LaFay: You might get all. Depending on how quickly this goes, you might get all 4k next pay cycle. So.

Claude Ball: Yeah, well, that's my intention to finish it in a week.

Chris LaFay: So good luck. The best laid plans or something.

Claude Ball: I don't know now. You know what's funny? You know, I haven't even, like, really looked at it since we talked, so. So since you're here going into it, is there any special things, like, I need to consider for art direction at all?

Chris LaFay: I don't know. I don't know yet, in all honesty.

Claude Ball: Hey, you said they overdid the purple.

Chris LaFay: I thought they overdid the purple. You looking at it, you think that's a good amount of purple?

Claude Ball: I mean. Okay. Sorry. No. Okay. Okay. Okay. Okay. Okay. I just think I liked the gradient so much that it was nice to see a lot. But after that initial 30 seconds. Okay, I think you're right.

Chris LaFay: Yeah, it's a little. It's a little. It's a little much. It's a little much.

Claude Ball: Oh, this one. Okay.

Chris LaFay: But it's. It's a good, like, overall. Like, the color palette's good, though. Like, I have no complaints about that.

Claude Ball: Oops. Do they? And if I'm remembering correctly, didn't you say, like. Like, we want to do some, like, unique image treatment for them?

Chris LaFay: Did you say that I, I normal. I normally say that. It's not an uncommon thing for me to say.

Claude Ball: I've been trying to, you know, I think I told you this like, you know, trying to elevate my website stuff.

Chris LaFay: And that is like Aaron Headland now, man.

Claude Ball: And like, so the like that part feels where it's. I don't like the word amateur, but it's not where I'm trying to get to of like unique image treatment. It seems like where a. A lot of the like higher end websites that I'm liking, they have more unique layouts rather than like image treatments doing something cool or unique animations. And so I think, I think that's hard with how we approach websites because if I'm doing a unique layout, then it's going to be hard for me to like create a block library. Because this section might look this way on the homepage because we chose to do it that way.

Chris LaFay: But which is fine. Like if you, if there's a, if there is a full. Going back to the whole, like I did the, the concept of like sections and components. If you have an idea for a full blown section, do.

Claude Ball: Oh, interesting. I see what you're saying. Yeah.

Chris LaFay: I think the problem was like going back to like the consume site is that you created sections for things that should have been small components.

Claude Ball: Yes.

Chris LaFay: And then you couldn't put them together. So like if, like I want you to have ideas for sections. Yes. And they can be unique and they can be multi for lack of nice, like lack of better terminology. Multi road, if you will. And that would be a section. Versus your heading. Components with an H2 tag and a eyebrow. That's just the.

Claude Ball: You said their graphic designer made this, right?

Chris LaFay: Yeah.

Claude Ball: Just fun. This looks like the work that I, you know, used to do when I first started working with you. And so it feels like a graphic designer did it.

Chris LaFay: Yes. And she is. And she is absolutely a graphic designer. 100%.

Claude Ball: Is she older?

Chris LaFay: No earthly idea. All I know is that she is a she

Claude Ball: is a she.

Chris LaFay: Mm.

Claude Ball: Why does that sound funny? Okay, what are we waiting on for this project?

Chris LaFay: For which one? Primo.

Claude Ball: Yeah. Like why is it starting on Monday?

Chris LaFay: Why is it start on Monday? Because we need to get a site, one of their sites devved up by mid April.

Claude Ball: No, like, what are we. What do we. It seems like you have a lot already. So what?

Chris LaFay: All I have is that design. Like all I have is that design inspiration. That's it.

Claude Ball: Oh, okay. Okay.

Chris LaFay: Like, I haven't actually like had a thorough Conversation with them. Like I could. This is the thing, they're not a sexy business. They're not like, they're not going to have this like amazing, interesting, unique story concept. At the end of the day. Are you basically saying that you feel like you have enough information, like start designing something?

Claude Ball: Yeah, probably. Like that is kind of what I was thinking. Like this, but maybe not. What is this aspect? Was, is that a competitor?

Chris LaFay: No, not a competitor. That is the parent company and Primo is a brand. And so. ASP owns a handful of hospital product brands. Premium Primo is one of them. And the thing is ASP is going to be adding in more brands later down the road. So that's why we're doing this, is why we're basically going to take Primo's the per the first priority and then we're going to take the Primo site and swap its colors for ASP Because I get.

Claude Ball: It's like the date. Okay. There's. Oh, okay. ASP feels very different.

Chris LaFay: Yes.

Claude Ball: From Primo. So just swiping colors doesn't feel like it's going to be enough.

Chris LaFay: That's what they paid for, though. They didn't pay for two full blown website designs.

Claude Ball: Oh.

Chris LaFay: Which is why I think like designing this somewhere along the lines of like the Velocity site is probably going to be where we land. Just it, it looks good. There's nothing like super uber, uber unique about it, but it all just looks good. And so I think that's kind of the route we're gonna go.

Claude Ball: Oh, I, I, I see their current version now and.

Chris LaFay: Yeah.

Claude Ball: Okay.

Chris LaFay: You designed the Velocity site.

Claude Ball: I know. I'm talking about the Primo.

Chris LaFay: Oh, oh, okay. Yeah.

Claude Ball: Okay. All right.

Chris LaFay: Basically they sell hospital products to doctor. Like hospitals like they make nurses lives and doctor's lives. They're not selling like tiny little scalpels and stuff. They're selling like bigger products.

Claude Ball: She put some inspo that I really like.

Chris LaFay: It's a Figma file. Yeah, I didn't know that.

Claude Ball: Yeah, it's at the top and it's the one with the, it's the Medline and I've been wanting to do something like that. So that'll probably be what I do. Some like unique shape like that.

Chris LaFay: One second. I'm going to respond to that in a second. Okay, cool. There's that. Where are you going to find this

Claude Ball: channel Primo in every fourth quarter. I like the Mic Jordan, them. Do they have any unique patterns anywhere that you've seen?

Chris LaFay: Where is their design inspo? Oh, you know what? I Never zoomed out enough.

Claude Ball: You see the Medline one?

Chris LaFay: Oh, that's cool. Yeah.

Claude Ball: And you said they have pretty good, like, photography. Is it just of their. Of their products, or is it also of some people?

Chris LaFay: No, just their pride. Their products. Just have to. Like, if you went to the Primo site and you saw the product photos there, like, they're very stark because they're very purple, so. Oh, yeah, I see what you're saying. Like, there's so many similar. Like, I'm looking at their, like, the Athena health and stuff. I see what you mean. Like, good design inspiration here. Like, this is. You could probably design out the whole site, like, this weekend. Like, this is not super complex. Oh, there's another mockup over here. Wait a second. They. Oh, wait, dude, I didn't scroll over here. They have this one over here to the right. You do see why I'm thinking it's too much purple, right?

Claude Ball: Oh, yeah.

Chris LaFay: Okay.

Claude Ball: I. I am. I do like their use of the dark purple, though. So I think that'll be what I. And I'll just dial down every other version of the purple in other places. But I love that dark purple. Oh, that is. That might be my new favorite color this week.

Chris LaFay: I think we need to get a texture on top of that. So rather than just a gradient, I think we need to have some sort of a texture which will make it feel a lot better than just a wall of purple.

Claude Ball: On their video, on the opening, they have this really cool, like, a checkerboard type overlay

Chris LaFay: on their homepage right now.

Claude Ball: Yeah. And I'm. I started playing the last video, the Primo air float overlay. And in the opening of the video, like a little checkerboard thing. Yeah. Oh, might play with that. What is there? I'm just gonna read it actually, like. Like, what are the products? Because maybe there's a texture in it. Like, what is this?

Chris LaFay: Yeah. So if you want. If you go to Primo Inc.net.

Claude Ball: yeah, that's where I'm at now.

Chris LaFay: It looks like they built. I think what these are, like, inflatable wound care stuff.

Claude Ball: So, honestly, like, that pattern might be a good fit because it'll look like. I'm thinking, you know, like an air mattress, you know, kind of has those, like, air bubble compartments.

Chris LaFay: Yeah. Huh.

Claude Ball: So that trigger board might be a good.

Chris LaFay: Yeah.

Claude Ball: I probably watch all the videos to see if they. I'm curious if they ever have, like, a product video where they, like, zoom in to the thing and shows. Yeah. Like, we built these by creating these air compartments. In every single one. One of our products. And. And, like, what if they're, like, a cool shape that could be used? So. Okay.

Chris LaFay: Yeah. Do you. I realize it's 2 o'.

Claude Ball: Clock. Yeah.

Chris LaFay: Do you want me. Do you want me to see if the dude can chat with you for 30 minutes

Claude Ball: on Monday today,

Chris LaFay: and you could ask him a couple of questions about what he likes and what he dislikes about his design Inspo.

Claude Ball: No. Ew. No. No. Well, I'm not getting started today until, you know, payment has happened, so it's my boundary.

Chris LaFay: Chris, if I. No. Which is. Which is perfectly fine. If you were gonna actually start this weekend. Yes, obviously I would get you paid.

Claude Ball: No, man. Well, yeah, sure.

Chris LaFay: Do you want me. Do you. I can also give him a buzz and be like, hey, my designer was looking at this design inspiration stuff and has some ideas for what do you like to try out already? Can I talk with you for 30 minutes and just see if. Tell me what you like and what you dislike about it. I can do that and give you notes.

Claude Ball: Oh, yeah. I mean, yeah. Like, I was honestly saying no because I don't have time to do it today, but if you're fine with doing it. Absolutely. Like, it does look pretty straightforward to where I could get started on it.

Chris LaFay: Okay, let me do that. I'm gonna help my. My wife just came upstairs. I'll help her with some laundry stuff. So let me go do that and then I'll see if I can give him a call later. Bye.