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:

• Morgue File : by Mconnors

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”

 

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

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.

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.

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.

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.

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.

Apply the effects as follow.

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

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.

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”.

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

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.

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.

For the button, we will be using this setting:

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:

 

 

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

 

No related posts