Re-designing a Simple Landing Page

Key Takeaways

[Music] hello Gary Simon of designc course.com today I'm going to do a real quick landing page redesign and this was submitted from one of our the designc course.com members in the Forum and I decided you know what maybe today's video will be about just redesigning this real quickly so the design submitted was not bad at all but I wanted to make just a few adjustments just to show how simple changes can result in a big difference all right so I'm just going to use Photoshop for this real quickly uh check out designc course.com if you haven't yet and subscribe here on YouTube all right so here's the thread that was posted on design course from helge and I posted some uh just some critiques basically uh here's the site or the landing page so those of you who are UNF familiar with what a landing page is so typically you know website has a homepage and it usually consists of the logo and a navigation the content and like a footer and stuff while landing page is slightly different usually it's more simplified it's also known as a squeeze page uh and it's really just a way to minimize the areas that a visitor can exit or bounce off the current page and to and the reason that's important is if you have a specific type of objective like to get people to enter the email in order to win you know a free full license or something of something that you're offering like which is the case at this uh particular scenario then you don't want them to exit be able to click on other links you want them to only focus on the central call to action and that's what this is right here called it action or otherwise you'll see it thrown around sometimes a CTA uh and so basically this is what you would call a landing page so in in terms of design I there's a lot that this person's getting right so it's very simple I you can very you can e re easily read things uh there's a lot of white space which is always good I and it's straight direct to the point so it's very effective in that manner it's also responsive as well which is always a plus as we could see all right so there were a couple other things so if I had to uh say anything negative I'd say that it feel a little bit Bland or dry as I put it um and there's some also other things that could be done um that would just make it better so I'll explain as I go all right so I'm going to screenshot this by Alt print screening and I'm going to go to file new over here hit okay and paste that in and I'm just going to drag a selection um just right around here right around there that'll work just to copy that and then paste that in so I'm going to quickly just recreate this layout using racket rectangle tool to First create this portion right here and I will use the same color just temporarily as that background and I'll move this down and the logo um let's see here the logo that they have I would say it's just too bland they probably were planning on changing I don't know uh but there's nothing really unique about it and I also say it was definitely too big in relation to these SE to the headline so people don't care about the logo generally they care about you know they want to know exactly what is happening on any given web page they land on within the first few seconds so this headline right here needs to be emphasized definitely over anything else uh especially the logo at least all right so what I'll do is just type in Lance billing and like the font size is Tiny for some reason uh I'm just going to make that bigger I'm going to make the logo more like this size and I'm going to use a font called trade Gothic which is a font that I paid for I really liked it um yeah right there would be good and I'm not at 100% this is 100% so get that in there we'll make Lance this color all right so already if we hide these two layers we see Lance bilding goes from that size to this size all right big difference all right so now client billing in invoicing software for Freelancers okay so I'm going to open that page up real quick again on my forms just by go in here design discussion I'm off screen so you can't see this yet so go Lance billing okay all right so what I'm going to do is I bring those back and I'm going to copy that or paste it rather I'm going to use Source Sans Pro and that's a Google font and I use it a lot through my tutorials just because uh those of you who've already followed you know uh you likely already have it installed all right and then I'm going to make this light for the font type okay so another thing that I would definitely suggest changing about this is when it comes to a headline and no this doesn't really have anything to do with design this is more about ad copy and marketing uh but when it comes to a headline you always want to emphasize the benefits over the features all right so client billing and invoicing software for Freelancers that is more like a feature of what Lance billing is or it's just stating what it is it's there's no benefit that is really being portrayed or conveyed through this headline so this would be suitable for like a sub headline but we should emphasize a feature I mean or a benefit rather as the primary headline people this has been studied people respond better to you know how they're going to benefit by using your product uh over the features that are associated with your product if that makes sense so one that I came up with was a quick and easy solution for client invoicing okay and I take this right here make it this blue and that just makes it that's kind of like a feature but it stands out pretty good and we'll increase the size of this considerably and move this down maybe and I'm just kind of eyeballing the centering and you wouldn't really normally just eyeball it like this for a real scenario but I'm just quickly redoing this so I and then also I let's see here yeah I I'm going to zoom out real quick now what I want to do is I want to hide the rest of the background so I'm just going to make this Square section white I don't want to see the other design right now all right so you definitely still want to maintain good wipe space throughout so I'm just moving things around a little bit all right so now another thing that I had mentioned you know it felt a little bit monoch Chrome as I put it uh in the original thread um so if I bring this back here real quick so we can see that I there's not there's hardly no type of design or Texture at all to this which you know is fine but in terms of modern design Trends something that a lot of people have been doing lately a lot of designers and top designers and it looks nice uh is adding some type of texture or adding some type of photograph kind kind of like watermarked in the background so this is something that's being done a lot right now and so I I went to Deviant Art and I tried to find like something that would be suitable for client invoicing and I wasn't able to find it but I did so I just found something random and silly um so I I found this picture just to show you how you can do this with a photograph obviously I wouldn't recommend he use this but uh just to show you how you use it um create a new layer and make it a clipping m just like that contrl +v to paste that sucker in and I'm going to that sucker oh man pun not intended so we'll go ahead images adjustments and desaturate I and then we'll go over here to the layer blend modes and make sure it's selected you have this blue outline user down arrow key and you can just kind of experiment with the different layer blend modes to see how that works this one works pretty well and so I'm going to take the opacity down just a bit and maybe make this background color a little bit darker maybe right around there all right that way you get some type of you know it's not a flat uh it doesn't stick out to the point at which it clashes with the copy which is very important that it doesn't because you want people to be able to read what you got going on uh and so and also if it were a relevant image you know it would really just give some type of uh or design basically to to the whatever you're trying to do so now I'm going to put in here uh the portion where we have the uh text field for the email submit and I'm just using a rounded rectangle and in here I'll type in email address and once again has to be a pain in the ass and make it really tiny and I'll move this over here and just get a gray color around there and if you want to uh widen your Fields right here you know what I'm going to go to view and hide the where is it at oh it's such a pain in the ass I'm being slow right now getting rid of that pixel grid thing all right so now I take this and scale it down move that over okay and then have the call to action over here so I'm just going to duplicate that and the call to action button copy I'm going to change from notify me that's what he had to get a free copy and I'll explain that in a second and we'll make this white this right here this color we'll move it over right around there uh yeah I'm going to push that over just a bit move this over take this guy right here and widen it a little bit there we go all right so for his call to action button copy we see that he has notify me which isn't bad it's better than click here or submit uh but right here he has 10 first signups will'll get a free full license it's kind of wordy in my opinion uh but what I decided to do to in order to simplify things is quickly make the form stand out a little bit more so if I hide everything we can see here so the form's kind of buried a little bit down there and also get rid of this P portion right there or at least move it down a little bit so real quickly I'm going to contrl T that layer and drag that down uh that way this is more of like a focal uh the center focal point I guess you could say uh because I didn't want to line a text up here so what I decided to do instead was to add something down here and that is be one of the first 10 signups to get a free copy just like that and make it a font size more like 18 or something like that all right so now zoom out a little bit you can see there's a pretty good Improvement and I'm going to go to image canvas size and make this a little bit uh taller so height we'll push this down and we'll use more like 900 and I actually had no problem with kind of how he was doing the um the feature or there's some content down here basically uh so if I bring back that yeah there it is if I just take that copy that oops Yeah is it right here just want to copy this actually I'm being slow I'm just going to move it down like this with a select tool there we go something like that all right and then basically something like this kind of keeping what he had before so now what we can see is we're going from this here to this you know what I don't like that one second I want to be able to show these side by side so let me take all this stuff here group them all right so basically we're going from this right here and like I said it's not bad to this which really just feels a little bit more modern and I definitely think I would even make this bigger as well and I think definitely you know based on my own experiment experience with design and split testing this would likely convert better definitely um but again always split test don't make assumptions and for those of you who don't know what split testing is go to Google and type it in it's basically a way to determine two variations you know which variation is a winner based on a split testing service Google has one Google analytics it's free uh there's several paid versions and they're really cool you can basically just upload two variations of a site so like you'd have index a a be this one the original or the Baseline copy and then index B could be something like this and then you would send traffic to it and the split testing service would randomly you know it alter between showing one visitor this one and the other Vis visitor the other one and then it would uh determine based on whatever your goal was set as like you know whatever page leads to a successful email entry um you know it it will tell you through statistical significance which one is more effective so I would definitely say in terms of uh design and just experience uh past experience that this would definitely be a better uh result likely all right so yeah just a quick uh tutorial by 15 minutes here um so I do this sort of thing uh for with one-on-one training uh through design cores premium with which I just launched recently here and so design course premium is right here and I'm I'm launching with these three products here Mentor which is one-on-one design training viid which is visual Identity Design course it's basically 22 I think different lesson videos that show you how to design an entire brand identity visual identity for a company which includes things like logo design color schemes Etc and then wise banner.com I that's also my product and you get that for free as well oh not for free but for the actual membership the first month membership you get that so another thing that I wanted to address just at the end of this video is uh you know after launching some people had mentioned you know it's too expensive you know the $49.95 or if you use a promo code that I have right now it's $39.95 a month that sounds a lot if it has to be every month but you can cancel anytime you want so if you wanted to order and then just cancel you can cancel uh after that you get that first 30 days and the thing is if you use this one-on-one design training I'll be able to help you big time to the point you know within a single month you probably be able to really improve your skills if you were dedicated and and really worked at it and so having my direction hopefully would help I know I don't say hopefully it definitely would help you be able to be be able to charge more so you know for the cost of a couple outings to like Applebee's or something uh versus gaining a lot of knowledge uh and and good tips in terms of how you can better yourself as a designer so you can charge more it's a no-brainer obviously so all right that's enough of me trying to sell my stuff all right so uh check out designc course.com subscribe here on YouTube if you haven't and I will see you tomorrow [Music] goodbye