How to Design an Awesome Landing Page that Attracts Website Visitors

Source

Here I am, come in and look around! It is true to say that our landing page is to all intents and purposes, the shop window of your website.

Many companies will hire a window designer to make as much impact as possible for their shop fronts; they want to pull people to come into their store, which is the only way a customer will buy something. Therefor its stands to reason that your landing page has to be that shop window display, it needs to be both attractive, hold the content that your visitor is looking for, as well as be user-friendly and easy to navigate. Skipping one step could be the difference between a successful online presence and that dusty corner shop that no one goes into, unless by accident.

So before you begin to design your page, I would suggest you sit down with a pen and some paper and make a list of what you want to achieve with this page. Lists sound boring I know, but having a clear idea ahead of the actual designing stage, can save you a lot of time later. Nothing is written in stone, so remember you can always change aspects of it later, but it’s important to know which direction you are going in to begin with. Decide on your layout.

The layout is the aesthetics of your design. Choosing what you have and where it’s placed. The layout should be clean and uncluttered first of all. If too much is happening this will make it not only hard to read, but could also actually put your visitor off. Just as a busy pattern on an item of clothing can distract from the actual design of the outfit, so can a busy page distract from the actual content. The human brain will have a hard time taking in the information, if too much is happening on the page. So keep it clean, and uncluttered. I would suggest having a look at the source code of some of your favorite websites; this will give you an idea of how you can layout your design. You can do this by right clicking on the web page and selecting “View Source”. Also have a look at how their CSS while you are at it, so that you can see how each of the elements is laid out.

To do this look in the header for the CSS link, it should look something along the lines of the link below:

<link rel=”stylesheet” href=”theirstylesheet.css”/>

If you are using Google Chrome or Firefox you will be able to just click the link to the style sheet, but if you are using IE you will need to copy and paste the link into your browser, to view it.

Also decide will your layout be three columns, two or just the one? Where will the menu be placed, how much of the main design will be given over to the content? What will be the position of images, how large will the logo and headings be etc.? What about the color?

Believe it or not, black and white are colors that need more thought, as too much of either can be a distraction to some, and to others cause problems when reading content. For example, if you have white or variations on white, ie pale pinks, blues, yellows etc, often called a hint of on a solid black background, anyone that has an eye condition will find this hard to read. Or if you are viewing it at the end of the day and your eyes are tired, likewise again it will be uncomfortable to read. The same can be said for an all-white background with black text. Though this time it can make a website look and feel very cold and stark, but I will say here if it is done correctly with the use of interjecting bright colors, it can actually work. Remember color is your friend, but understanding how it works together is important. Try to use colors that complement each other! For example a healthy balance of White and Black (or Grey) with accent colors of pale blue and green work really well together. So you could have your menu (left or right) and header in black, the content area in white then your accent colors can come into effect via links, buttons, images or image borders. When designing the page I suggest you pick four or maybe five colors and try to keep to just those colors.

How to choose best fonts and Size of Fonts?

It’s all in the font. It’s really easy to go nuts with different fonts, but at the end of the day if your visitor doesn't have it on their system then they’re not going to see it. So take this into account when deciding on the fonts used. Make use of the font family when deciding. And give a few options, as the last thing you want is to design a beautiful layout, with certain a certain type face throughout, and then have your visitor end up seeing a basic ugly system font! To be honest I usually think giving three or four options is best. font-family:"Times New Roman",Georgia,Serif; Also think about the size, do not fall into the trap of tiny little fonts because it looks better. I realize that it’s easy to enlarge the font through your browser, but if you haven’t designed your layout to flow, in other words to expand and contract, you could end up with a broken site. Many people set fixed widths, and that’s fine as long as you have a font of decent size that a viewer won’t need to enlarge. But if they do, well that beautifully designed site, is going to end up looking a mess You also need to decide if you intend to use em or pts when setting the size, to help you decided I suggest you Google the pro’s and Con’s of both.

Guide the user’s eyes by using a right images

I’m an image, look at me! Images can be really useful, but you need to be careful that you don’t overload a page with them. How often have you visited a website and it takes forever to load? This is often because there are way too many images on the page. And the images that are there haven’t been scaled down. I challenge you next time to right click an image and select view in a new window. You will more than likely find that the image that is displayed in the new window is ten times larger than that of the one that was loading on the page. This is because the designer was lazy and didn't create a thumbnail version of the image. Some designer’s don’t bother having a thumbnail and a full size image. They think it’s ok to use an image that is 900 x 900 on their page and put its display qualities as 100 x 100: <img src="image.jpg" alt="My Image" width="100" height="100"> This is fine, you can do this. And the image will display as a thumbnail but the browser is firstly downloading the image as 900 x 900 and if you have eight or nine of these, it’s going to slow down your browser

