Hacker Noon — Medium | Annie Maguire http://ift.tt/2oE95UB

These days, building your own website seems easier than ever.

But if you lack technical or design skills, you may be feeling stuck when it comes to doing something as “simple” as selecting your SquareSpace template.

You may be feeling overwhelmed by the options, or perhaps you’re unsure of how to layout your content. You may even be confused as to what should go onto the pages themselves.

No matter what you’re feeling about your website, I understand exactly what you’re going through.

As a freelance copywriter, I have no formal design or development training, so I know exactly what it’s like to build a website when you feel like you have no idea what the fuck you’re doing.

The good news is, I’ve built several websites over the years, which means I can help you create yours, and hopefully, help you skip a lot of the frustrations that plagued me when I first got started.

This 8-step guide is perfect for freelancers, but it can work for anyone who needs a website for their business, side-hustle, products, or whatever else you may need a website for.

If at any time you have questions or need help, you can always comment below or email me: [email protected].

Alright, let’s get into it!

#Step 1: Come up with your angle

Before you even think about what your website is going to look like, you need to figure out how you want to position yourself to potential clients.

For example, I’m a SaaS copywriter who focuses on conversion copywriting, so I need to prioritize that message both in terms of hierarchy and clarity.

This means I need to come up with “an angle” that’s clear and structured in a way that’s both sensical and convincing.

To come up with your angle, ask yourself these two questions:

• What’s the main thing I do for my clients?
• What’s the one thing my clients care about when it comes to my services?

In my case, the main thing I do for my clients is I write copy for their SaaS products. The one thing my client’s care about is how well that copy converts.

Therefore, my angle is “Copy that converts,” and here’s how I convey it in my Homepage Hero spot:

#2: Come up with your content

While it may be tempting to start browsing templates or themes, you’ve got to first figure out the content for your site.

To do this, grab a pen and paper and start answering these questions:

• What do your clients need to know about you?
• What do you want to tell your clients?
• Going back to “your angle,” what content is important to help you reinforce that message?
• And finally, what is the best way to present all of this information?

I’m going to walk you through my answers as an example:

NEED: my clients need to know that I’m a SaaS copywriter who focuses on conversion. They also need to know which services I offer, and that I have real experience. This means I probably need an “About” page, a “Services” page, and maybe an “Experience” page that shows past work and a list of my clients.

WANT: I want to tell my clients that I’ve helped other people clients find success. I want to give them information on how I work with clients, and how they can book me immediately. This means I need testimonials, possibly an “FAQ” page, and a “Book now” page or button.

ANGLE: I need to tell clients, in one way or another, that I’m an authority when it comes to SaaS/conversion copywriting. This means I should probably have a Blog on the site, some way to showcase articles I’ve written, maybe some stats about my work, or anything else that shows off my expertise.

PRESENTATION: I need to figure out a way to organize this information that is clear and effective. I need to make sure I’m using a format that convinces potential clients that I’m the right person for the job. This means I should probably use a copywriting “sales formula” to help me do that.

Once you have answers to the questions discussed above, it’s time to start laying things out.

#3: Layout your content

You don’t need to be a UX or visual designer to come up with a clean layout for your website. All you need is Keynote, PowerPoint, or even Google slides, if that’s what you’ve got.

Your website layout needs to include the following information:

• Your webpages
• The content on the pages (and the order the content should be in)
• Your navigation

From the last exercise, you should already have a rough idea of the pages and/or content you’re going to need for your website.

Using myself as an example, we found out in the previous exercise that I probably need the following pages / content for my website:

(1) Homepage, (2) About page, (3) Services page, (4) Experience page, (5) FAQ page, (6) Book now (page or button), (7) Blog link / articles, (8) Testimonials, (9) Product showcase

We may not need all of these pages (some may be dropped or combined), but that’s something you can figure out once you begin laying everything out.

