Landing page design – layout and best practice walkthrough

Transcribed from video:

Hey guys! How are things going?  This is Charlie here from Hutchinson Web Design.

What we are going to today is take a look at a landing page design that we recently designed for a voucher download for the pub, UK pub rent Chef and Brewer.

Basically what we are going to do is talk through the page layout, why is it set out like it is and why everything is laid out like it is.  It might seem like a simple thing for download page.  Pretty much you would think you need a big button, but (laughs) but, that is not necessary.

The case here today, we are going to take a look at the anatomy of the landing page why is it set up and hopefully you guys can take something away from what we are going to do.

So here is our page.  This page will be visited by people who get sent an email on their opting list.  So people there will get offer this, this offer which is 5 £ off of a food bill when they spend 20 £ or more.  So people get the email.  They will click the link in the email, then they get presented with this page where the goal is to get them to click this button and once they click that button they will get automatically will be able to download a PDF for their voucher which they can then print and take into the pub and receive their discount.

So let’s have a quick look at the main elements of the page.  We have got to look at here, a big headline, obviously a download button, some sort of hurry message and then what the customer needs to do and a bit of credibility the buttons for those people that don’t have the PDF so far.  So with those elements in mind why is everything laid out like it is?  For those of you that run away we sort of view a webpage in an F type pattern.  So we normally, so I will start here, we will come across this way down the page, across a little bit, down further and then normally back up here.  So this is a lot of pattern that with some of your webpage and so everything is sort of set out with this F shape or F pattern in mind.  So people there will quickly scroll in the site.

This is how they are all path for moving.  This is how where they will look and fill.  So with this in mind, let’s take a look at why things are set out, I will quickly change the color of this pen as we can keep on top of this here and see where people are moving.

So the first thing they are going to see or people are going to is this big image here.  Now what this really is, we are just trying to enforce a message that the offer is about 5 £ of your food bill and so what we are trying to do is give a very clear image.  This is about food.  It is about a new menu so something looks nice and nice gallops and like what we are trying is to make sure when the visitor lands on this page the instant he will realize they are in a right place.  He will see some nice lovely food and that is going to be the first thing to look at it.  It just gives a confidence in the user or the visitor the webpage that they are in a right sort of place, very, very easy to understand.  Brain picks up on images quickly so as I said it is just nice and subconscious there for the people when they land.

So moving then to the left we then have a big message here and a big 5 £ off so, what we are trying to do here is really enforce the same message and the same word that has been sent out on the email and what this basically means is the customer then again it is all about reinforcing the message they have seen already.  They are familiar with what they have seen.  Soon as they move across they are seeing the food, they think it is message and it is reinforced and they are in the right place.  This is for their 5 £ off their food bill.  Obviously reinforces the headline and the offer as well with a 5 £ in big letters like this.  Again what we are doing is reinforcing the message and what the voucher is that people can download.

What will people then do, then so they are moving down, they are going to see a download button here.  They probably glance over that the first time.  They will then come over to this message here.  So offer ends 5th of November, 2011.  Now this basically what is there, there is to a bit of scarcity to the landing page obviously what we want people to do is when they get to this page is to download that voucher right away.  We don’t want them to get on the page and think … Ah! I can download that a later stage or might be I will download that next week, next year or next month or whatever it might be.

So by placing this scarcity there and having the arrow I want it basically people to think right that I might also download this here while I am on the page.  The arrow which is here, basically what we are then doing is forcing people back to have a look at the voucher so.  They come across this way down over to the hurry message and then we use the arrow to draw they all back to download voucher page and then from there what we do is we bring that right down to this here, which is how to save message.

Now basically this is just to enforce some sort of instruction I guess to the visitor to make it easy for them so they understand what is going and what the process is, what we are trying to do is enforces instant download message.  So because the customers come from the email we don’t want them to think that they have got more steps to take so we go right fantastic, here instant download is very, very simple.  Download your voucher, print it off and then take it to the pub to enjoy three simple steps and again you just make him show the user, knows how easy is to do, they download that voucher right away without going anywhere else.

So as I said once they have seen that they come down here to Adobe and read a message again.  The logo is there it is ready therefore for people who haven’t got the PDF they can go over Adobe PDF reader, they can download if they want to.  But, also by having the Adobe logo here and this sort of recognized, it sounds about a bit of credibility to the message and builds confidence in your visitor.  So as I said once they are down there this will go normally top to bottom and then the Adobe they will come straight back up to a nice big clear download voucher button which again is supported by this instant download message again to reinforce the idea here that it is an instant download.  They will download it right away.  They don’t have to fill out any more forms, give any more details; it makes it very, very simple for them.  As I said it is just trying to enforce that confidence in your visitor and again we got this message right next to that with the, this sort of an arrow again making sure they download it right away.  So that is it.

I mean as I said fairly simple page with just a download button on, but as I said the actual form and consideration that goes into this and then why everything is designed and how it is worded is quite substantial.  So, hopefully as I said you can take advantage of this F pattern and this eye movement when you guys are designing your pages or looking to design pages for your clients.

Thank you very much.  It is Charlie Hutton again from Hutchinson Web Design.  We are looking forward to speak to guys again.  Cheers!






Leave a Reply

Your email address will not be published.