[McGuire] Here we are. The final design review and some more interactions before we cover the last steps in this course. We've made a ton of progress and it's an absolute honor to introduce the person who runs design for all of Webflow University, Sara Lundberg.
[Sara] Now I get to teach. We're going to review this whole portfolio together. We'll cover spacing, link naming, paragraphs, we will add our resume and we will add more interactions.
[McGuire] It sounded a little bit like you said, the word interactions, but you added several, several Zs at the end of interactions. Was that intentional?
[Sara] Did I? Did I do that?
[McGuire] Is that I got, is it Swedish?
[Sara] No, it's not Swedish. Just, you know, when you teaching... Okay.
[McGuire] Okay.
[Sara] Okay. Should I continue freely?
[McGuire] Go ahead.
[Sara] Let's start with spacing.
[McGuire] And homepage.
[Sara] All right. So I have 23 notes.
[McGuire] On the homepage?
[Sara] Ye-, no. No, on the whole product.
[McGuire] Okay. On spacing?
[Sara] On spacing.
[McGuire] All right. What's the first one?
[Sara] So go down to the product list and check that texture so we can make it even.
[McGuire] You're talking between the H2, the Paragraph, and the collection list.
[Sara] Yes.
[McGuire] Okay. So the preference would be, let's add some top margin here to even it out. How does 20 pixels look?
[Sara] 20 looks good.
[McGuire] Okay. So now we have-
[Sara] No, no, no. I'm saying it. We have 22 left.
[McGuire] 22 left.
[Sara] Perfect. So, you see on the product details, I want you to increase the padding on that card.
[McGuire] You're saying on this card increase spending. So we have 30 on all sides. What are you... You're looking at 60 or so?
[Sara] 60 would be perfect.
[McGuire] Okay. So 60, more spacing on the inside of each of the project details link blocks.
[Sara] So I want you to look at the text in that product detail, is, I want that to be even out. The spacing between each element.
[McGuire] Great catch. Okay. So, two options here. We can increase the space between architectural website and the project Paragraph preview, or we can decrease the space by kind of removing the... looks like I got 20 pixels of margin on the top of project name, preview. You have a preference there?
[Sara] Do you have 10? That would be great.
[McGuire] 10 on this one right here? Okay. So, vertical alignment between UX design, or the space between UX design, architectural website is more even.
[Sara] And scroll down to the contact form.
[McGuire] Okay. Contact form. Double-clicking, entering the symbol.
[Sara] Perfect. You remember we did the padding 60 on the product details?
[McGuire] Yes. Same thing on the-
[Sara] I want them to be the same on the contact page.
[McGuire] Form block up to 60?
[Sara] Yes.
[McGuire] Great. So, it's even. 60 pixels of padding, space inside on there. Now it's evenly matched to the 60 pixels we changed in the project details.
[Sara] Awesome. So, just as you did the text even in the product details card, I want you to do it, the text even in the contact form.
[McGuire] So space between the H2, the dark Paragraph and this field label. Assuming we can just decrease the margin here to something like 20 or 15?
[Sara] 20 would be great.
[McGuire] 20?
[Sara] That's everything I have on the Desktop version on the homepage.
[McGuire] Okay, great. Good notes.
[Sara] All right. So I have some notes on the Tablets. So, let's go down to the Tablet breakpoint.
[McGuire] Tablet breakpoint. Here we are.
[Sara] So, the spacing is a little bit tight on this section. So can we add some more padding in there?
[McGuire] So on the section... So this is all sections, not just the top section?
[Sara] Yes.
[McGuire] Okay. So, we'll add padding. In fact, we can option, click to remove. Do you want something like 60 or do you want a smaller number than that?
[Sara] 60 is perfect.
[McGuire] Great.
[Sara] So, if you scroll down to the project details.
[McGuire] Okay. The details-
[Sara] I want...
[McGuire] ... right here.
[Sara] Yes. I want you to increase the padding there.
[McGuire] Okay. Increase the padding there.
[Sara] Decrease!
[McGuire] You definitely said "increase the padding." So, how much do you want to increase the padding to? Is 175 acceptable?
[Sara] (laughing)
[McGuire] Did you want to increase? Did you want to increase the padding more?
[Sara] No. Decrease.
[McGuire] Okay. So 30?
[Sara] Perfect.
[McGuire] Great.
[Sara] All right. So, scroll down to the contact form.
[McGuire] Okay. Contact form. We're on Tablet.
[Sara] So, I want you to decrease the padding there as well.
[McGuire] Okay. Back to 30 to match the top?
[Sara] Yes. That's great.
[McGuire] So, we have 30 padding here, 30 padding here, so we have that consistent line. That alignment right along here.
[Sara] So that's it. Let's go to Mobile landscape and look at the section padding there.
[McGuire] Okay. Section padding, we'll select the section. Padding is currently 15.
[Sara] So I want you to increase that padding. I think 30 would be great.
[McGuire] 30 is great. 30 on all sections.
[Sara] So if you look at the H1 here, it's a little bit too large. Can you decrease that size?
[McGuire] Yes. 25, 22.
[Sara] That looks good.
[McGuire] Okay. H2 then, to decrease its size, to keep it proportionate?
[Sara] Yes.
[McGuire] All right.
[Sara] And the last thing, I want you to do the product details a little bit smaller padding on that one.
[McGuire] So, this is the project details, it's 30. Something like 10 or 15?
[Sara] 15 would be great.
[McGuire] All right, 15. With that, the assumption is you're going to do the same thing with contact form to keep it even?
[Sara] Exactly.
[McGuire] How many notes do we have left after this?
[Sara] So, we are on the 12th. So we have 11 more notes. Is that right?
[McGuire] That sounds like math.
[Sara] Yeah. All right. So that's it on Mobile. Uh, let's go to the larger breakpoints.
[McGuire] Larger breakpoint. 1920.
[Sara] And I want you to look at the, uh, section padding here.
[McGuire] Okay. Section padding. Select your section. Currently 60, it's being inherited from what we changed here to 60.
[Sara] Perfect. I want you to increase that padding.
[McGuire] Decrease it. Increase it?
[Sara] Nope. Increase. I think 100 would be great.
[McGuire] 100 top and bottom. That'll affect all sections.
[Sara] That's it for the homepage.
[McGuire] Going back to the base breakpoint. And the next page is?
[Sara] So, I don't have anything on the contact page. So, let's move on to the password and 404 page. Or what is the password-protected page? Can you show me that one?
[McGuire] So, you hadn't provided a design, uh, design guidance on this one. So, we improvised.
[Sara] Oh. Cool. Minimal. I like the focus you have to the, to the Heading. Let's move on to the password page and check out the larger breakpoint.
[McGuire] So password page, 1920.
[Sara] So yeah. The Heading, the whole thing, too wide.
[McGuire] So, we'll select the password Heading here. Let's decrease the size of that. We could do it on the typography here, or we could set a max width that's closer to the original, and just decrease this... actually remove that size. So we're matched to what's going on here.
This was 30 at 1.1. This is 30 at 1.1. So it looks scaled down because we're looking at the scaled view. Is the thought here you want to continue with this size? Or do you want to increase the size of the Heading on 1920?
[Sara] I mean it can be a little bit, uh, larger on the larger breakpoint.
[McGuire] Okay. So we'll do Heading size of...
[Sara] I think 50 would be great.
[McGuire] 50. So, in this case-
[Sara] I think 40, 45 would be great.
[McGuire] 45. So, in this case, do you-
[Sara] I think actually 40.
[McGuire] We could, instead of having a max width of 280, we could say 320 or even-
[Sara] I feel like we don't have to mess with that one.
[McGuire] We can make it view port width characters.
[Sara] Okay. That's perfect.
[McGuire] Okay. 20 VW.
[Sara] I mean, we could have done like 0.20.
[McGuire] Zero point 20.
[Sara] Okay. So, go back to 45. I think that was okay.
[McGuire] 45, VW?
[Sara] No, pixels.
[McGuire] Pixels. Okay. 45 pixels on this breakpoint.
[Sara] So only nine left. Almost done. Let's move on to the 404 page.
[McGuire] 404 page. Page 404.
[Sara] What will happen when the viewport gets smaller?
[McGuire] Okay. Still looks great.
[Sara] It looks good. Smaller. Smaller. So you need to drag it to a smaller device. Can you see the issue here?
[McGuire] Contrast.
[Sara] Cutting's too large. So, I want you to go to the Mobile and decrease the size-
[McGuire] So Mobile landscape, you wanna make the change?
[Sara] Yeah, I think that would be great.
[McGuire] Okay, so.
[Sara] Yes.
[McGuire] Okay. So, on the 404, on this text, uh, decrease it to 100 pixels?
[Sara] That looks good.
[McGuire] Okay. So a hundred over here, even when it gets more narrow.
[Sara] That looks good for now. So, let's move over to the product page and look at the buttons.
[McGuire] Okay. So, back to the base breakpoint. You're talking about the buttons on the page, this button, right here?
[Sara] Yes. So, look at the space. So, let's make sure there's more space on the sides of the button.
[McGuire] So on the, on the left and right, something like 20 or 30?
[Sara] That looks good.
[McGuire] Okay. So 20 on the left and right. 10 on the top and bottom.
[Sara] I also want you, since you are here, to decrease the margin from the text and the bottom.
[McGuire] Decrease?
[Sara] (laughs) Did I say it wrong again?
[McGuire] No, it's okay. If you want to decrease it, it's... it's certainly possible. How much did you want to decrease-
[McGuire] Just say when.
[Sara] It's flying. All right. So, increase the space between the text and the bottom.
[McGuire] Okay. Undo, undo, and increase the space on the project description underneath. So, 10 pixels, 20 pixels, 30 pixels. What are you feeling?
[Sara] 30 would be great.
[McGuire] 30 pixels.
[Sara] So, if you scroll down to the grids, I want them to be even gaps.
[McGuire] You're saying the grid gaps here, which are 30, and the grid gaps here, which are probably 16. Yeah, 16.
[Sara] Yes.
[McGuire] You want those even. Do you want to match this? So this is 16 and this is 16? Or do you wanna match the bottom to 30?
[Sara] The bottom to 30.
[McGuire] All right. So we'll lock this and we'll type 30. So now our grid gaps are matched between each of the three grids on the page. Again, this is 30 pixels here. This is 30 pixels here, on the columns and rows, and then also here in between each of the columns.
[Sara] So it's going to be tighter on Tablet than Mobile, so, let's make sure, uh, we decrease the gaps.
[McGuire] So, you're saying the grid gaps on the image grid, something like... let's lock that. 15 or 10?
[Sara] I think 10 would be great.
[McGuire] So let's do 10 pixels there. And then, assuming you want to match the same thing in other projects?
[Sara] Yes.
[McGuire] Get a grid, lock it, 10 pixels. Done.
[Sara] Cool. One thing to know, go down to Mobile, and I want the image grid to be one column.
[McGuire] So, the image grid. Image grid is currently a two by two. Remove that second column. Right-click, delete column.
[Sara] So, just make sure the gap matches.
[McGuire] Between other projects, and so this is presently 15 on this one. We can option, remove that so it inherits the 10. So, now we're matching 10 pixels of spacing here, and 10 pixels with spacing here.
[Sara] Awesome. That's it for Mobile. So let's go to larger breakpoints and check the Heading.
[McGuire] 1920 Heading is a Heading.
[Sara] Okay. Um, Heading actually it looks great. The only thing that's left is the Navbar.
[McGuire] Okay. Back to base breakpoint for the Navbar. Double click to edit our Symbol.
[Sara] Okay, so check out how responsive the menu is.
[McGuire] So, in Tablet, we initiate this menu button. We can go and open the menu.
[Sara] Look at the padding on the left there.
[McGuire] Great. So the nav link, we'll go in there and increase the padding to 30 pixels on both sides so it's matched.
[Sara] All right. Looks good. Check out Mobile portrait.
[McGuire] Okay. Mobile portrait. Assuming you're looking at decreasing the padding to lineup the logo?
[Sara] Exactly.
[McGuire] Okay. So we'll decrease from 30 to about 10.
[Sara] We don't have anything left. That's it.
[McGuire] 23?
[Sara] Yes.
[McGuire] All 23.
[Sara] All 23. All right. So, that's it. That's what we have for spacing. So let's talk about naming. Can you go to the collection list on the homepage?
[McGuire] Going to the collection list on the homepage. Going back, going back here. Going to the collection list on the homepage, back to the base breakpoint. All right. We're here, collection list.
[Sara] Right now, it's not very accessible. If you use a screen reader, it will read UX design first.
[McGuire] That's an excellent point. By default, screen readers are going to read the first text inside the link. However-
[Sara] You can use Flexbox.
[McGuire] Flexbox. So in project details, if we want this to be more specific, we can put together... using our collection, we can put together a more descriptive version of text. More descriptive text for someone using a screen reader who's looking at more than just UX design.
So, here's how we can do that. For our button text here, we can continue to use this. But we're going to wrap it with a Div block. Here's why. If we go to command K, to enter quick find and add a Div block, we can use the Div block to organize a more descriptive title. So, we're putting button text right in here and we can change this later. For right now, it'll say, "View project." But, we might want it to instead say, we'll delete the word project, and so now it says "view". And that's okay for right now, because we're going to add two more text elements.
So, inside this Div block we're just going to copy and paste. And by default, text blocks take up full width. They're block level elements. But we can set these to in-line block. So they'll stack next to each other. Because on the second one, we want to bind it, we want to link this text, get this text, from the client name. Let's close this out because right now it'll show the name of it. It's a little close right now. So we can always take "view" and we can just add a space. Just pressing shift-space to out of manual space after view.
And the third button texts we want to use, let's just copy and paste again. We're going to unbind this and instead, again, shift-space project.
[Sara] Perfect.
[McGuire] And now that we have that Div block, we can place it right at the top. But we're going to use some magic here.
[Sara] Flexbox.
[McGuire] That's correct. Now, the first thing a screen reader is going to read is "View. Dark horse plan. Project." Why have we done this? Why have we positioned a Div block at the top of this link block? Well, the reason is if we use a screen reader, it will now say-
[macOS VoiceOver] "Link. View Darkhorse plan project, UX design, architectural website. I designed a layout inspired by architectural plans that responds to the user's input and changes with each visit."
[McGuire] Now, the link is a lot more descriptive. And we can add a class to keep things organized. Let's make this class project client preview. And here's where Flexbox comes in. Because the document order is correct now, because screen readers will look to this first, we can aesthetically still move it to the end. We can change the Flexbox order to last. Now, this is at the bottom and we can add margin top, we can just set the top margin to auto. That'll automatically create space. It'll push project client preview to the bottom, inside the space available in our link block.
And if we expand the Navigator, over here to the left, we can see, we can always see that project client preview appears first. Usually screen readers will look to the official document order, the order inside the navigator, and it finds this first and will read "View dark horse plan. Project."
[Sara] For Paragraphs, I only had one note here. Some are a little wide.
[McGuire] Agreed. And we can set maximum widths here at the Paragraphs level, at the all Paragraphs tag level. And a good example of this would be the contact page, the Paragraph does have a lot of texts we read from left to right. So let's go in here.
With any Paragraph selected, we can use the all Paragraphs tag. We can set a maximum width of something like 60 CH. And here's how those work. One CH is equal to the width of the number zero in any font. So whatever font we're using, if we set this max width to 60 CH on the all Paragraphs tag, it'll never get wider than 60 zeros in that font. So, we've added it to all Paragraphs.
There is one note, which is on the homepage. If we go back to the homepage, we set a maximum width. We manually set one on this class. So if we were to go back in, even though the assumption is this will affect all Paragraphs, we can see that though we're inheriting two selectors... and we can go back to that all Paragraphs. We can see that the max width is crossed out. So if we click that we can see the value is overwritten by a more specific selector. And that's of course, if we hit back, it's the Paragraph itself. So all we have to do, let's remove that more specific value. Let's hit reset. And now it's inheriting 60 CH. That 60 CH is controlled by all Paragraphs.
[Sara] All right. So that's it for Paragraphs. But, a lot of portfolio site do have a resume and ours doesn't. So I like to see if we can add one now.
[McGuire] Absolutely. And do you want this on...
[Sara] I want to make sure it's on all pages, so let's put it in the Navbar.
[McGuire] Okay. So Navbar, double click to edit. Assuming, do you want the nav link button or do you want it to look like the regular nav link?
[Sara] Regular nav link.
[McGuire] Okay. So we'll copy and paste. We'll make this one Resume. We'll make sure in element settings, it links people not to an external URL, but to a file, which we can upload. Now, Megan, our UX designer is entirely fictional, so she doesn't have a resume. That's okay. We can use the worksheets from P90X. Let's go to our Assets panel and we can just drag the PDF from P90X, right into assets and that's uploaded.
And over here, instead of external URL, let's have it linked to a file. And we'll want to choose the asset and we'll select P90X, workout sheets dot PDF. Again, with links like this, we can always choose to open it in the same tab, this tab, or we can open it in a new tab. In this case, we'll open it in a new tab. And if we go to the preview and press Resume.
[Sara] Awesome.
[McGuire] That's right, Sara. We have our P90X worksheets complete with military pushups, reverse grip chin-ups and heavy pants.
[Sara] Great design. So, notice the spacing between each of the nav links and the Say Hi button.
[McGuire] So you're talking, the even space, you want even spacing in between... So, if we go to the Style panel here, we can see, we have 20 pixels of padding on the left and right here. Left and right here. But, because that padding is inside this color, you're looking for probably 20 pixels on the left here?
[Sara] So it looks good here. But keep in mind, it's going to affect different breakpoints.
[McGuire] So if we go to Tablet and we open up our Menu button, so let's go here open Menu. We will see actually it looks like something there is red. Let's see what's going on there. It looks like we do have the color red, let's remove that. And let's go to reset. And because we added that margin left of 20, we're seeing that gap. Let's make sure this is zero, which will even that out. And we'll check here on Mobile landscape, Mobile portrait. Looks pretty even and matched here.
[Sara] Okay. So, that's resume. Let's do interactions.
[McGuire] What was...
[Sara] Oh, I did do that.
[McGuire] Did you intend to extend the Z-
[Sara] Again?
[McGuire] Yes.
[Sara] Oh, so there's two notes I have. Let's start with a Lottie interaction on the contact form.
[McGuire] Okay. Contact form. We'll go back to the base breakpoint and go down to the contact. In fact, let's do this in the contact page so everything's neat and organized. And here we are in the form block.
[Sara] So I want to add this to our success message.
[McGuire] So, we'll go over to element settings and go to Success. So normally it will say, "Thank you. Your submission has been received." You want to add a lot of animation here?
[Sara] Yes.
[McGuire] Okay. Where do you want to go for a lot of animation?
[Sara] If you go into Lottiefiles.com.
[McGuire] Lottiefiles.com.
[Sara] And you can see on the search bar there, search for the Lottie animation you want. So for example, success.
[McGuire] Confetti.
[Sara] Let's do success.
[McGuire] Success.
[Sara] All right so, there is a bunch in her. Let's scroll and see which one we like. The one on the bottom left there, it looks great.
[McGuire] So we'll click this. Let's download the Lottie Jason.
[Sara] Great. So let's get it into Webflow.
[McGuire] So back to Webflow, we'll drag our Lottie Jason file from off the screen, then we'll just drop it right in success message.
[Sara] Perfect.
[McGuire] And it's default duration looks like three seconds, if we preview the animation, we can see it's quite large. So, a couple things here. First off, on the success message itself. Do you want it to still have this grey color or do you want a transparent background?
[Sara] Transparent.
[McGuire] Okay. Let's do transparent. And then let's set a limiter on this. So a Lottie animation, let's set a maximum width of 300 pixels. We can set the margin on both sides to auto so that it centers.
[Sara] Can you put it above the text?
[McGuire] Yes. Above the text and let's go to preview so we can see what this looks like.
[Sara] Can you make the size a little bit smaller?
[McGuire] So you want to increase the maximum width to a larger number?
[Sara] No, smaller.
[McGuire] Okay. So, 100.
[Sara] That looks good.
[McGuire] So here it is.
[Sara] Only thing I would note is add some spacing on the top and bottom of that Lottie animation.
[McGuire] So on the top, we already seem to have 20 pixels of padding. So, do you want to add 20 pixels underneath in margin?
[Sara] Looks good.
[McGuire] 20 and preview.
[Sara] Okay. So, that looks good. So, the other thing I wanted to do is to match the interaction on the product page to the homepage.
[McGuire] So, you're saying over in the projects template.
[Sara] If you scroll down, let's do the same glow interaction we did on the homepage.
[McGuire] Okay. We can do that. So let's duplicate our project image. Let's go to duplicate, just like we did in the homepage. We can remove the class from this and use... it was something that ended in effect. There it is. Selected projects effect. And a couple changes we have to make.
[McGuire] The first one we want to do is we want to set this to fill the space available inside this pa. So we want to position it around its parent we'll select full. And the second thing we need to do, because it's absolutely positioned, we need to make sure its parent, the link block is set to relative positioning. Now, whenever we're styling a class that's used on multiple pages, we always want to go back and verify that it's still working as expected on the other page. So let's go back to home. We'll scroll down, go into preview mode and we'll hover over to make sure our glow effect is functioning properly.
[McGuire] And it seems to be functioning properly. So with that in mind, let's go back to our projects template because while we have the element there, the interaction hasn't yet been applied. So we want to apply the interaction when someone hovers into the link block. So we can go over to interactions and this'll be a lot quicker because we've built the interaction before let's go in and add an element trigger. We want this happening when the mouse hovers over the element. So we'll choose mouse hover on hover. We want to start in animation, but we've already created this. We've created selected projects, hover, and I'll have her out. We've just select an existing animation selected projects out. And just like that, we can go to preview mode and see that as we hover over, we see the glow effect come in. And as we hover out, it goes away. Hover in, hover out.
[Sara] Okay. So I have this idea. I would talk about it later then anyway, nicely done. So it's really important that we keep on iterating. Keep on designing in this review. We'll look at spacing. We used flex folks on the collection list to make the link more accessible. We used character units to limit how wide Paragraphs are we added a resume for Megan about pushups, heavy pans and chins. We added some interactions and then you got to listen to me recap everything. Grimur?
[Grimur] How about YOUR design? We’ve seen some incredible posts on #21dayportfolio, but I also want to do a design review on Berkshire Hathaway at some point. Half a trillion market cap, but they’re still rocking Times New Roman. Share YOUR redesign (whether it’s for your portfolio, or even if you redesign ANOTHER company’s site) — I want to see it. Oh my God. I just refreshed — Berkshire Hathaway redesigned their site!
[Sara] Really?
[Grimur] Nope.