Next, open up Keynote (or whatever you’re using) and make your document a custom size. You can do this by clicking “Document” (top righthand side), then going to the bottom to “Slide size” and selecting “Custom.” Try something like “3000 width x 1500 height” — this should give you enough space, but if not, just increase the width up to 3500, 4000, or whatever.

You should now have a slide that looks like a big rectangle.

Now, I want you to pretend that this rectangle is your entire website. Imagine you’re viewing it from a “birds-eye view,” seeing every page and every piece of content on those pages, all at once. The top part of the rectangle is your navigation and the rest of the space is everything else.

Okay — let’s use some simple shapes to build your navigation and pages. To do this, click on the “Shape” icon at the top of Keynote and select the Square. Color the square black, and make the font inside the black square white. The black squares are going to be your navigational tabs.

Next, make another square and color it blue (or whatever you want); the blue squares are going to be “content blocks” for your webpages.

Now you can start laying out your pages and content blocks like so:

Example — website layout

When you first lay everything out, it’s okay if you don’t know every single page or content block you need — in fact, you’ll probably end up combining pages together (for example, maybe you don’t need a “Contact” and a “Book” page) and will make adjustments as you go along.

For my own website, here’s where I’m currently at in terms of my layout (this isn’t fully live yet) — in case you’re wondering, the green blocks are landing pages that correspond to specific copywriting services I offer:

Example — my website layout (not live yet!)

You’ll notice that each content block does not include actual copy, but rather, high-level concepts that I plan to flesh out further when I go to write the actual copy for the site.

The content block “I want to…” means nothing to you, but to me, I know it’s where I’d like to give clients the opportunity to select what they’re looking for (i.e. — branding copy, website copy, marketing help, etc), which will then lead them to a service-specific landing page.

Okay, once your layout is in a more final stage, it’s time to start working on the actual copywriting part.

#4: Write the copy

Once your layout is more final, you can start working on the copy that goes within each content block.

You may be thinking: “why would I write the copy before I choose my website template?”

The reason is simple: you want to make sure you choose a website template that aligns with exactly what you need in terms of content / copy.

For example, if you plan to feature a lot of testimonials, it may make sense to select a template that includes a “testimonials”-specific widget/section. If you want to feature GIFs, it might make sense to select a template that allows for that.

Writing the copy first — even if you change it later — is going to give you a very clear idea your needs, so you don’t accidentally buy a template that’s meant for selling products vs a template that will help you sell yourself.

Writing the copy first is going to give you a very clear idea your needs, so you don’t accidentally buy a template that’s meant for selling products vs a template that will help you sell yourself.

To write your copy, open up a text Google Doc and — using your Keynote layout — begin mirroring that same layout in a Google Doc. For example, if you have a “7-section” homepage (meaning you have 7 content blocks in your Homepage layout), write out those sections in your Google Doc like so:

Example — this is the copy doc for my Homepage

Where applicable, make sure to note things like where certain sections will link to, which images go where (see more on that in the next step), and so on. Once you’ve got your layout finished, you can start filling it out with actual copy.

Now, I know writing copy is not everyone’s strength, so unless you’re a copywriter, this may be a good time to consult a professional (*wink wink*) who can help you best express yourself (and more importantly, get the clients you want).

I’ve helped clients with everything from creating their layouts and writing their copy, to selecting and installing their website theme, so if you’re interested in working together, just let me know!

#5: Find the right images

You know how awesome your demo site looked with all of the beautiful images?

Well, unfortunately, those beautiful images probably aren’t going to work for whatever site you’re building, which means you’ve got to find your own beautiful, high-quality images that go with the website you’re creating.

Allow me to introduce you to unsplash, which is a free service that allows you to search for and download beautiful, high-quality images that go with whatever vibe you’re trying to create.

Unsplash.com

Simply go to the site, type in whatever you’re looking for (i.e. “Desk,” “Computer,” “Office,” “Beach,” “Cactus,” etc) and you’ve got a great selection of beautiful, high-quality, free images you can use anywhere on your site.

