Hello and welcome to new episode. Today we are going to create effective About us page wireframe from scratch. It’s gonna be a full-fledged website copy with illustrative examples of content blocks. The page is made as a section of the site of imaginary company that sells wholesale candied fruits, though the text is real.

If you need more information on the page creation, with explanation of each step, watch the 15th lesson of the course “Copywriting from zero in 30 days“. And here is a short timelapse.

The algorithm of about us page creation

There are seventeen steps in making the about us page, including technical ones. We are using free Google Drawings service to create a wireframe from scratch. Here are the steps.

1. Create a new file. In order to create something we need an environment. I’m using Google Drawings and just create a new document in Google Drive.
2. Set background color and vertical size. To work comfortably, we need to change background color from transparent to white and set the vertical size to 60 inches.
3. Use the grid 960. We need to align content blocks of the page correctly, so we are using a special grid 960 template. You can use this one.
4. Make the page header with navigation. This is a first block of our future about us page. And it can be the same across the whole website.
5. Create the first screen. This block is the most important. It contains the title image, the headline and bullets, grabs attention and arouses interest giving all essential information to users. We also make a capture point as a contact form to rise conversion and generate quick leads.
6. Add a block with figures and facts. This content block enhances the previous one giving readers additional info.
7. Build trust using why-formula. This is the first emotional tool we use to call a goodwill and show sincerity.
8. Show product lines. Here we show the audience what we sell and how profitable our products are.
9. Create a block with benefits. Classical benefits and nothing more. Here’s the lesson about them.
10. Make a slider with photo gallery. This block acts as a separator and makes our wireframe more dynamic.
11. Show the interaction algorithm. A simple steps that make the process clear.
12. Show certificates. This is the authority attribute, one of the psychological techniques that we talked about in this lesson.
13. Introduce managers. It is sometimes a good idea to show managers on about us page. Such an approach helps to increase trust.
14. Refer to clients who trust us. This is another psychological technique – social proof. We show that there are many companies that work with us.
15. Show the letters of recommendation. Another aspect that combines authority and social proof.
16. Making a CTA, a map and a footer. This content block helps to close the deal – make the audience leave a request or call us.

Final page layout and template

Here is the final page wireframe that we’ve got.

If you want to copy this wireframe or use it as a source for your own projects, here’s the link to the file. Feel free to copy or download it.