2.2 Create the Main Content Container
Continue your mock-up design by creating the main content container design.
1.Introduction4 lessons, 14:32
2.Creating a Mock-Up in Adobe Photoshop5 lessons, 39:54
3.Building the Interactive Prototype With InVision5 lessons, 46:22
4.Sharing and Gathering Design Feedback4 lessons, 26:57
5.Conclusion1 lesson, 01:41
2.2 Create the Main Content Container
Hi everyone. Welcome back. We're gonna continue working on our user interface design for this landing page. In the last lesson, we dropped in the background, did a few tweaks to it to get it ready. Now we're gonna drop in some key components on top of it, specifically the logo, the main container and the footer content for this landing page. So let's get started. I am going to create a new group here. And this is going to be called Form Unfilled. And you'll see why we're doing this moving forward, but for now, we're going to build all the form components for this landing page, primarily in here. And then we can move things around after that. So let's get started. Now again, you're gonna see a crossover from my print courses, where I work from the back forward. I'm also gonna work from the top down. It just keeps things a little bit smoother, a little bit easier to know exactly where things are gonna go. So that means that we're going to start with the logo placement. And then I'm going to go ahead to our assets here. And I have two logos, I have an icon and then I have the full logo. Well, I actually want the full logo here for the top. And then we're gonna use the icon for the bottom. This way, it's the first thing that you see obviously for any business or whatever any website that you're doing. You really wanna see that logo first. So that's why we're gonna start with the full version. You can see that I have EPS files here. This is the best logo version that you can get from a client to work on, is in EPS. You can color it and you can size it to whatever you need for your project. If you have a JPEG, it's gonna be a lot harder because you're gonna end up having a background that you have to deal with. PNG files are okay as well for this. Usually PNG files don't have a background, so you have a little bit more flexibility. But if you can get an EPS, that is the best way to go. We're gonna click and drag this right into our Photoshop document. It looks really small, so we're gonna hit Shift and click and drag these until we get a better fit here. And then we're gonna just click and kind of position this right around the top but not all the way to the top. We don't want it here, we want to create kind of a cool look down the center here. And then we just sort of visually center that up. We get something like this. So that's creating a very cool pop for that logo. Let's go ahead and make that pop even more by creating a drop shadow. I'm not a super fan of drop shadows, but when it comes to making them items come off of the background, drop shadows work really nicely. So we are going to take the opacity down to 49%. Move up this distance just so it's a subtle drop shadow. I don't want it to be over the top. One thing that I always like to do is grab a color from the image. So let's grab a dark color here. You don't see a huge effect with this, but it's very nice to take a drop shadow from a color in your image versus just going with straight black by default. You can see that we picked up a navy color here from this shadow over here. And in reality, black does not exist in shadows. Shadows are made up mostly of dark blues, as solid black does not exist in nature. That's why this gives it a little bit more of a natural feel, if you care to know that little bit of trivia. So there we have it. Now we have a nice pop here. You can see that, when we turn this on and off, for the drop shadow, it really does help. It's not crucial to have it, but it's a neat, little effect that really does make that logo pop off. So let's continue on here. We're going to take and draw the container for our form. If you notice that you're not building this right in the folder that we created you can go ahead and drag that down in there. And then just make sure that's selected in. Chances are you'll be working from that folder, not a big deal. All right, so we're gonna come over here and we are going to drag out a rectangle. So we need the box tool. We wanna go ahead and fill it with white. We don't need a stroke on this box, we just want a plain white box. This is where the form is going to live. We have a couple different things that we're gonna do for this form, so we're gonna start with just a white box. And then we are going to click and drag this out. And something like this and move this up somewhere around there. We may adjust this if needed, but for now, we're gonna drop this in there. I'm gonna close that out. All right. And then again we're gonna center that up. And the one thing I noticed is that the logo is a little large, so I'm gonna hit Cmd or Ctrl+T. And we're just going to shrink that down slightly just so it's not so overbearing. And then holding down Shift, we're going to click the rectangle we just created. We're just gonna center that up for us so we don't have to eyeball it anymore. Makes it a little bit nicer. Okay, so then we have something like this. Now, right away we wanna go ahead and name this Form Container. Get in the habit of naming your items, if at all possible. And if you have any idea that you're gonna save these out as images later, instead of doing it the way I just did it, think in terms of web-friendly naming and that means that you have a dash instead of a space. So we're gonna say form-container, you'll thank me for that later when we actually generate our assets by thinking of this upfront. So now we have our container. The next thing that we're going to do is we're gong to draw out our header for this container. And again, just take a rectangle. If you need to, if you're not good at eyeballing, go ahead and zoom in. And then we're gonna drag this out somewhere like this. And the wonderful thing about the latest version of Photoshop is these guides that pop up to help us place items. It is such a cool thing. And then, I actually wanna make this like a dark, dark gray. Somewhere along those lines. Okay? So we get that. Now, why did I decide to go with gray? Well, because gray is a huge part of this photo and it really matches. That is so crucial. Again, print design does go into web design a little bit, where you are picking out your colors from the images. This is something I do all the time for web and print, and it really makes your color pallet merge together and look really awesome when you pull colors from your primary images. Okay, and so this is our form header. So that's what we're going to call it. And then from there, we're gonna leave the form alone for now because we're gonna fill that in, in the next lesson. We're just dropping in the container elements. So now we have the wonderful footer down here. Again, I'm gonna zoom in just so that it's a little bit easier to see. And that way you don't have to squint so much at the screen. All right? So what are we gonna do with the footer? Well, we have four elements as icons and then we have just footer information. So let's go ahead and go back to our assets here. This is where our icon comes in. We're gonna drop that in first into our document, and then it's rather large, so holding down Shift and grabbing the right corner, we're just going to scale this down a little bit. We get something like that. Again, you can always size this differently. Once you drop it in, that just gets us started. And then we go back to our assets, and then we have three icons here that are gonna have some interactivity later on. We have a phone for calling, a clapboard for video, and an email for email. So the first thing we're gonna drag in is the clapboard. And we don't need to resize these, these are sized exactly the way we want, so I'm just going to drop them all individually into our document. And you can see again, these guides are wonderful for placing. And I'm just hitting Ctrl+Tab to bring up my Finder so that I can get back to it easily. And then our phone is the last one. Just click and drag that in. And again, use those guides. It helps with the spacing so that it's identical without much work. It's so cool, it just saves a lot of time. And you can see that because the EPS file was named appropriately, we don't really need to do any naming aside from that if you don't need to. So, this just helps us for naming later on. And then I'm gonna go and center this up. And then I'm gonna hold down Shift again and just click all of these, zooming out real quick so I can get the whole picture. Just wanna position that so it's a little bit better, little more centered. All right, and so then the final information that we have is the footer information at the bottom. And we're gonna hit T to grab our text tool, just draw out a text box. We're not too worried about placement just yet. Type out our information, if you can't see it because the text is huge, go ahead and alter that to about a 14 point text. And we're gonna pick a very basic font here, that I know is part of Google Fonts if we need that later on. So I'm going to grab the Open Sans Semi Bold version of this, all right? So we have 2014 Acme Co. Down below that, we're gonna type out the contact information. Can't tell you how important it is to have contact information on any website that you are creating. It is so frustrating for customers not to be able to find that. So it's important to go ahead and include that, even in a mobile app. And then we are going to take and make that text regular and smaller. That way, we highlight the copyright information and the website information. But we can take the other information, the street address down a little bit. All right. So we get something like this. And now if I zoom out to full preview, we can see here that we need to adjust a little bit again. Just holding down Shift and selecting all of these. I'm gonna move this up a little bit, and then I'm gonna take and move everything else up as well, just so we get a little bit more room at the bottom. We don't need things to be so tight. Okay. And so we have that. Now it's really important that you save your hard work. So let's go to FIle > Save As, and I already have mobile mock-up here. And I always save my files as TIFF, not a PSD, because in the print world, it really helps to have a TIFF file that can be opened in any version of Photoshop. PSDs are, while they work to have ultimate compatibility, it's not always the case. So a TIFF is going to allow for ultimate compatibility between Photoshops and I've never had a problem. So I usually save this as the TIFF, loss less so we don't lose the quality and go ahead and Save, OK. All right, coming up, we are going to continue working on the form fields and the styling of the form in the next lesson.