Feedback & Quick Crashcourse On Design-for-web

[00:00] Hey Casey, good morning. So I had a chance to look through the mock-up. My plan is either way to kind of take the graphics that are in here and do a little reformatting with them

[00:10] and then let you review them before I put them on the site. But I had mentioned that I was going to kind of give you some feedback on how this is structured

[00:20] such that when we're making pages in the future or when we start doing the dynamic version of the agentic barometer, like the way that the thing would need to be formatted to make the workflow somewhat linear.

[00:30] So what I did is I took a look through. I left some comments on here kind of like at a high level, but I figured I was just going to go through because at the end of the day, this is formatted as like a piece of print or for an image output, but not for web.

[00:50] And so I figured I would kind of just like, I left some comments and then I just walked through some of the things. So right off the bat is the way that the actual structure of this document or this frame is made,

[01:00] as you can see, it's just basically like grouped. Nothing is actually positioned based on anything else,

[01:10] which is just very much like the nature of laying something out in like Illustrator or whatever. If I look at the spacing between them, like it's not consistent, right? And that's not how the web works.

[01:20] Everything on the web is sort of placed into a frame and a container, and then you use padding and margins to help kind of clean up the spacing and gaps and all that sort of stuff. So one thing that is really helpful is if you are sort of just laying stuff out, right?

[01:30] If it's sort of like accidentally over there or whatever, you can click on the three and you can use the little auto adjusts

[01:40] and it will clean up the stuff to get it close. And then it'll reveal the sort of spacer in there. 32 is, I think 32, ironically, is actually what we use on the site.

[01:50] But I think that's by accident. What we use on the site, I should say, for desktop.

[02:00] Once we get down to mobile, it switches to, I believe, 14. So yeah, so that's one of the things that would need to be kind of done. Now, I just have these highlighted. They're not actually still relative to each other.

[02:10] So the next thing would be to create an auto layout out of that. And that makes them into a frame and makes it such that I can rearrange those pieces

[02:20] and they become elements that have properties to them that are not just placed. So right now you can see that this one is full width because if I look at the resizing, it's set to fill, which is good.

[02:30] For the height, nothing pretty much ever should be a fixed height or width. So 13 we would need to set to hug contents.

[02:40] You can see it automatically now took the size of the text and the text properties and used that for the styling. You might go, well, why is there so much space there?

[02:50] Well, the line height is also set manually here at 50 pixels. We use percentages in the world of the Internet because it's a lot easier.

[03:00] You don't have to define them every single breakpoint. So in this case, I believe it's 165 or 16.5 is the way to sort of set that.

[03:10] Let me double check myself there. So it is slightly different. So, yeah, 165 is what we use on Webflow for eyebrows. For text like this, it's 110.

[03:20] Oops, 110, not 11. And that gives it enough breathing room, right? But we're also not using this styling here. I'll get to that in a second. So, yeah, so that's one of the things that you need to be able to kind of start doing, right?

[03:30] Like this thing has a fixed width. It needs to have a width that fills the container. Same goes here, fills and hug, fill and hug.

[03:40] And then that way, when I do this, you can see it starts to actually behave more like a Web page. And why would I ever do that? Well, actually, that happens literally every single time anyone opens a Web page because they're always opening it on a different screen width.

[03:50] With the exception of opening it on a screen that's wider than the container that holds these pieces,

[04:00] it would always be some undetermined width, right? Now, in the case of these, we also have to consider this because this is also just placed on here

[04:10] and would actually need to be in relation to this other piece. So the way to do that would be to select this thing. And we can just assume that would be a graphic.

[04:20] Like we don't need to define every single piece in there in this sort of auto layout way. But we want to grab frame six, which I can double-click and just call it contents left.

[04:30] That's going to drive me crazy. And I'll move that ahead of it in section two. And then for this group, we'll call this diagram.

[04:40] And then I'm going to select both of them, and I'm going to do auto layout. And you can see it made a slight adjustment, and it's basically now making it where these two are in conjunction with each other,

[04:50] and there's this magical spacing thing here. Now, the spacing thing is also a problem because this isn't set into a container.

