How to Design an Agency Landing Page (Week 1 of 12)

How to Design an Agency Landing Page (Week 1 of 12)



what up guys my name is McKenzie and this is the first week in a design and front-end challenge so how this series is going to work is a one week I am going to design a UI and then the next week I'm going to code that UI and I'm going to be doing it six different times over the span of 12 weeks so it's my at twelve and twelve or six and twelve challenge whatever you want to call it but today I am going to be designing an agency website so let's jump over to the computer and get going alright before we jump into Photoshop I just want to share what I'm thinking for this design so overall this is going to be a fairly simple design but I sketched up what I'm thinking so up top we're going to have a banner with the title subtitle and called actions below that we are going to have three different boxes showing the various types of services we offer as an agency then below that there'd be a section for the past work and possibly some client logos to just add an extra level of trust and show who we worked with in the past and then finally at the bottom there would be a final called action and a button to contact us so let's jump in get going we'll turn this into a beautiful UI designer alright so let's open up a new document and call this agency design and make it 1600 by 3000 pixels 72 pixels per inch and the RGB color and then the background contents white all right so I'm just going to hit that and the first thing I want to do is set up some guides so I'm going to use the guide guide extension and let's see so this is 1600 pixels wide I want the actual design to be 1440 so unless my math is wrong that would mean I have margin of 80 pixels on either side so let's add 80 pixels let's make this a three column grid and let's make the gutters be let's say 30 pixels let's add guides alright that gives us something to work with alright so up top I said I want a banner with a full bleed background image so I've already gone to unsplash.com and picked out several images I can work with so I'm going to go through those and pick out my favorite so these were all the ones I selected they're all pretty similar they all have a desk a workstation etc which is kind of cliche but honestly I would love to take a custom photo but in this case I'm just working with what I got I really love this one because there's a lot of negative space which would be perfect to place text over so so far this one is my favorite I like this one too but it's a little bit busy this one's good too but I kind of think between this one and this one I'm preferring the darker one so let's uh give this a try alright so what I am going to do is let's Center that and I'm going to create a shape grab the rectangle tool let's a select a dark bluish grey color something like X code 3 F 3 d 4 F alright and let's create a shape see I don't want the entire image to show through so what I'm going to do is put that behind there and use it as a mask that looks pretty good and also I'm not quite liking this color because if we put text on top let me just show you some text let's select it as white and let's make it bold so what I'm thinking is I want this to be whoops a slightly more bluish gray color so I'm going to drop the opacity of the actual image so that the shape behind it shows through a bit and then that way the legibility of the text on top will be a bit easier to read all right so this is good so as for the font I am going to use Brandon grotesque bold as well as regular for this design Brandon grotesque is by far one of my favorite fonts I absolutely love it all right so let's add a title so I'm going to say we create two full products and this seems a bit large so let's scale that down a bit something like that would work alright and let me bring up the guides again going to add a midpoint guide just so I can see where the absolute center is and let's Center that perfect alright and then below that lets add a subtitle for this I'm going to go to Chrome and go to hips um CO and just grab some hipster ipsum filler text and let's change this to regular and shrink it down quite a bit so I'm like that looks pretty good the letting is a bit off so let's bump that up perfect alright and now let's make those buttons so let's grab a rounded corner and I'll just say let's make a 200 pixel wide and a 50 pixel high and let's try a let's do a 30 oops where did that go okay so here's the shape we created so we have this bluish grey background let's pick a color that would pop for the call-to-action I am thinking a greenish color something like that would look good maybe some a little bit lighter that it's perfect I love that okay so I'm going to make this button a bit bigger bump up the border radius a bit more then let's put some text over top a bit and say learn more and we will make this bold and then it should probably be a bit smaller give some padding in there let it breathe okay so that is one button that looks good actually even that's a little large so let's shrink both the text and the button and then let's select both duplicate it and since this second button whoops let's Center both of those there we go since the second button is to play a video I'm thinking it doesn't need to be as important visually so the color can be far different so let's make it white but what I'm thinking is we'll drop the opacity that way the focus is still on the learn more and then I will say play video let's create going to open up illustrator and create a quick play button for this and so all we need is three points boom boom this let's extend it out a bit more right maybe even a bit more than that all right and then let's select each and bring in the borders make them bit rounder alright and let's get rid of that let's keep it white and tab over perfect that's probably a bit too large last bit better and let's Center all of that looks good okay so what I'm going to do is select the background and lock those that way you can select all these layers and Center it vertically all right let's create a quick logo whoops what I'm going to do is just create a simple text logo let's call this like super mega awesome or something like that and just to make it not so boring let's make this regular then we'll make it right justified and shrink it down quite a bit that looks pretty cool super mega awesome design agency all right and let's also create a navigation so I'm going to go over to the very edge of the guide and then let's see we would want a home button I put 10 spaces between that and let's add a portfolio I'm going to copy that as well as the space and let's do services as well I don't think this should be nearly as big or bold yeah I don't actually I like the bold so let's keep that but I shrink down the size a bit make sure it's lined up with the logo perfect and then let's duplicate this because I want to add a get in touch button and then let's see for the background let's do the same as the play button so it's not super in-your-face and we'll shrink it down a bit too which makes sure it's centered that looks good cool actually it's not quite centered that looks good okay so let's go back to illustrator I want to let's change color this just so we can see it I just want to create a couple arrows pointing down so I'm holding shift while I select these points and then I'm going to add a stroke it select it let's bump up the stroke bit and let's add the cap and rounded corner and then let's also try something like that and let's change color to white and then we'll drag it over to photoshop so wheat when you bring up the guides Center that and then I'm going to position this halfway between the learn more button and the edge then let's drop the opacity so it's not taking up any visual importance because it's really nice to have we don't need it very much at all so let's take a look that looks pretty good except I feel like it should be bumped up a bit more and then this should be a bit lower all right that looks pretty good so I'm going to select all of these group that into Boehner alright so the next section we have three boxes so what I'm thinking is I'm going to select the rectangle tool create a background color I don't want that dark color I'm thinking maybe something like soup or like with a bluish tint to it almost white but not quite that looks good and then I want a rounded corner tool I was thinking we would do three boxes let me bring up the all right so that's way too much rounded crown so I get like seven pixels and we can make it a bit taller and a bit wider let's make it fill the center column all right so the reason I'm doing this is because I'm going to make it white and then I'm going to add a drop shadow to make it pop out a bit more so let's see maybe make it a bit lighter that looks pretty good so possibly is at 25 distance and spread it at zero and size is at 57 and then it's on a blend mode of multiple or multiply and a black color all right that looks pretty good so now let's create one for each column all right so whoops let's uh bump these up a bit more so the reason I'm overlapping these is just to make it have a bit more depth and also because the concept of above-the-fold doesn't really exist anymore since there's so many devices cutter made sense when there was only like a few different sizes and there was a mobile devices and all that so I don't I personally don't really believe but still the majority people have a 13:30 by 768 I believe so 768 pixels would be about right here so what I'm thinking is let's out a guide – right there the majority of people will see all of this when they land on the page so what I want to do is unlock this layer let's bring it down a bit more so it shows a bit more of the image oh okay and then now let's bring down the shape on top of it all right that looks good all right so I'm going to lock those so like I said before the reason I want this is so that people will see that there's more below so they know to scroll while I'm putting the arrows here as well all right so we have the three boxes let's add some text so I'm going to create a center let's look that bluish dark bluish gray color again actually I know it that was the color of the banner there we go okay so let's see the services we would offer let's do branding as one let's shrink the size down because we don't want it to compete with what's up here and then I'm going to copy that let's bring it above everything and let's make it that same color but a bit lighter so there's some visual hierarchy between the title and the subtitle alright that looks pretty good let's shrink down the text a bit and there we go maybe you shouldn't get a bit more so I'm going to select all those and Center it looks like it's centered alright then let's add a learn more button to these as well because what I'm thinking is there would be a page specifically for each service that explains more in depth about that service so let's uh let's make these a bit bigger so there's more room to breathe then let's make this slightly smaller this doesn't need quite as much letting let's make it a bit tighter and let's make the branding title and subtitle slightly smaller that looks pretty good I'm going to lock that layer select all those Center it perfect alright now let's duplicate those twice another service we could offer would be UI / UX design and then one more maybe brand research or something like that actually let's say something like development alright that looks pretty cool to me all right so let's move on to well first let's that group each one of these individually say call out one to call out three and then I will group all these groups into services and then let's put the background at the bottom of the services perfect all right this is looking good let's move on to the past clients section let's do past or previous work great new folder to put everything in so what I'm thinking here is let's create a shape with the the dark gray something like so and then let's select the title alright so this should be slightly smaller because if you think about the page this should be the h1 the main headline and then everything else should be h2 so it shouldn't be as big in my opinion so for this I'm going to say our work and then I did grab some logo so let me grab those what I'm going to do is grab like Netflix let's do Amazon and maybe Samsung and WordPress okay let's just do all these open them up in Illustrator except Instagram did not open in Illustrator there we go okay so what I'm going to do is just copy each of these over so Instagram is huge let's shrink that down so this is show some previous clients just to instill some trust and show that the big names have worked with us and maybe the potential client would want to work with us too all right so I'm going to let's see let's that use WordPress all right so obviously this looks absolutely terrible so what we will do is make them all a similar color so it's at a color overlay and let's make it slightly above the blueish gray color just make it slightly lighter that looks pretty good so let's select that and I'm going to hold option and drag the effect on to all the other logos perfect now let's select all those make sure they're centered Amazon needs to go a bit down just because the intro messes things up a bit perfect that looks pretty good they are a bit large it's competing a bit with the title of this section so we'll shrink that down all right so let's copy this and we'll use this as a mask for this section so our main one I want it to be a bit bigger than the centre column so it's going to run over into the other columns let's see I'm going to grab some of my work from my daily design series let's do the eeee I'm just going to grab my favorites the Amazon redesign that was one of my favorites all right so let's shrink that down there we go so now I'm going to hold option and then click between the Amazon redesign layer and the rounded corner and now will act as a mask perfect let's select both those layers and make it slightly larger all right that looks good so let's copy that rounded corner and shrink it down make sure it stays within the column let's see I also really liked the Netflix 1 where's Netflix here we go Netflix redesign and hold shift and scale it down perfect and I'm going to copy the Netflix bring it over to this side and let's delete that let's see let's get the WordPress admin redesign to you and I'll scale that down and apply the mask perfect okay so now what I want to do is I don't want this extending past it so I'm going to select all of these group them together and call this past work I'll call it work examples all right and then I want to select this background layer hit command and click on it to bring up the marquee and then I'm going to go to that group and apply a mask to it perfect let's add a few circles to represent the slider so for the main one I'm going to select the green color and then let's create two more make sure they're equally apart and let's do the same color as the logos actually no I feel like the logos are slightly too dark so let's Center these and then do it vertically between the logos and the first work example all right then let's go to Instagram let's make these a bit lighter that that looks good so it's a brighter than this button but it's not as bright as the artwork title so I'm going to do that and then apply the same to WordPress Netflix Google Apple and Amazon perfect so this is looking good I want to do something right here so on this call-out section I think I want I want something that guides your eye down to the past work so basically to represent that branding or our branding work UI and UX design and development and guide your eye down to show the past work that represents all of those services so let's grab the rectangle tool and do something like this so it should be not quite as dark let's make it slightly darker than this so we don't want this like in-your-face but it will add a nice touch in my opinion at least I think let's give it a try perfect and let's create one more turn it horizontal and then we will extend it to this far one perfect now let's add this Center one make it go all the way down alright so the only issue with that is it's not quite centered there we go that looks pretty good I think that might be too dark still let me merge those shapes drop the opacity slightly there we go that's looking good so now we have branding ui/ux and development and then all those services flow into our work section yeah I'm digging that cool so the last section let me close out these let me slips background color let me lock that I'm going to select the logos put on a group and then circles and I'll call this a slider navigation all right cool now the final section would be the final called action and that is going to be pretty simple kind of the same as the top so I'm going to select the top title subtitle and the button and then let's just hold option and click and drag those to duplicate them all right then let's drag that up and out alright what I'm going to do is lock the other groups alright let's drag that up and out okay so let's change the color let's make it that perfect the dark gray let's also make this the dark rape but this should probably be something lighter perfect alright then let's just say get in touch if I could type today so this is far too large let's make it match the same pixels as let's see fifty nine point five seven fifty nine pixels much better alright then let's make sure all these are centered then I want a big call to action so let's make this button pretty large let's make it a full column width and then let's bump up the border radius so it's a full half circle and then let's say contact us hmm I was far too large I pledge to shrink that down a bit that's much better okay I'm not liking this transition between Amazon and the background of the call-to-action so let's create a new shape and let's make it crabbed rectangle create a new background color shape and let's make it match that first section cool and then let's select everything – the background Center it vertically perfect then last thing I want to do is add a copy right so let's do copyright 2016 Kinsey child / super mega awesome alright and let's change that to a bold and let's make that fairly small and then let's make this act as a link and then we'll make that green and let's crop it all right then I just need to group this last section as a final CTA and let's take a look at what we've done this looks pretty good to me so when they land on this they would see everything from the Baner everything inside the banner they scroll down they would see branding ui/ux design and development then there I would flow to the artwork section and then after that there is one final called action to get in touch so at the brand that super mega awesome brand can help whoever whatever potential client with their design problems alright so this is looking good alright guys that is all for this episode if you're interested in picking up the PSD the source file go to this link right here and you can download that for free and be sure to come back here next week when I go ahead and code this design alright see you guys

