ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Arts and Design»
  • Graphic Art & Design

How to Design an Awesome Landing Page that Attracts Website Visitors

Updated on October 31, 2012

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 and can be found at this address: 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. 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.

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.


    0 of 8192 characters used
    Post Comment

    • agaglia profile image

      agaglia 5 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?

    • denden mangubat profile image

      denden mangubat 5 years ago from liloan, cebu, philippines

      nice advice.voted up.

    • suziecat7 profile image

      suziecat7 5 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!

    • grandmapearl profile image

      Connie Smith 5 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

    • bodylevive profile image

      BODYLEVIVE 5 years ago from Alabama, USA

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

    • JanMaklak profile image

      JanMaklak 5 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

    • PurvisBobbi44 profile image

      PurvisBobbi44 5 years ago from Florida


      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


    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: ""

    Show Details
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)