[05:00] It trickles all the way up to the top of how the page is arranged. There's a line around how defined it has to be relative to the tooling that we're using,

[05:10] just kind of figuring it out. But if, for example, there's an inconsistent spacing here between the bottom of this and the top of that section,

[05:20] that would end up getting baked in, and that's not actually accurate. So we would need to kind of continue to set these up. So I'm not going to keep going through all of this and read through the whole thing. That's sort of one of the sort of way of structuring your pieces.

[05:30] So next thing to kind of touch on of the differences is, you know, well, now that this is highlighting,

[05:40] this is also something that we'll need to actually deal with. Like if I were to pull this section out of this frame, and so if I just copy this and go over here and hit paste,

[05:50] you can see that the size of the graphic is larger than the frame that's there, because this is not actually framing anything. It has a mask group, yes, but we need to actually set it to be a framed thing.

[06:00] I realize this is a massive pain in the butt, but this is sort of the way that the web works. We either have to do it here or we have to do it once we get to Webflow.

[06:10] And in that case, I'm basically riffing and trying to make your design work. So it would be better if we sort of get it set up in here. We can go into the framing stuff later because it's a little bit of a pain to kind of take existing stuff and put it in.

[06:20] Okay, so text. Text and imagery and text and imagery.

[06:30] So one of the things that makes this mock-up so difficult to implement is the lack of using any of the styles for the text.

[06:40] So all of these things, regardless of just kind of being placed statically, they're all defined over here as one-offs. Like every single thing is effectively custom styling for each one.

[06:50] Again, something that in print doesn't really matter as much, although it can be a pain if you're working with a huge document, as you know.

[07:00] But in the case of web, we really have no choice. It has to be set to a style or a new style has to be made for every single one, which is not something that I'm going to be doing.

[07:10] Because it turns into a nightmare of keeping track of all these different styles, making sure they work on mobile. As soon as we start changing stuff, then it really gets all out of whack.

[07:20] So less is more. Thank you, Ms. Fanzaro. We need to kind of stay with that. So on that note, I basically took one of the sections over here and just was like, all right, let me just show you what I mean when it comes to that stuff.

[07:30] So just looking at the styling here, for this eyebrow text, we have it set here to 16 point.

[07:40] In reality, it is 12 point. That's actually the height of it, and it's not technically points. It's actually pixels.

[07:50] But they almost always translate one to one. So that would have to be something set. Now, we already have styles in Figma. I have a typography style that's Museo Eyebrow.

[08:00] So if I were to go and change this to H3, it would just change it, and we don't have to set that manually. And it changes the spacing as well. If I set this to H2, it's going to start changing up how the spacing works.

[08:10] Now, that is set for desktop because, of course, once we get to mobile, all the styles have to change. So there's actually multiple breakpoints and multiple sizes for each one of these things,

[08:20] which is where laying things out with rigor really, really matters, and sticking to the styles that we have really matters because they trickle very quickly

[08:30] or just add loads of design debt that I basically have to kind of keep up with in Webflow.

[08:40] So, again, it's a real test to kind of go through and rebuild this whole thing. So I took one piece that you can kind of start working with,

[08:50] and I sort of set it up that would be ready to be developed if we were to do the Figma via Codex to Webflow development pipeline. That basically means that I have this example desktop, right?

[09:00] I've set that. I have a logo up here. The logo is just placed statically. Is that ideal? No. It actually should be placed inside of a frame and mapped on top of it,

[09:10] but I don't think we need to get to that full level because some of these pieces already exist on Webflow,

[09:20] and I wouldn't be needing to bring them over anyway. So we can focus on just the page. But, for example, this one I set to be a two-column auto layout. So we have the hero on the left, and we have the teaser graphic on the right.

[09:30] It's set, meaning if I rearrange these over here, it's going to rearrange them on the document because its layout is being rigorous based on that.

[09:40] That, you know, tangibly allows me to make sure that it's centered as opposed to, like,

[09:50] bottom justified or top justified or center, et cetera, right? But then when I get to mobile, I have to have a separate mockup if, you know,

[10:00] We're going to have to acknowledge that the things will need to be figured out on mobile. And all of a sudden that means that I have to change the size, right? Like I just kind of rift and drag the size, but we might make it always like 100% or set to fill, right?

