So, we’ve built out the majority of our homepage.
Remember, you can clone each step of this project at any time to see exactly how we built it.
But for this lesson, we want to cover the most critical part of any portfolio, which is
a clear call to action, a CTA. And right now, while people can see what our UX
Designer here, what Megan has done, there’s no way to actually get in touch. And
when it comes to developing a strong CTA, we find it helpful to follow a
pattern based on the user’s story. As a person, I want to learn or do something
so that I can achieve a specific goal. For a UX Designer like Megan, her ideal person, a user
visiting her portfolio might be a business owner or product manager. And what they want to learn or
do could be different depending on the motivation, the intention of Megan’s potential clients. Maybe
they want to learn about her process, maybe they want to get a price range, or maybe they just want
to validate her experience, or explore the quality of her work. And the reason they want to do all
those things, the action we want them to perform, is to hire Megan as a UX Designer. And this is
what Sara’s design does extraordinarily well. So, what’s the call to action? If they’re
visiting this portfolio we want our information architecture, all the content on the site, we want
it all set up in such a way that it makes it clear what she does — [Sara] Above the fold, right in the heroes section. [McGuire] We wanted to show them the quality of her work -- [Sara] The hero image in the collection list. [McGuire] And of course, we want to make it really clear how to get in touch. [Sara] We didn’t build that yet. [McGuire] That’s right. And that’s our
motivation behind designing and building a contact form. It’s not just a checkbox in web
design that we happen to do because others do it. It’s a carefully thought-out decision that's based
on Megan’s potential clients. It specifically designed to help them validate Megan’s work and
to reach out to hire her. That’s the goal. So, we’ll do this by adding a form block, we’ll do a
configuration of our form, and then we’ll style it to be consistent with Sara’s design. [Sara] Um, I’m not Megan. [McGuire] We know.
[Sara] I know you know. [McGuire] Then what’s wrong?
[Sara] It’s just, Grimur’s unsure. [Grimur] I don't even... Who's the designer?
And finally, just like we did for our navigation, we’ll make the form a symbol. That way we
can use it on different pages throughout the project. So let’s add our form block. We
have two sections, we have our top, our heroes section of course, we have our second section,
this is the one that has the collection list with all the client projects inside. Let’s add a
third section. We’ll just drag in a third section underneath the other sections, and we’ll apply our
section class. We’ve created a section class. So, let’s do that. So we have our padding, sixty on
the top, sixty on the bottom. And let’s drag in our container. That’s the second part that
keeps everything neatly organized. Of course, we’ve made a very specific container class called
container. And once that’s added, we can add the form block inside. Let’s drag the form block into
the container itself. And that’s it. Cut to black. So, by default we have two items in here.
We have a name, and an email address, we want to add another field. Let’s go ahead and
add a third field. Let’s do a text area, so we can add a message for Megan. And let’s close that out
for now, and we’ll add a field label. We’ll add a form field label. We’ll put that above. So we have
three things here. Let’s make this one message. Email address is fine. And let’s go ahead and
create classes. Again, classes are automatically created when we make a style change on something.
So if, for instance, we make this all caps, and we decrease or increase the letter spacing
and decrease the font size a little bit, it’s already created this class for us called
field label. So we’ll just go over here, and we’ll add field label. Over here, even
faster, just hit Command Enter, or Control Enter on Windows, and we can just type field label.
There it is. And of course, now that we’ve made each of those classes, we’ve applied each of those
classes, we can change any one of them and all are affected. Maybe eleven looks pretty good. Okay.
So, a couple things with our form. Let’s select our entire form block and let’s start
changing some colors here. We can change the text color to black. Of course we can’t
see anything right now, so let’s change our background color to a lighter color, let’s do
kind of a light grey color here. And let’s also, on the form block itself, let’s add some padding.
Let’s do thirty pixels on all sides. And let’s also add a heading. Let’s add a heading into
our form block. We can put it right up here. And we’ll call this, Let’s work together. Now,
we already created a style. All the way up here we created a style for secondary heading. Let’s
apply that down here. Notice how this secondary heading is a white color. Our default, if we see
where that white color is being inherited from, press color, it’s coming from the body (all
pages) tag. So, what that means is we can go here, and apply secondary heading. And notice how
it’s pulling that color from the form block. Let’s add one more thing, which is going to
be a paragraph underneath that. Let’s go to paragraph, let’s drag in a paragraph underneath
that heading, and let’s look up here, see if we have any styles that match what we want to use
here. We do have a lower opacity paragraph, probably not. Let’s go ahead and create
a lower opacity with the darker color. And let’s take a look at our contrast ratio,
anything up here is going to be double A, triple A, if we go up to let’s see, seven point
one nine. That looks pretty good. Let’s call this, dark paragraph. And let’s add some
more spacing underneath, thirty pixels. And if we want these to be side-by-side we can
drag in a grid. So let’s drag in a grid element right here. And let’s delete this second row that
comes with this. So we have a side-by-side design. Let’s press Done. And we’ll use a div block for
this. Let’s grab a div block, and we can drag it anywhere we want. Let’s put it inside that new
grid. And the div block is going to hold each of these items. So we want the div block to hold
the name. So let’s click and drag name into that div block. And we want that text field also in
that div block underneath the field label. So, these two are in one block, that’s taking up the
first cell. We want one more block. So let’s grab another div block, grab a div block, in our grid,
let’s put it next to it. In fact we want this one first. So let’s grab our email address, drag
it into the div block, and let’s grab that text field, and drag it into that div block. So, what
is our structure? We have a grid, with two cells inside. In cell one we have a div block with the
name, and the name field. The second one we have the email address, and the corresponding
field to that. Message is staying outside, that’s looking pretty good. Finally the last
thing we want to do here is make the submit button stay on the right side. Just like we used flex
box up here in the project details div block, we can do the same thing down here. In fact,
with the form element selected, we can make that flex box. And when we do, everything is kind
of messed up here. We want to make it vertical, and then we can take that Submit button and
override. We can override it’s full width default. We can go to alignment and order, and we can just
set it to go to the end right there. And maybe we want to change the background color, we can set
it to #657C3. And, so we can reuse that color in other elements, other styles, let’s call that it
the main brand color. And we’ll create a swatch, that’s reusable all throughout the project.
And we’ll add some rounding, maybe a radius of five pixels. If we want to push it off
from the top here, we can add a little bit of margin on the top. Let’s do fifteen pixels
on the top. And that’s looking pretty good. Now, for our final step, let’s select our form
block and we’ll go ahead and make it a symbol. This time we’ll right-click on the label on the
canvas, and we’ll go down and create a symbol. We’ll call it contact form. So, we added our
contact form, we configured the fields, we got everything styled, and we just made the form a
symbol so we can reuse it on other pages later. Up next, we’ll build out the final homepage section,
the footer, and after that we’ll wrap up our work on the homepage by making everything responsive.
[Grimur] Wow, guys. That was a really good one. Sorry I can't be in the studio today.
It's date night. And I'm cooking. Anyway, I wanted to say two things. One, #21dayportfolio.
Seeing some great stuff being shared. I want to see your best contact forms. And the second thing:
Annamaria Ward, I cannot even believe it. Way to go. I can't wait to see more. Anyway. [Fire alarm
beeping] I gotta go. Oh my. This is embarrassing.
