How to create landing page wireframe

How to create landing page wireframe

Let’s talk a little bit about landing page creation process. We will be using Niehaus wireframe technique for this. But before starting any wireframing it is needed to understand what part of the landing page are important and how to make of them effectual composition.


Architecture of expectations

When we are talking about the landing page, we need to understand that marketing concept AIDA (Attention – Interest – Desire - Action) is not working here precisely in appropriative way. This happened here as the landing page does not comprise entire cycle of the making the decision. Mostly we are dealing with the visitor expectations from the product The last one could be measured in four dimensions:

  1.  Action expectation
  2. Expectation of the emotions
  3. Rational expectations
  4. Negative expectations


Creating landing page wireframe step by step

1. Convincing module with UVP (Unique Value Proposition)

  • Using marketing Personas method understand who is your typical users and provide them attributes that they need (Creative, Enthusiasm, Risk etc.)
  • What positive formulation will be best attaching emotional mindset of your visitors? (Innovation, Useful etc.)
  • What facts will be important for this persona? (Free to use, support, size of the storage etc.)
  • What this user will be afraid of? (How safe my personal data will be? Is it complicated to use this?)
  • What makes your product better than others?
  • Make convincing sentence that describes some of these aspects.

Now you have content and ideas what will be working for the chosen target group. One more important thing is persuasive headline. Put your Unique Value Proposition in it.

2. Exclusion

Next step is to give the customer understanding what product definitely is not, what attributes and features are not in it. Note it clearly so the expectation of customers would be correct

3. Importance hierarchy

Put all existence modules in the hierarchy with understanding what of them are most important especially for your client and have most persuasive impact on them. Test a few different variants on user sets to understand what will be working better. Now you will obtain knowledge what is most important for users.

Importance hierarchy

4. Wireframe!

Now we understand enough about the project and can start wireframing. Do not forget about the general usability of the pages during landing page wireframe creation.

landing page wireframe

5. CTA (Call to Action) Placement

Wherever the story ends, the CTA must be disposed. Make it with contrast color to other design elements, or highlight in another prominent way.

landing page wireframe

Work with this wireframe in Mockup Builder:

6. Niehaus technique

Define the areas or elements that must be caught by eye in first 5 seconds and fill it with black color. Then mark other elements by gray color. Remember that in this technique darkness of the element indicates it importance.

landing page wireframe

Work with this wireframe in Mockup Builder:

7. And then …

So it was the concept of the creation landing page wireframe. Now you have understood structure, and now you need to begin testing your wireframe. Test different layout of the landing page on your visitors and understand better their needs.

Create your wireframe rignt NOW!