[10:10] So that regardless of what the size of the screen is, it will always be in relation to that.

[10:20] And then again, changing all the styling here. You can see gap is 16, over here it's set to 32. And then I'd be like, where do I find all this stuff? So just because of the pace we're moving at and the fact that we're kind of a little bit like scrappy in this sense,

[10:30] we're not documenting everything, right? Mostly because you can pretty much pull it right from the Internet.

[10:40] So if I just pull up our page here, you can see right away that there are some rigors built into this that, you know, are not necessarily something we need to worry about on Figma.

[10:50] But for example, you can see that it's responsive, right? There's a container that is holding everything inside of that.

[11:00] If I start to get down to less than the width of the container, now the logics of how the page needs to rearrange start to show up, right? And you can see why it's really tough to ever kind of nail down like one way that it should look or kind of catch every bug,

[11:10] because you never know the size of someone's screen or whatever it might be. So again, those, you know, using those styles and stuff really matters.

[11:20] So how to find them. So if you're in any given Chrome window, you can basically just right click and hit inspect, and that'll open up the developer tab here where you can see the code for the whole site.

[11:30] And you can see as I hover on stuff, it highlights it right inside. Most even easier is you can go up to this arrow and hover, literally hover over the thing,

[11:40] and it will tell you right up there. You can see, I think if I go to it, it'll go away. Yeah, you can see the color and the font, right?

[11:50] Those are the two biggest pieces. If I go to like the section itself, you can literally see the spacing and everything right there. So this has 64 pixel spacing across the board so that they're nice and spaced out.

[12:00] Yeah, for the most part, that's a source of truth. There are times where the browser will show what has been rendered and not what has been specified.

[12:10] So in the example would be like someone specifying something based on an equation. Like I want this to be 60 pixels plus 10% of the width of the screen or some such thing

[12:20] so that they can always maintain something. And the browser is going to go, okay, that equals 64 or whatever, right?

[12:30] But it's close enough for the sake of a mock-up to kind of let our AI tooling figure out like, hey, we want to adapt this thing, which is 95% accurate, into our system using the existing stuff,

[12:40] and that'll get us a decent waste. So, yeah. So anyway, I realize that's like a lot of random stuff and a little bit of like a crash course in how websites are developed

[12:50] and how they work, but that does end up being sort of the root of it.

[13:00] I would say that I'll just kind of quickly show you the end result structuring, right? Like in Webflow, you have no choice. You can't sort of just drag stuff in and place it anywhere.

[13:10] It needs to live in some sort of structure. So you can see that what I'm specifying in Figma is not terribly different, right? If I jump back to Figma, if I go back here, right, I have this one.

[13:20] I'm calling it to call, and I have header left and teaser on the right, right? If I jump back into Webflow, you can see two column, content group, content group, right?

[13:30] So, like, the general logic is still there and makes it a lot easier for our tooling to sort of go like, oh, I see this thing. The properties might not all be set, but it didn't matter in Figma.

[13:40] You know, we can get these things into place kind of thing. So, yeah. Anyway, let me know if you have questions or if you need some more input on what these things are.

[13:50] I've done my best to try to keep the styles in Figma here updated for desktop. For the most part, I should say this at the end here.

[14:00] For the most part, we don't need a mobile mockup for everything, right? There are basic logics of just like this thing will always be on top of this. This will always be on top of this.

[14:10] Like, that's just typical reflow. So, don't feel like every single time you make something, you have to make it twice. That's not the case. But in the case of something like this, right, where you might want a specific layout, right, the default for this thing, right, would be basically.

[14:20] Let me try to do this without breaking everything. But the default would effectively be to take these pieces.

[14:30] Let me just make that white. Right, like obviously these can't have white backgrounds either, but I see there's a screenshot. So, this would need to be made out of real text.

[14:40] But the way that this would end up working actually is kind of tough given that it's a screenshot. So, let me do this.

[14:50] Quick demo. Okay. Let me go over here. All right. So, the reality is that if this.

