Web Design

How to build a personal website (Part 2: Content before tech)

Full Width Featured Image with Sidebar

Content is (still) king.

It’s probably safe to say that no matter what job, profession or title you have, the most important thing you produce is content. Content comes in many different forms. If you’re a painter, it’s your artwork. If you’re a consultant, it’s your expertise in producing results through your knowledge. If you’re a photographer, it’s your photos.

I’ve been reading recently that content is no longer king. But I think that’s a matter of semantics. Whatever you produce and others consume, you’re producing content, whether that’s in the form of writing, artwork, processes or a tool.

Content is your form of communication and much like any conversation, what you say and how you say it are equally important. If you have a great idea but you’re not using the right words to describe it or pay attention to whom you’re talking to, your message gets clouded.

This is just as important when creating your content for your website. It may be a landing page for a funnel or the homepage to show off your expertise – what you say and how you say it is crucial.

So here’s what we’ll cover in this week’s discussion on content:

  1. The steps to take before you write anything for your website.
  2. The fool-proof structure to your homepage or landing page that will keep your audience on the page longer to increase conversion.
  3. The benefits of wireframing.
  4. What to do when the Perfect Gremlin creeps in.

Start on the right word

Copywriting

Content creation and copywriting is tough work. I’ve spent sad minutes, hours even, on the daily staring at a blank screen and a blinking cursor. I’ve taken courses, webinars and worked with wonderful copywriters and it continues to feel like I’m that last kid in track during gym class.

But copywriting isn’t something you master on day one. Even the best of copywriters continue to work on their craft. So don’t be afraid to tackle this because, for a personal brand website, you’re not writing a poem or an epic novel.

With a personal brand, it’s just you telling your story. And you’ll get better at it each time you write it in a post or tell someone what you do and why. The words come easier over time.

So let’s get back to writing specifically for your website. Here are some things to do before you write a single sentence or paragraph specifically for your home or landing page:

  1. Brainstorm it.
    1. What you do. Freeform this. Don’t put any restrictions on yourself. Just be super clear with what your business is about.
    2. Who you serve. Identify the specific person you’re talking to. Describe who they are, what their pain points are and add what kind of websites they have bookmarked or surfed recently. Think about where they hang out and how they communicate online.
    3. How you help them solve a problem. Find out what they’re struggling with and why they’re struggling with it. What are the words that they’re using to describe their situation and what are the words they are using to look for a solution? What are they Googling?
    4. Why you do what you do it. What’s your story and how did you end up where you are, helping the people you want to help. Was there a trigger, a turning point or an epiphany? And if you’re able to,
    5. When you can help them by. This isn’t a necessity if your business and program don’t allow for it. But if and where it does, people like to know that a transformation can happen within a certain time frame. Ambiguity in communication is a killer so don’t leave any ambiguity where you can help it.
  2. Identify keywords. List out the keywords that come up as you’ve been writing to see what’s been in repetition. This will help with SEO once you start the writing process
  3. Write one clear sentence that describes the goal of your website. What is the website for and what is it that you’re trying to accomplish? Be specific about it. Keep it clear and succinct as possible. And don’t be afraid to revise this. But once the goal is clear to you, keep it top of mind.

Many of these things you’re likely to have done because it’s the same activities you would do as you’re building your business. And if you haven’t done it already, this is the part that you cannot miss.

The anatomy of an effective homepage

So once all of those ideas and words are swimming around in your head, let’s start to structure the content using the following template.

How it works

  1. The welcome mat gives them a strong statement of what you offer and you can be clever and creative about it here. Keep it short and impactful.
  2. Tell them what you do right away and the problem you solve. You only have a few seconds to maybe a minute to grab attention. So do your best work here and start with what you came up with during your brainstorming session.
  3. Highlight how you do this – perhaps it’s a system, a process, coaching or a program. What are the basic elements?
  4. Share your story and how you became the authority you are and why you do it. Show off personality and don’t be afraid to share something little personal and identify with them.
  5. Move into the details – nuts and bolts of your service and hit’em with all the benefits and transformation they’ll be receiving that will help them through the pain points.
  6. Share testimonials and social proof where you can. Give them images of the people you’ve worked if (remember to ask permission first!) and share real words. Don’t worry if you’re just starting and you don’t have this yet. It will come!
  7. Now reel it in and reiterate what it is you do, how you empathize and that you can provide the kind of transformation that they need.
  8. Then invite them to book, opt-in or purchase your service because you’re that awesome and so are they.

Why it works

This layout works because it’s a 1:1 method – you’re talking to one person and you have one goal in mind which leads to the one call-to-action you want them to act on. Remember the clear and succinct goal of your webpage that you wrote earlier? This is where it all pays off. You’ll be super clear on what you’re offering and your ideal client will be super clear in what they’ll get.

And throughout this whole process, this is you telling a story. People identify with stories and your website can be set up for success the same way.

