How to make a landing page wireframe (in 6 mins timelapse)

Hello and welcome to new experimental format. Today I want to show you how to make a landing page wireframe in Google Drawings (it’s a free, easy to use yet very powerful mockup tool). For that I’ll use a 6-minutes timelapse. There are no voice in the video, just designing layout process with nice music. If you need more explanation, see the ninth lesson of the course “Copywriting from zero in 30 days“.

Brief contents of this video and landing page wireframe

In this video we are developing an example of webpage wireframe for Italian company that wholesales home appliance spare parts. The marketing part is based on this market analysis. If you need more information about how to conduct it, see the seventh lesson of the course. Here.

Though the video lasts six minutes only, there are fifteen parts:

  1. Creating new document. Here I show how to create a new Google Drawings file, set the dimensions and background color.
  2. Using grid 960. In this block I show how to set up the grid. You can find it here (along with other templates).
  3. Making a page header. The upper block of the page with logo and contacts.
  4. Completing the first screen of the landing page wireframe. It is the content that displays on desktop devices without any scrolling.
  5. Adding a gallery slider. The first dynamic block with images that evoke trust.
  6. Writing benefits. A very important block. We talked about how to write them and how they differ from features, specs and abstractions in this lesson.
  7. Adding a capture point. It’s the place where the readers can leave their contact data. Intermediate call to action.
  8. Showing the attribute of authority. We use certificates to show the seriousness of the company.
  9. Setting the accent. There is a deferred payment option. It’s a very important aspect. And that’s why we create a separate block with this information in the wireframe.
  10. Showing social proof. We use client’s logos for that (with their permission, of course).
  11. Handling objection. We talked about what objections are and how to handle it in this lesson.
  12. Answering questions. FAQ is a very useful block that greatly helps us to add more different information to the landing page and make it organically.
  13. Telling about the company. This is a secondary block, and therefore we place it closer to the end of the page.
  14. Making a CTA and page footer. Closing the layout with call to action and a map with address.
  15. Final wireframe. This is a final result.
The final result: complete landing page wireframe.
The final result: complete landing page wireframe.

If you want to look at this sample wireframe more carefully, or even copy or download it, here’s the link to the file.

I hope you enjoyed it! If you have any questions, feel free to ask them in the comments below.

About the author:

See other useful posts:

Leave a Reply

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