When you realize it is time to create a new website, your first step should be a bit of research. It’s time to put on your best spy outfit and do some fun investigative work.

Your goal will be to research and find 3 websites that belong to business owners who are successful in your industry. You should connect to them emotionally, aesthetically, and the information should resonate with you. And it should be a popular website.

 

Now it is time to put on your best analytic eyes.

You are going to create a wireframe sketch for each of the 3 sites you like. A wireframe sketch is basically just sketching out the main sections of the homepage and labeling what they are. This will help you start to see the flow of the website and start to think of what you want to include on your own homepage. (see below for an example wireframe sketch)

 

You will be looking for a few things:

  • what is the topic of the content/text for each section?
  • what images are they using?
  • and what functionality does each section contain?

Below you will see first a screenshot of the homepage of www.nathanberry.com. This is a website from a leader in my industry.  I created a wire frame of his site as research for a new website I am creating for WPA.

 

Nathan Barry 2015-05-13 18-47-17

Why did I pick Nathan’s site?

I picked his site because he is successful! I know he converts a lot of viewers into community members, he is at the top of my industry in popularity, and he sells lots and lots of digital products and online trainings. So I know he is doing something right!

He also has a similar business model as I have.  He is building a mailing list, he does blogging, he sells digital products and also online trainings.

You should find websites of people doing the kinds of things you are doing with your business. If you are selling physical products, make sure you pick a site with someone selling physical products, if you are a yoga teacher, pick someone who is actively filling their own yoga classes, or if you are coach doing one on one sessions, notice if they are offering premium one to one coaching like you. You get the picture!

Nathan is further along in his business than where I am, but that is ok, because I can be inspired by the parts that we do have alike. And also plan and be inspired for the future of where I want to be in one to two years.

Whenever you are creating a website, you need to to know what your plans for the future are. It will help you make informed decisions. Just like building a home, you can create the right foundation for all the rooms you hope to create someday.

 

What I learned by creating a wireframe of Nathan’s homepage?

Navigation: He starts with a clean header that has his site navigation and nothing else. He is not encouraging anyone to click away from his site. I know many people put in social buttons at the top of their site, but I like how Nathan has his navigation clean and just about clicking around his site. Nothing to be distracted by or to leave his site.

About Nathan Box: The first content box has an image of Nathan with is baby, smiling directly at the camera. This immediately makes a connection with his audience. He has a short paragraph welcoming them to the site. And also states what they can expect if they read on. And he has a button to read more about his story.

Opt in Box: This box has two opt in choices for Nathan’s mailing list. Mainly because he teaches about two different topics and attracts two different audiences to his site. He literally asks, which are you? Then when you click on the words you relate to: Marketing or Design and a popup window happens offering you a free download to join his list.

Recent Blog Articles: Next he has four boxes with an image and synopsis of his most recent popular blog articles which you can click to read the full article. Nathan grows his community through free content marketing (as do I) so it makes a lot of sense to feature his four most popular articles right on the homepage.

Social Proof: This section has Nathan’s logo and tagline. Most people add the logo to the header but Nathan has chosen to wait to add his logo and tagline until half way through the homepage. I find this a really interesting choice both aesthetically and because of the connection it makes with the reader. I love the way his logo is just floating center page with the tagline. It makes a nice impact. Because his logo carries a lot of weight in my industry it is also social proof for his readers. If you aren’t well known like Nathan you could instead use a testimonial or logos of the places you have been featured. But some sort of social proof is very important on the homepage.

Product Listing: Next he lists the three main digital products he sells. With links to read more. This makes it easy to get a snapshot of what Nathan has to offer his readers.

Footer:  His footer is a very dark color to ground the page. He has divided it into three sections of links to the rest of his website. He first lists links to his blog categories, then links to the titles of his most popular blog posts, and finally he lists all his products with links.

 

How to make your own wireframe.

I love the way Nathan has structured his homepage. But it is important to not stop there. I will and you should go through this process for at least two more website homepages of people in my industry that I look up to. Then instead of just copying one person’s wireframe and using it for your website, you can take the best ideas for your business from all three and create your very own wireframe sketch that is unique to you.

Questions? Please leave them in the comments below and I will be happy to answer them. Remember starting with this research and creating a clear idea of the content you want to include on your homepage will help you create a professional and well thought out website.

Example wireframe I created from Nathan’s homepage above – click image to enlarge.

wireframe