You’re welcome. 🙂

#6: Select your website template, domain + hosting service

Having your layout and copy locked down is going to help you select the right theme and hosting service to fit the needs of your content and copy.

For example, if your website is more copy-heavy (vs image heavy), you don’t want to select a template that puts a lot of emphasis on visuals or products. And vice versa, if you’re selling candles, you want a theme that allows you to easily showcase your products using a highly-visual layout.

If your website is more copy-heavy (vs image heavy), you don’t want to select a template that puts a lot of emphasis on visuals or products.

Usually, themes are categorized by the “ideal user” (i.e. — “WordPress templates for writers,” or “SquareSpace template for fashion bloggers”), but it should be fairly obvious to you based on the demo site that’s featured with the theme you’re looking at.

The other thing to consider is your level of experience. Depending on your experience with building websites, there are two routes I’d recommend:

Newbie / inexperienced

If you’ve never built a website before and have NO idea what you’re doing, you may be better off going with a service like Squarespace or Wix.

Both are subscription-based services (meaning they charge you monthly), and will give you access to a set group of website templates, which you can customize yourself. What’s good about these services is they’re built for beginners, they usually include a free domain + hosting, and have pretty good customer support to help you when you get stuck.

The con with these services (at least from my point of view), is they can be more expensive, and they’re often more difficult to customize. For example, if you have a specific idea of what you want your site to look like, it may be more challenging to achieve that look using the templates they offer.

Somewhat experienced / more advanced

If you’ve dabbled in WordPress before, I’d recommend purchasing a theme (for a small, one-time fee vs a monthly subscription), installing and customizing it yourself. Even if you don’t know how to use WordPress, it’s not that difficult to learn, and once you learn it, it’s like riding a bike.

The con with going this route is you have to handle the domain + hosting (which, by the way, is not hard — I’d recommend Hover for domains and Bluehost for hosting), and if you get stuck, the team who built the theme may not be super helpful or responsive (which means you’re kinda on your own, bub).

I personally prefer the second option because I’m an experienced WordPress-user and I’m super picky about the look of my sites, but it’s 100% up to you, and neither is a bad option.

I also love (and can recommend) themes from Station Seven — they’re beautiful, easy-to-use, and their resource center is extremely helpful (I’ve never even had to reach out to the team for help).

If you’re not sure which is the right option for you, try one of the free plans with Squarespace or Wix, or try browsing a site like Theme Forest or Mojo Marketplace. You can even do a Google search like, “Feminine WordPress themes” to see what comes up.

#7: Install the demo content

This one step is what makes it possible for non-technical / non-designers (such as ourselves!) to build what feel like custom websites.

If you don’t install the demo content, you’re going to end up with an empty website with all the functionality of the theme you bought, but with no reference as to how to customize it to your liking.

Whether you went with Squarespace, Wix, WordPress, or some other service, there should always be some sort of directions on how to install the demo content, so make sure you do that first before anything else.

Once the demo content is installed, you can start customizing!

#8: Start customizing!

Grab the keynote layout and Google Docs (with all of your copy) and use them as a guide to begin laying out your content.

I’d recommend creating the navigation / menu(s) first, followed by the pages, and finally, the content blocks.

Honestly, by the time you begin customizing, the most challenging part won’t be filling in the content (since you already did all of that!), it will probably be learning the nuances of the theme (where things are, how to add certain things, reading support documentation, etc).

Just remember: regardless of the service/theme you’re using, it may be a little bit challenging at first. However, the more you tinker with the theme, the easier it’ll become over time — I promise!

What type of website are you creating?

Are you creating a website for your business or for personal use? What do you think will be the most challenging part for you?

I’d love to know! Share the details of your web project (and the challenges you’re facing) but commenting below or by emailing me: [email protected].

How to build a website when you’re not a designer or developer was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.