[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— 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 project 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 project 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 project 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
project 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 project
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 project 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 project 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.