[15:00] This is a two-column lockup that once it gets to mobile it would be doing something more like that, right, which means that the text either has to scale down, you can see it's very tiny now, or it needs to be quote-unquote reflowed, which is where you basically say

[15:10] okay if something is, in this case would be a five-column grid, right, because there's

[15:20] sort of two phantom columns there we could argue, that those would end up being reflowed into something that would look more like this on mobile, right, because it becomes

[15:30] back to the grid, and you can see the obvious problem there with the text, so we'd have to drop that down. Again, we have to use percentages, not hard values, but that way you could see

[15:40] like we can try to start to get it, but point being is that if you just sort of leave it to me, like I'll kind of do my best to make it work, but if there's something specific

[15:50] that you want, or there's some specific way we want these to arrange, then we could do that. If these weren't screenshots, I would say the more tangible way to do it would be to flip these boxes, so the 74 is to the left, and the text is then to the right, only on

[16:00] mobile, because on here that would be just sort of like too wide and annoying, but you know, again, mobile is a different game, or tablet, or whatever it is, so yeah, okay.

[16:10] Last thing, I know this is long, but I think it's valuable. The last thing is interactive

[16:20] pieces, so there's really no great way in any designer's mind to ever kind of like convey exactly how the thing should work in all the different environments. I totally get it.

[16:30] I do mock-ups as well. For clients, it's really hard to be like, this is how it would behave, so the typical way to do something like this is to try to show both states, or as many

[16:40] states as possible, within one mock-up, so in this case, right, we have obviously like

[16:50] all these different pieces. The obvious thing here is what does it look like when it's closed, right, so the way that a typical, oops, sorry, I just totally threw that screen all over

[17:00] the place. There it is. The way that a typical accordion works at the most like basic level, if I just drag this over here, is to have some header and some kind of drawer, right,

[17:10] so you usually have like the target and the drawer, or the header and the drawer, or the header and the container, whatever it is, but the idea being is that there's

[17:20] something that's going to expand and go away, and then there's some group of stuff that doesn't, and so the obvious way to always do it is you sort of have like your header,

[17:30] and then some open or close icon, and then when the thing's closed, it looks like that, when you click on it, it looks like that, right, and so in the mock-up, you would sort of do this

[17:40] kind of thing, right, so that you can sort of show like this is the way that I want it to feel when someone might interact on it. If there's, you know, a lot of times you also will get like

[17:50] another layer where people are like, oh, I also want it to, you know, when people hover on it, or whatever, to turn pink or something, right, so that they say there's a hover state here as well,

[18:00] and the same, sometimes I even get them where there'll be like a hover state to close, right,

[18:10] so if they have it open, they might show that to close it, we're going to use that same color kind of thing, so you start to get like, oh, okay, I can kind of see baked into this multiple states

[18:20] or instances where things can be developed from, and then, of course, fun stuff that has to then be translated over to mobile, right, so in the case of like this accordion, you know, on desktop,

[18:30] it'd probably be like that, and then on mobile, we go, okay, it's going to be, you know, half the width or whatever, and that'll be smaller, and then this stuff has to get smaller, and so on,

[18:40] and so forth, so again, I could figure it out for the most part, but if there is an instance where you're looking for something specific like this, it's good to kind of have those multiple views

[18:50] and multiple states. Okay, yes, that was a lot of stuff, I know, apologies in advance, but yeah,

[19:00] I will do some quick like reworks of what these could look like, actually, I can't, they're images, never mind, so I'll need these to be either made in Figma or the artwork needs to be reformatted

[19:10] such that it can fit a little bit better on in the image fields, so like currently, we basically

[19:20] have these as squares, and again, that's so that when I flip to mobile there, it's still visible, that's why I say if you want to kind of make them like letterbox, like if you want them to be wide,

[19:30] they should be like a four by three, sort of at the minimum like width kind of thing, now you don't have to put them on a green background, that's just my editorial choice for these images, when I made

[19:40] them, they could certainly just be floating there, but just be cognizant that there is padding, so there would be some semblance of being cut off, so they have to sort of float within that square,

[19:50] or just sort of accept the fact that they're an image, and it was just basically what I did.

[20:00] For more information, visit www.voom.com