How to Design an Awesome Landing Page that Attracts Website Visitors
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.
• 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.
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.