Related Posts

What is a Follow-Through Day? | Identifying Market Bottoms

What is a Follow-Through Day? | Identifying Market Bottoms

Hi everyone, this is Nick from TraderLion. We just wanted to put together a short video on follow-through days to
Marketing for Coaches (2019) – Nail these 3 things to get coaching clients FAST

Marketing for Coaches (2019) – Nail these 3 things to get coaching clients FAST

Listen, if you're a coach and you're trying to market yourself online, there is no shortage of people who want

30 Replies to “How to Design an Agency Landing Page (Week 1 of 12)”

  1. What happened to you man? These were my finest tutorials while I learned to code… Please, come back!!

  2. doing all this using only css is much better to load the page faster x10 or more , no need for photoshop unless u want to see it first how its gonna look like before you apply it

  3. Winner of a video, I have been researching "бесплатный landing page" for a while now, and I think this has helped. Have you ever come across – Wanmila Splendid Simplification – (Have a quick look on google cant remember the place now ) ? Ive heard some extraordinary things about it and my mate got great success with it.

  4. awesome tutorial! very straightforward. I had a problem trying to download the guide guide extension. I am very new to photoshop, do you have any suggestions to set the guides manually? Thanks!

  5. so how does this work, this all translates to html and css? those are translated to html buttons I can write event handlers on? I've never done a template using photoshop before. Is this just a picture thats static or is it responsive?

  6. Such a great tutorial! I dropped PS for Sketch because I thought it was a pain but you make it look so easy!
    Btw, are you using Sketch App sometimes? Of so, any plan on making tutos using that?

  7. one Question I if you can tell how did you mask that image using shape I am using Photoshop in windows ?

  8. I just want to ask a very simple question I am using photoshop 2015 and I have searched thoroughly and I Am not able to find this guide system that you are using. please if you can tell me

Leave a Reply

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