. So bare this in mind! Deciding on what content you want on your landing page. Do you wish it for example:

• To tell the visitor about whom you are?

• To show your latest offers?

• To show case popular items?

• Or perhaps you intend to have multiple sites for different languages, so there for your landing page would be a map with some user interaction where they can select their language.

• Maybe even a combination of many. So to reiterate, it’s important to decide early on what the page is going to tell the visitor about your website, that is going draw them in so that they either book mark it for later viewing or make them want to hang around for a while and take a look at other content! If you have decided to display product images for example with a brief product display how do you wish to do this?

Well you have few options open to you, you can:

• Keep it brief with one or two.

• Have a list of seven or eight, (which may slow down loading times so you will want to make sure the image displayed is small in size with a link to a large image. This can be achieved in a clean way by using a piece of code such as “Lightbox”, there are many versions on the internet, some that use JavaScript others that use jQuery and of recent times I have even come across one that only uses CSS. The best thing to do would be to use your friend Google. Using a Lightbox to display your images and product descriptions will enable you visitor to remain on the page whilst viewing larger images.

• The other option that is useful is to use an image roll over script, or image slide script, there are many of these available online for you to use.

When using a roll over scrip or slide script, you could have this as a banner across the top of your design allowing for other content to be placed in the body of the page. I’m sure you have been to countless websites and seen the rollover of images at the top of the page, and not even thought about how it was done. One that I feel is particularly useful especially if you are a beginner is designed by a site called Menucool.com and can be found at this address: http://www.menucool.com/javascript-image-slider it is totally adaptable to many situations. Whatever the content is keep it to the point and do not go overboard.

Created two or three paragraphs about a coffee pot is not going to blow a visitor away, in fact it may bore them senseless and they’ll stop reading. After all how much can you say about a coffee pot? People inherently are lazy, and don’t want to be reading paragraph after paragraph, so get your point across and no more! If the item or items have several spec’s then consider having a link to a product page where they can view these if they wish.

Do you trust me? Last but not least, trust is a big thing.

With so much internet crime and spam happening today, visitors need to know they can trust you. Remember they don’t know you! You may be the salt of the earth, and have a huge group of friends. But that means nothing to your visitor, if he is about to give you is personal details such as name, address, phone number(s) and credit card details, they want to know that it’s ok to do that. First and foremost if you are building in php you need to make sure that your code is secure and doesn't have any security holes where malicious code can be used to get at sensitive information. Passwords should always be encrypted. If you intend to be taking payments for goods or services, you need to be behind a secure server. http://en.wikipedia.org/wiki/Wikipedia:Secure_server This is what the S stands for when you see https:// in the address bar of a website, or the little padlock to the right on the status bar (the bar that runs across the bottom of your browser), or purchasing a purchasing a website digital certificate. http://en.wikipedia.org/wiki/Public_key_certificate

This should be your check list, so take the time in the beginning to work out what you need, what and how your visitor will interact with your website. You will be grateful later, there truly is nothing worse than spending hours working on the design only to realize you didn't make allowances for something later, and you end up having to redesign the site.

More by this Author


Comments 7 comments

PurvisBobbi44 profile image

PurvisBobbi44 4 years ago from Florida

Hi,

This is a great hub and I will revisit it when I decide if I want to do a website.

You did a great job on this one. Have a great week.

Bobbi Purvis


JanMaklak profile image

JanMaklak 4 years ago from Canada

I'm trying to get my head around joomla to improve my photography website. I have 3 websites in total to manage and it's going to be quite a challenge. Thank you for a good article


bodylevive profile image

bodylevive 4 years ago from Loachapoka, Alabama

This is a very good article and I need this information. Thank you so much for posting it.


grandmapearl profile image

grandmapearl 4 years ago from Southern Tier New York State

I have been in the process of streamlining my website, and found your information to be very useful. I did have a lot of images that took forever to load. So those images have been relegated to product pages, and actual thumbnails took their place. I have chosen colors to be easy on the eyes, but still have enough contrast to be read easily. Thanks for all these good suggestions. Voted Up and Useful


suziecat7 profile image

suziecat7 4 years ago from Asheville, NC

All kinds of excellent advice here. I've toyed with the idea of learning HTML but I've found ways around it. Thanks for the information. Rated up and I'm a fan!


denden mangubat profile image

denden mangubat 4 years ago from liloan, cebu, philippines

nice advice.voted up.


agaglia profile image

agaglia 3 years ago

thanks for an informative. hub. I would have liked some elaboration or definitions about some of the bits as I am new to web design, for instance what is a CSS code?

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working