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.
