Welcome to the practical part (part 2) of the article Landing page – basics and secrets.
In this example, we will build a “Lead generation” landing page from which we will gather e-mail addresses for early access of our application. This will not be a “high fidelity” or realistic demo as we will only be constructing a general layout and in some cases we will be using dummy text.
Project briefing would sound something like this:
The product we are advertising is called “YourSocial company network”, which is build by YS corp.
Tools that we will be using:
UXPIN – great mockup tool for creating mockups and basic structure of a landing page. This gives us an idea what we will be drawing in Photoshop or even code that mockup directly in html/css. Either way, it is a very good practice to start this way, as it saves A LOT of time in the future. For example: it is easier to to correct module placement or wishes or a client in this early stage than later when you finish coding.
Other similar tools: Moqups.com or a desktop app – Balsamic Moqups are also fine. You can also draw this with a pencil on a paper.
Let’s get started
We will be drawing Main title and subtitle with a Call-to-action button to submit an email. This is a very important section since we have to make a first impression and spark interest for visitors to submit an email address and gain early access to our application.
Why
Next section is all about “Why” you want to use and eventually buy our product. Don’t list featured, but focus on benefits in using your product.
The team
To give the product bigger credibility and ensure the potential buyer that this product will be developed and cared for
Repeat the form
If visitors are convinced and want to give us theirs email address, it is a good idea that we repeat “Get early access”, so the visitors don’t have to scroll to the top again.
Impressions
The last conversion booster is Reviews or Impressions or your product.
[button type=”primary” size=”large” url=”https://www.2gika.si/wp-content/uploads/2015/10/landing-page-mockup.jpg”]View the whole mockup (jpg)[/button]
Next week we will be building a more detailed and final looking first section.
Till the next time. Stay well.