Site build: Secondary homepage sections — The Freelancer’s Journey (Part 36 of 43)


This is the last major video we are going
to do in the site build. Of course, there’s often more work to be
done, and we’ll definitely revisit after getting feedback from Rebecca and her team
and after testing the site enough and of course reflecting on our life choices. That last one is a separate video, hosted
by greemer, which may or may not see the light of day. On the homepage we’ll try out adding some
more detail about their process. We’ll see if we can do the same for their
team member information. We’ll add the contact form, and we’ll
get it optimized, and then we’ll add more contact forms at the bottom of some of our
other pages. Let’s start with the homepage, specifically,
their process. Now, we haven’t spent any significant time
on the homepage since we started designing the other pages. So let’s go and get some inspiration from
another portion of our site. Let’s go to portfolio and see how we did
over here. This looks pretty good, but we are looking
for something a little more applicable to… here we go, let’s grab step section, each
of these steps and what we could do is we could just call it ‘alternating section’
because that’s a little more specific as to what it does and we can pull that for our
homepage. So if we go in and drag a section inside,
we can just grab a section, and we’ll put it in between collection list wrapper and
footer. Our goal here is to get a little bit of a
hint, a little more information, about our process. So we’re hinting at this process here. The goal, of course, is to have a button that
says ‘explore our process’ and clicking that button will take them to our process
page. We want to surface as much summary information
on the homepage as possible. So, let’s use that class ‘alternating
section’. That’s pretty good and we can copy another
one because we are going to use that, just copying and pasting here. We are going to use another one underneath
that for ‘meet our team’. So alternating section, let’s do explore
process, and we can set a background image. We’ll go down to backgrounds, add an image,
choose the image from one we imported earlier. This one right here and we’ll set it to
cover and center. This is a good starting point and we’ll
put a few things. Instead of having it over here to the left
we’ll want to put these things to the right. So let’s get a container for this. We’ll grab a div block and instead of just
placing it in the first cell, well, we can place it in the first cell and just select
manual. Now we can place it into the second cell over
here. In this div block we want to put a few things. We want a heading, so we’ll put, inside
the div block, that heading, this will be an H2. It should say ‘our process’ and we can
use one of our existing headings, we can use secondary heading. Actually, our major heading might work here
too. Let’s try major heading and then darker2,
darker, there we go, and we add the ’s’ to our process and let’s continue. Let’s add a paragraph underneath the major
heading. Let’s put the major heading on top, that
looks pretty good, and then we want a button. We can just grab this button and hold down
option or alt on PC and just drag it into the area we want. Let’s use the navigator to put it specifically
where we want. That’s good. That pink color might not be great here. In fact we could just add a secondary. This will just be a secondary, a combo class,
that let’s modify the original button. Do a black or a gray color. That looks a little bit better. So we have a blurb underneath, this little
paragraph right here, we have a blurb about our process. We have a let’s chat button, let’s make
that ‘explore our process’ and if we go to element settings we can link this, we can
make sure pressing this button takes you to the process page. So under page let’s go to our process. That’s one section down. Let’s move onto meet our team and we’re
going to do the same thing here. Alternating section, let’s grab that, add
a combo class, ‘meet our team’, and we’ll set a background image on this one too. In fact, we might just want to do a color. So let’s remove that and set a color, maybe
a light gray color. Could actually just pull this color from right
here. That looks okay, and what we’ll wanna do
in this is left align the content. Meet our team is going to go to the left. We can actually just copy this div block right
here and paste it inside alternating section. Now all we have to do is change the content. ‘Meet our team’, this is lorem ipsum as
it is, and this can be ‘meet our team’. It’s a little repetitive but it will work
for now. On the right side, let’s try something interesting. Let’s grab a collection list, we’ll go
to the ad panel, and we’ll grab a collection list and we’ll drag it into this area. We’re going to try something odd. Let’s pull the team members in right here
and let’s grab the actual collection list and make it a grid, we’ve done this before,
and show an image of each person. Let’s just show a preview of each individual
that makes this up. Let’s grab an image element and we’ll
put it inside the collection list. Let’s open up collection list, collection
item, we’ll grab that image, put it inside each collection item. Then we’ll get the image, we’ll get each
image, from our team members and that’s looking okay. Let’s go into the collection list and add
another column. That looks better. Let’s name this, right now it’s collection
list 2, let’s call it ‘team member preview’ and there’s something we can do here to
add a little bit more space and that’s increase this gap on both sides. Let’s lock this so we can change both at
once. Let’s try making this 30, or even 60. That’s looking a little better. Could add some padding to all sides. Hold down shift to affect all sides at once
and we’ll do maybe 30 here. That looks pretty good. However it’s interesting, over here we have
30 pixels, over here we have 60 plus 30 so that might not be such a great idea. We could push the padding in from this side
but then we’re losing the alignment there. Maybe the change we want to make isn’t padding. Let’s remove padding from all these sides. Maybe the images are a little big and we can
affect that by editing our grid and instead of 60, maybe making them 90. Not too bad. It’s a little awkward, and the reason it
looks awkward is this wasn’t locked anymore. Now it is, 90 is way too much, let’s go
back to 30. It could be something else that’s looking
awkward. It could be, not the space here, but it could
be the fact that this div block isn’t aligned to the center. So this div block doesn’t have a class right
now. We could say section or page preview since
that is what this is on the homepage. We could do this for both of them but what
we are about to do is only going to affect this one because it has some open space. Select this, set it to flex box, and vertically
stack the content, but center it using justification. So under justify we’ll go here and alignment,
we don’t really want it taking up full width here, we don’t want it expanding, we don’t
want it stretching here so alignment let’s pull that to the left. That looks a lot better. Meet our team, it’s giving you a nice preview
of the people involved right here, meet our team the button is going to take, is going
to take us to, as it says on the screen, our process, so let’s make sure that’s our
design team. That looks a lot better. So on the homepage we’re showing a hero
section with some of their work, more design work that they can explore, we’re talking
about the process, we’re talking about the team. Our process does feel a little bit constrained
this way. So maybe just for this section the combo class
is applied, so this’ll just affect this section, let’s maybe make it 120. That looks a little bit better. Meet our team, this section looks pretty good. Okay, that leaves only two more parts, both
of them involve the contact form so let’s take a look at the contact form. Go to the contact page, the contact us page,
and what we’re going to steal is this form itself. The form block, let’s make sure the form
block is selected, and we could just copy it to the clipboard but something creative
we could do, let’s right click and create a symbol, and call this ‘contact form’. Now it’s a symbol, which means if we use
it on multiple pages, any change to that content inside will affect all pages. So let’s try this, let’s go to the homepage
and instead of creating a new section, let’s go add a symbol and let’s go drag in our
contact form, see what happens. So not too bad, right now this is taking up
full width. That’s okay, but what we might want to do
is put it inside a section, so this section is going to have a contact form inside and
the section itself can be ‘contact form holder’ and we can put some constraints
on this. For instance, we could set the padding on
both sides to 25%. That will mean the content inside will only
take up 50%, because that’s all that’s left, 25% and 25%. That’s okay, one of the things about the
contact form holder right now is that it doesn’t have any padding on the top and bottom. So we could add 30, 40, 50, 60… 60 pixels there. That’s okay but if you notice right there
we accidentally typed it into margin right. Let’s remove that and make sure to apply
it to the padding. So 25% to the padding. Okay, now it’s a little more even, at least
it looks, the boundary, the element boundary, looks like it should. But the section on its own doesn’t really
tell you what to do, it’s just an arbitrary contact form. So we might want to grab some more information
from the contact us page. Let’s grab the hero section here just so
we can copy it and bring it to the homepage and we’ll paste the hero section, we’ll
actually move it right above this, just to reference and we can grab the heading and
put that in the contact form holder, we can grab the hero power graph and put that into
a contact form holder, we can move it above this symbol. Let’s actually go in so we have… Let’s use our navigator so we can be really
specific, we’ll bring the hero power graph up and we’ll bring the heading up. Okay, so now we can delete this reference,
the plain hero section. This is looking a little bit better, we could
center the content in here, like that. But there’s somethings we’ll want to fix
if this is the route we want to go. Let’s try aligning it to the left. Let’s try adding a little bit of a spacer. We used the horizontal divider before, we
can do that again. Just put the div block here, call it ‘horizontal
divider’, that’s okay. This is left aligned, it doesn’t look too
bad left aligned, we might want to keep it this way but it could be worth exploring centering
it so let’s grab a div block, put that inside. We’re going to use a div block to center
the content because we don’t want to select the whole contact form. If we center something with the whole contact
form everything gets affected so instead let’s grab a div block and call it ‘center aligner’. We’re just going to use it as a center aligner
and put each of these elements inside. We’re just going to put the paragraph inside
and then we’ll also put the horizontal divider inside. Again, we can use the navigator here, just
dropping it right in center aligner. So the center aligner has the heading, paragraph,
and the divider and with that we can use flex box. We can vertically stack and we can align center. Now if we want this hero power graph centered
we can just, with the center aligner selected, center the text. Everything looks pretty good now and it looks
better centered than it did left aligned. Plus we have this rhythm, we have right alignment,
we have center alignment here with kinda this, four item grid. Then we have right, left, center. So we’re giving that rhythm of right left,
then we’re breaking it with that contact form. Now we originally made this contact form from
the symbol itself but we might want to reuse this entire thing. So let’s just right click this, we’re
just right clicking the contact form, let’s unlink from the symbol, so it’s no longer
directly tied to the exact layout, the exact structure, the exact content in the other
form. Right now it’s identical and that’s okay
but let’s grab the content form holder and with that selected we can right click and
create a symbol. We can call this ‘contact form section’
and if we’re not going to use the other one let’s clean house, go to symbols, this
contact form has one instance. We can’t delete it without first going to
that page, let’s go to contact us, let’s grab this, right click, unlink. Now we can go into our symbols, remove the
contact forms since it’s not being used, delete, and go back to the homepage. Scroll to the bottom and grab our contact
form section. Copy it to our clipboard, and with that we
can put it on other pages. So let’s go to portfolio, and paste it just
selecting anywhere, paste and we’ll drag it right into here. Now underneath this content we have our contact
form right above the footer. Let’s move from portfolio to our process. Same thing here, another way we can place
this, just go to the ad panel, symbols, contact form section, put it exactly where we want,
that’s it! So we have our steps and we have a contact
our team. This is pretty good, let’s move on to our
design team. Let’s go to the design team page. Same thing here, people may want to get in
touch, so we can go to symbols, we can drag the contact form section right above the footer,
okay that looks pretty good. Continuing, contact us page, we can go to
add the symbol, and we can drag it nowhere because it’s already a contact page. Now if we look at the screen there are some
buttons, for instance in the footer here this button that says let’s chat, it wasn’t
properly linked before. In fact it goes nowhere, we can take it to
the contact page. Now it’s a little odd, we are on the contact
page so this will take you back to the contact page but since it’s a symbol, making that
change affected the footer on every single page. So if we’re home, if we go to preview mode,
and somebody scrolls all the way to the bottom press let’s chat, it takes you to the contact
page. That’s expected behavior. The other thing we might want to do before
we wrap up is go into the nav bar. Select any of these nav links and make sure
they are taking us to the right pages. This should take us home, the portfolio should
take us to the portfolio, our process should take us to our process, our design team should
take us to our design team, contact us should take us to contact us. And you’ll notice that this state, the current
state, we are currently on the home page. Just like if we were to go to the portfolio
page, our current state is shown in blue. We can change that because we are modifying
not just nav link but the current state. Changes on this will affect the current state
on all links that have the nav link class applied. What does that mean? That means we can just change the color. So if it’s the current place we can just
make it black since these are kinda a lighter grey. We could actually make this a lighter grey
so we can easily see what is selected. We could underline it, we could strikethrough
it, but no decoration is okay, and we could also add things like hover effects. So with any of these nav links selected, the
non-current nav links, we could go to hover and make that color black as well so that
on hover they turn black, can even animate that a little bit. We can go to transitions and we’re going
to change font color so let’s do that over 200 milliseconds is okay. So if we go to preview, let’s close out
of this, let’s preview, so we hover over each of them, we get this quick, 200 millisecond
fade that looks okay. Also the homepage itself, these buttons don’t
actually take us anywhere. That’s why it is important to test, and
test again. When we’re ready we can send over a draft
of this to Rebecca so we can get feedback and iterate on the design. But think about it. We took our initial research we did when we
were looking at Hayes Valley on an iPhone, we took our research, and our conversations
with Rebecca, and we didn’t just ask questions. We worked hard to deeply understand their
business and then we made recommendations to their team on ways we could provide value
to them. Is it just a website? Absolutely not, it’s an embodiment on what
their business does, it’s a reflection of their work, their process, the team itself. Those are literally the pages we built. And thing about that. We didn’t just build the homepage, and the
portfolio page, and the process page, or the team page. We built out nine different project pages
that showcase their design work and six different pages to highlight different team members. You want to talk about serving the users story. It might sound repetitive by now, but let’s
read it once again. As a homeowner, I want to see great interior
design work so I can pick this interior design firm with confidence. We didn’t just highlight great work or feature
a couple of pictures. We wrote content that servers and expands
upon that work. Content that walks potential clients through
the process of interior design work. We add trust by talking about who is actually
doing the work. All of this leads to confidence, not just
to the clients, but to Hayes Valley Interior Design. Let’s put ourselves in their shoes, Hayes
Valley. We added value that elevates their business
because now they can show potential clients, and friends, and family and colleagues their
portfolio, all the work they do. Work they’re proud of and that’s building
a full website based on our user story.

2 Replies to “Site build: Secondary homepage sections — The Freelancer’s Journey (Part 36 of 43)”

Leave a Reply

Your email address will not be published. Required fields are marked *