So let’s bring back last week’s lesson for a few minutes to help the storytelling along.

Imagery

Last week we started this whole series with images (if you haven’t already, you can check it out here: How to build a personal website (Part 1: Imagery & Photography) and here’s where we’ll start to pull it in.

If you’ve had a photoshoot by now then you’ll likely have some photos in your inventory that you can pull out to use. Share high-quality photos for background images that show your brand aesthetics and personality. If you haven’t had one, this is a great place for you to start planning the kind of photos you need to enhance the story and content of your page.

Remember, photos that partner with your copy makes it 10x more effective than without. And size matters too. Opt for full-width imagery where it makes sense and images have with the same look and feel. That means colours, the type of edit or filter. And bring a variety that shows off personality. It’ll draw your ideal client to you much faster and leave a longer impression of you and your brand.

Putting it all together

A simple wireframe for a target personal brand website.

Forgive the rough and crudeness of the picture above. This as the first version and I’m not super neat with lines, but that’s pretty much exactly what I want you to do.

Just a pen, paper and your creativity.

Because what you’ll end up doing with this exercise is saving time and energy from the absolute rabbit hole that tech can be before you even get started. You’ll be able to see the vision in front of you and when you start looking into how you’re going to build it, you’re going to be able to separate the two frustrations. You’ll be focused on looking for answers on how to solve a tech problem, instead of questioning why you’re building a website at all.

Because you already know why. So let’s wireframe the heck out of this.

Wireframing

Stage 1

Then draw out the structure of the page and start filling the numbered areas. Go back to your brainstorming session and pull out all the awesomeness that you already have down. Remember to use the keywords you’ve identified to keep you on track and always remember the goal you’ve written out so that you stay on track to reach the goal of your page.

And don’t forget to note down what pictures you could use and where.

Stage 2

Once you’ve filled out the wireframe with notes of each content section, open up Word (or any word editor of choice) and start writing out each section. Because you’ve done your homework, it will be easier for you to flush out the details. Keep your wireframe in front of you and think about how your content can affect your layout. Instead of straight paragraphs

  • perhaps you could turn it into a list of steps;
  • maybe you could pull out an important piece and highlight it with a quote because you have an awesome image to go with it; or
  • it might be too long and you need to separate it into headings.

And if you’re having a little trouble writing, here’s one of my favourite tips from Danielle Leslie and how to use T.A.S.T.Y content to write. In the video she focuses on headlines specifically, but this can also apply to your content.

Stage 3

Using the original wireframe and the content you’ve just written, draw a second version. Make sure that the vision you have in your head, you can also see it on paper. Because now you have a clearer vision, you can start drawing in some elements such as carousels, large quotation marks and icons for your steps or lists.

A very important rule of thumb as you’re doing this exercise is to ask yourself, ‘Is this content easy for my ideal client to consume?’ If the answer is no, go back and see if you can make any edits to clean up any wordiness or ambiguity.

Just a few things to note

So, you might be asking, ‘But Michelle! Is this a website? Can I have other pages? Why is it so specific?!’

Well, I’m glad you asked. 🙂

Websites come in all different sizes. It’s come a long way from where it used to be (seriously, no more Times New Roman, guys). And websites can be just a one-pager or have lots and lots of pages. But we focused on one effective page here because:

  1. It’ll get you up and running faster! You’ll have omething to show that’s professional and describes exactly what you do. Win!
  2. You won’t get get dragged down by thinking of every single page and element. That’s a recipe for disaster. One awesome page trumps a mediocre site any day.
  3. What you do with this one page, you will be able to replicate on other pages as time goes on. The same principles apply and you’ll be able to tackle those with more confidence and more clarity when you build and learn from the first.
  4. Websites are alive! Or, if you’ve worked in corporate – ‘this is a living document’, which means we’re just going to keep making changes. And that’s what will happen to your website. You’re going to add to it, subtract from it, change it, learn from it and grow it.

So is the Perfection Gremlin knocking at the door?

And he shows up fast and knocks incessantly.

But I know that you know that I know that – well, there’s no such thing, is there? Perfection only holds you back from really achieving what you want and being grateful and joyful about it! There is not a perfect website out there. What’s perfect for you is not perfect for the person sitting next to you – no matter the topic we’re talking about. So get rid of that word and when Perfection Gremlin is creeping up on you, get up and walk away. Come back to the work another day.

I promise, tackle the content first and you’ll be steps ahead when you finally start to tackle the tech!

As always, don’t hesitate to leave a comment below, connect with me on Facebook or slide into my DMs on Instagram and remember to sign-up to get the next step on how to build your personal website in your inbox.

Next week, we tackle fonts! No more times new roman!Stay in the know below!

So what’s your biggest takeaway and what steps are you going to take on next? Comment below!

 

You Might Also Like

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

I've got an idea!

Let's hang out together!

>