How to design a lead generation website

The purpose of this tutorial is to emphasize the proper location of the opt-in box in website designs. This is extremely important in getting your visitor’s contact details. This is an effective way in building your leads list for future marketing campaigns. We should always keep in mind to put the opt-in form above the fold so that this will be the first thing your visitors will see. It is equally important as well that we offer an ethical bribe to encourage them to sign in. We must make it a point to emphasize our call to action button in a very strict and organize way.

Before we proceed with our tutorial, please download your copy of the image we used here:

Let’s start. Create a new document with 1680×1050 dimension. Fill it with #edece8 at72dpi using the Paint Bucket Tool (G).

Using the Rectangle Tool, create a 929×1253 rectangle as shown below. Fill it with #ffffff and 1px #cdcdcd stroke border. We will name this layer “Content Wrapper”

How to create a lead generation website template

 

How to create a lead generation website template

Again, grab the Rectangle Tool and create a 1049×70 at the top. Add a layer style with the below settings.

How to create a lead generation website template

How to create a lead generation website template

Place your company logo at the left, and type the Navigation Menu that you will be using. For this tutorial, I decided to go with the 5 Common Menu Items: Home, Services, About Us, Contact, and Blog.

How to create a lead generation website template

Using the Rectangular Marquee Tool, draw a thin vertical line between Home and Services Menu. Fill it with #7a7a7a. Create a new Layer, and move the Marquee Tool selection one step to the left. Fill it with #000000.

How to create a lead generation website template

Now we will create an active selection effect on our Navigation Menu. Grab the Rectangle Tool again and draw a rectangle under the Home Text Layer. Fill it with #26a9e9.

How to create a lead generation website template

Download the image from Morgue File in this link. We will be using this image as a placeholder in our tutorial. Place it in the top of our content “content wrapper” layer leaving a small padding between both sides and top.

How to create a lead generation website template

Next step is creating an optin box in our slider image. It is a really good idea to place an optin form in your website above the fold to capture your target audience email. It is the best strategy to build your leads. Draw a rectangle as shown below using the Rectangle Marquee Tool.

How to create a lead generation website template

Apply the effects as follow.

How to create a lead generation website template


How to create a lead generation website template

How to create a lead generation website template

Using the Pen tool, draw a shadow fold effect under our optin box layer. Fill it with #0078b3.

How to create a lead generation website template

Enter text details into our opt-in box to attract visitors, I used Myriad Pro, Semi Bold, 28pt setting in the Header. Then reduce the size to 14pt, with Regular weight on the sub text.

How to create a lead generation website template

Draw three rectangular boxes below with #2e5365 and stroke set to 1px, #000000. We will be using it as input fields for “Name, Phone # and Email Address”.

How to create a lead generation website template

Add a button below using “Rectangle Tool” and apply the below settings:

How to create a lead generation website template

How to create a lead generation website template

How to create a lead generation website template

Next, we will be adding text below our slider image. Using the text tool again, add a dummy Lorem Ipsum text below. Note that I used Myriad Pro with 33pt size for the header while 14pt size and 18pt line height on the paragraphs’ text.

How to create a lead generation website template

After that, we will strategically position a contact us button inside the website’s body to draw the audience attention again and encourage them to get involve. We will highlight a call to action text as shown below.

How to create a lead generation website template

How to create a lead generation website template

How to create a lead generation website template

How to create a lead generation website template

How to create a lead generation website template

For the button, we will be using this setting:

How to create a lead generation website template

How to create a lead generation website template

How to create a lead generation website template

Repeat the process of adding paragraph text in two columns. Also add a little button below them with the above layer style properties for consistency. You can also add a black background footer at the bottom to put your any copyright information of your website. Your finished result should look similar like below:

How to create a lead generation website template

 

 

Download the PSD Here and help me spread the word!

or Tweet here, to Start Your Download : lead-gen-website.zip

 

Image copyright of Morgue File : by Mconnors

 

This entry was posted in Blog, PSD template. Bookmark the permalink.

4 Responses to How to design a lead generation website

  1. Lheureux Finan says:

    Wonderful work! This is the type of info that should be shared around the net. Shame on Google for now not positioning this publish higher! Come on over and consult with my site . Thank you =)

  2. I’ve learn a few just right stuff here. Thanks!

  3. Bujangga says:

    thanks .. it’s amazing for my.. i’am newbi, i hope i can learn here..
    thanks mel..
    ;)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>