Before you DIY your Website, READ THIS...
Setting up for Success
Now, I know that jumping right into your web design platform, picking a template, changing styles and fiddling the layout may be tempting, but there’s a much better way to go about doing things in order to set yourself up for success.
I promise you, having a coherent website strategy before you even hop on your hosting and design platform will save you so much time in the long run and ensure your final website product is the best possible representation of your brand and business.
In this blog post I’m sharing some of the biggest DOs and DONTs of website design, plus best practices you'll want to know before you even start designing!
I'm also going to provide you with a website checklist and audit that you can download to help you through this process.
Let's get started!
Who, What, Where, How
Before you even start designing you NEED to be clear on these things:
Who is your website for - this relates to your niche and ideal client.
What is the problem you solve - this relates to your services, programs, offerings, products, etc.
Where is everything going on your website - this relates to the strategic content layout.
How does the website visitor travel through your website - this relates to the visitors journey.
Let's dig into these a little deeper...
Most of you already have an ICA (ideal client avatar) mapped out - if not, I would highly suggest doing that before you start your website! If you don't know who your website is for, how are you going to be able to attract them? If you really want to build a relationship and sell to a certain audience or niche, you need to know who that audience is of course! If you know exactly who you’re trying to reach, you can be way more effective in your website style and voice.
A few things to consider when thinking about your ideal website visitors:
Gender & age range
Biggest struggles/challenges in life & work
Their personal goals
Books they read
Who they look up to as role models
Which social media channels they use
The more you can hone in on this first step and make your website visitor feel like your business and offerings were made just for them, the more likely they are to take action and make purchases on your website.
When it comes to the what of your website, this is all about the purpose and problem that you solve for your ideal visitors. This may become apparent as they begin to read through your website and view your services, but you want it to be known as soon as someone lands on your homepage. The best way to do this is through a tagline.
Every business (and therefore website) should have a one-liner that describes what the business does, who it serves, and what the outcome is.
This may be similar to what you have in your Instagram bio, which is also known as an "I help" statement.
For example, my tagline is: I help wellness entrepreneurs develop their online presence and implement strategies that generate leads
Give some thought to your tagline before you begin your website. You'll want to have this displayed front and center on your homepage!
Moving on to the the where of your website - this is all about organization! Instead of building out your website and coming up with the pages and content on the fly, we’re going to take a more intentional route.
Before you start designing, it's important to have all of your content ready and plan out where exactly you want it to go a.k.a what pages you need to develop for each piece of content.
If you’re DIYing your website (which I assume you are), writing out your website copy in a Word doc is just fine. If you are doing this as a collaborative effort with a website designer or a team of some sort, Google docs is the best way to go so you can share your copy and have the team members edit and update the doc.
Create folders or different documents for each page of your website, ex. home page, about page, services pages, contact page, etc. Then create your copy for each page.
Similarly, pull together all your images into a folder on your Desktop or Google Drive and decide which images are for which pages.
Having this all organized before you start designing will save you SO much time fiddling around on the platform. Ultimately, this will lead to a much quicker and more enjoyable design process.
Finally, getting to the how of your website. This is basically, like holding your visitors hand and walking them through your website in exactly the route you want them to visit it in, a.k.a the visitors site journey (how they move through your website).
To implement this, think about what makes sense for your preferred route. How do you want your visitors to move through your website in a way that would encourage them to make a purchase?
If someone starts on your home page, maybe you want them to go to your about page next so they can learn more about you or your business. Then maybe you want them to review your services pages, and from there you want them to contact you for a consultation.
In order to get visitors to move through your site with intention or in a determined route, you need to add a "Call To Action" (CTA) on each page.
A CTA may be a button, a link, a photo that acts as a link, etc. Basically some sort of super noticeable thing that clicks through to the next page in the route.
NOTE: Not every page of your website needs to be in the main route, but for sure all the pages in your navigation bar need to be included. Only the important pages go in your main navigation.
Awesome! Now that you have the who, what, where, and how of your website figured out we can move on to some important do's and dont's!
The DO's & DONT's of Web Design
Within the web design community there's a generally known set of best practices to ensure your website is as appealing and effective as possible.
I'll give you the quick run down here, so you can feel confident you're making decisions based on whats most effective, and not just personal preference.
USE BLURRY OR POOR QUALITY PHOTOS
The #1 thing that will make or break your website - PHOTOS. No photo is better than a poor quality or blurry photo. Only use crisp, high-res, professional quality photos on your website. I'm afraid to say, nothing else will cut it.
USE TOO MANY COLOURS
I know it can be fun to get creative here, but keep your colours simple and on brand. Your website should have a consistent look and feel that matches your branding. If you haven't had any branding done yet (logo, colours, fonts, etc.) a great way to keep consistency is to pick a total of 3 colours that you think look good together and represent your brand's vibe.
GET FANCY WITH NAVIGATION WORDING
Keeping a website's navigation options clear is vital. A confused mind always says no (or in the case of a website, closes your site tab). While I do encourage you to add personality to your website, avoid using creative and confusing titles in your navigation options. Put only the links which are most vital to meeting your website goals in your top navigation, and all the rest in the content of your pages or footer. A rule of best practice is to have no more than 5 items in your top navigation, however, the less, the better.
HAVE DISTRACTIONS OR EXTRA LINKS ON AN OPT-IN PAGE
On any page where your purpose is to get someones email - simply remove all other options. When I have an opt-in gift/lead magnet I generally have a link to a landing page, with no footer, no header, no links, just a simple description and an opt-in box. When opting in is the only action you can take on the page, that page will convert, well!
CENTER ALIGN MULTIPLE LINES OR PARAGRAPHS OF TEXT
Center aligning for titles and 1 liners of text is fine, however center aligning paragraphs of information is frowned upon because it's difficult to read. When you center your text, the starting place of each line changes. This forces the reader's eyes to work harder to find where each line begins to continue reading. Without a straight left edge, there is no consistent place where readers can move their eyes to when they complete each line.
DETERMINE 1-3 WEBSITE GOALS
It's important to understand your website's goals, and the Calls To Action you want your site visitors to act on. Are you trying to book client calls, sell products, have visitors sign up to your email list? Determining your website goals and primary CTA's should happen prior to your site design beginning.
MAP OUT A CONTENT STRATEGY PRIOR TO STARTING ON THE WEB DESIGN
To get visitors to take action on your CTA's, it's best to map out the content strategy. It's important to know what's going to go on your site and how your content will flow, leading your visitors to your website's ultimate purpose. A content strategy helps you determine your most important content, and arrange your website around your primary CTA's and the visitors site journey.
ALLOW FOR AMPLE SPACING ALL THROUGHOUT THE DESIGN
Design-wise websites with ample spacing around the edges of the site, and in between content on each page makes a site more visually appealing by making it feel more light and airy as opposed to cramped and heavy. This is known as "white space".
HAVE 1 CLEAR CALL TO ACTION ON EVERY PAGE
On blog posts, ask readers to comment, share, download a related opt-in gift, etc. On pages of a site, lead visitors to the sales page, contact page, opt-in page, etc. Every page should have a direction of where to head next. For optimal effectiveness, give just 1 call to action, as opposed to many.
ONLY PICK 3 FONTS
A website should have a consistent look and feel to it that matches your branding. If you haven't had any branding done yet (logo, colours, fonts, etc) a great way to keep consistency is to pick a total of 3 fonts - a body font, heading 1 and heading 2. If you want to differentiate some text you can always utilize the bold, italic and uppercase functions.
SET BODY FONT SIZE TO AT LEAST 16PT
Determining the perfect font size has gotten more difficult over the years with the variety of screen sizes that websites are being viewed on, but a safe rule of thumb is at least 16pt-18pt font for body text.
KEEP IT SIMPLE
With every decision you make when creating your website just know that simple is almost always the correct answer. A tell-tale sign of a DIY'ed website is a hot mess of detail overload with many bits of content screaming for attention at every turn.
There you have it, you're basically a website designer now!
I know this is a lot of information, so I've create a super awesome web design checklist that you can go through when creating your own website.
If you already have your website done, you can still use this checklist to perform an audit on your site and make sure it meets all the requirements.
This is a detailed 3 page checklist that makes sure you won't forget anything mentioned in this blog post and more! It covers content, SEO, design, and functionality.
Click the link above to get the checklist sent to your inbox. You can start implementing it right away!
Good luck designing and have fun with it :)