Years ago, right after launching my business, I decided to build a website. I could have hired a designer but honestly, I didn’t want to spend the money.

“Besides,” I thought, “how hard could it be?”

Unfortunately, I had no idea what I was getting myself into. But as the saying goes, “You don’t know what you don’t know.”

Website design—if done well—is a big project. Without planning, the result can be disappointing and expensive.

Sure, technical knowledge is important. But what often separates good design from bad comes down to other factors.

Here are a few important ones:

The focus should be on the message, not the design itself. Bold colors and animations look nice. But they’re useless if the site doesn’t build value for your business.

Design is an art and a science. It takes a lot of practice to get good at it. But the psychological impact of design can’t be understated.

Good design communicates professionalism, quality, and expertise. A poor one conveys the opposite.

Hosting is a much bigger deal than you might think. I understand the temptation to go with $2-a-month hosting, but this is one area where you really do get what you pay for.

A website without traffic is like a Ferrari that never gets out of the garage. You need to have a plan to get visitors to your site starting the day you launch.

The purpose of this post is to give you some tips on website design that will ensure your project’s success. Keep in mind that maintaining a website is an ongoing process. There will always be things to do, such as updating content or refreshing the design.

Stage 1: Start with a Plan

The first tip for website design is to begin with a strategy.

The question to answer is:

“What do you want your website to accomplish?”

Most business owners want their website to help them make sales. But that’s a given. Your goals must be more specific.

To get more clarity, consider the following:

How much can you afford to invest in your website?
Who is your audience? What type of design will resonate with them?
How will you grow your website’s traffic over time?
What do you want visitors to do when they arrive on the site?
How will your website differentiate from competitors?
What colors, typefaces, and brand “voice” will you use?
Do you have professional images? (photography, headshots, graphic design, etc.) Do they align with your brand identity?
Will you have a blog? What other content will you post to the site?
What is the timeframe for development? When do you want to launch?
How will you promote your site after it’s launched?

Of course, there are some technical details to consider a well, such as:

Search engine optimization (traffic growth strategy)
Website platform or content management system (WordPress, Squarespace, etc.)
Website hosting
Site structure (organization of pages, site hierarchy)
Website integrations (i.e., payment processing, email delivery, etc.)
Special tools for people with disabilities. The American Disabilities Act provides guidelines for websites.

Stage 2: Website Design Preparation

There are some things you need before you design anything.

A Logo and Favicon

Your logo will almost always live in the site navigation, near the top of the page. But it can also be used in a variety of other ways, such as in the footer.

If you don’t have a logo, consider getting one. You can do it yourself or hire a graphic designer. Regardless of the route you choose, make sure you have the proper file types (AI, EPS, PDF, SVG, PNG, JPG) for your logo.

If you need more information on what file types you’ll need, click here.

Having two versions of your logo can be helpful. Your primary logo is the one used most and may include a wordmark or other detailed design features. Your secondary logo should be smaller, which makes it easier to fit into tight spaces.

A favicon is the small website logo icon shown in the URL address bar. A favicon makes your site look more trustworthy and professional.

Here’s a screenshot of our favicon (also our secondary logo) in action:

Color Palette

Do you have brand colors? If not, now is the time to select a color palette for your brand.

Designate one color as an “action color”. This one will be used for buttons, call-out boxes and important features or content (i.e., links).

Typeface System

Typefaces (also called fonts) are one of the most undervalued website design elements. A nice typeface can transform an average design into something special

The typefaces you choose should align with your brand values and come in the proper weights (bold, italics, etc.). Select a typeface with a variety of weights so you’ll be able to use it in many ways.

Wireframe

A wireframe is like a blueprint for the structure of a site and its pages. This is an outline that provides a visual of your site’s layout. It includes features, navigation, and helps you plan for future expansion.

A website’s structure makes it easier to use. If your site is easy to navigate, people are more likely to stay a while and see what you offer. Likewise, if it’s difficult for them to find what they want, they’ll be gone in seconds.

One of the most valuable tips on website design I can offer is to use a wireframe before you begin work. Starting a project without having this first will end up costing you time and money. It’s the map that will lead you to the final destination—an awesome website.

Click this link to learn more about website wireframes.

Theme

A website’s theme is the foundation on which the entire site is built. The theme you choose will limit what you can and can’t do when you design your website, so choose wisely.

Stage 3: Content

Your website’s content consists of individual web pages, such as the home, about, and contact pages. Blog posts often comprise the bulk of a site’s content. Images, graphics, and videos count too.

It’s essential to assimilate all content before you begin the design process.

Why?

Creating and adding content as you design the site is like building a house one room at a time. Having all content in advance reduces the risk of building a site that is disjointed and confusing.

Make the most important content easy to access and be sure all calls-to-action are clear. A good rule of thumb is to position relevant content on the home page or no more than one click away.

As you write web copy, check links to make sure they work. Look for spelling and grammatical errors. Grammarly and the Hemingway Editor are useful tools for writing web copy.

Images make or break your website’s visual appearance. Use high-quality images and graphics to enhance your brand identity and messaging.

Too many images overwhelm visitors. Image-heavy sites also load slower, which inhibits the user’s experience.

Avoid overusing stock graphics or photographs. Resources like Adobe Stock offer a fantastic library of high-quality images. But remember that everyone else has access to these too.

Social Media Sharing Icons

Getting visitors to share your content strengthens your online reputation. To encourage sharing, provide users with an easy way to do it. SharedCounts is a plug-in for WordPress websites that tracks social media sharing activity.

Footer

This section is at the bottom of the page and usually contains links to contact, terms, and privacy. You can also use the footer to help visitors navigate by placing key links inside of it. By habit, most visitors scroll down to the bottom of the page, which means your footer will be highly visible.

Announcement Bar

Do you have something important you want to let your visitors know about? Maybe you have a big sale going or want to share some news related to COVID-19.

An announcement bar at the top of your page will grab attention so your site visitors don’t miss it.

404 Page

An error can occur when old links exist in cyberspace after you make changes to your site’s structure. A custom 404 page lets visitors know something went wrong and redirects them back to your site.

Opt-in Forms

If you want to build an email list or subscription service, you’ll need a form visitors can use to sign up. These forms are then linked to an email service that responds automatically when someone signs up.

Contact Form

A contact form makes it easy for people to get in touch with you. To increase the likelihood that people will use it, don’t ask for too much information. First name and email address should be enough.

Calls-to-Action

A call-to-action invites a site visitor to engage with you in some way. The action could be as small as clicking on a link to read a blog post or to sign up for your email list. It could also involve a much bigger step, such as buying a product.

Decide what specific action you want your visitors to take and make your calls-to-action easy for people to use. One click should be all it takes.

Stage 4: Technical Design Details

When it comes to tips on website design, most people think of the technical details. In this section, I’ll give you an overview of the key items you’ll need to take care of.

Website Hosting

Your website host is like the engine of a car. While the site is what people see, the host powers it into cyberspace. Hosting may or may not be part of your website platform plan.

Many web builder platforms include hosting. Website builders are fine if don’t want to maintain the site or worry about technical issues. But there is a tradeoff because they have their limitations.

In most cases, it’s best to go with WordPress or a similar platform with unlimited capabilities. But these (content management systems) require an independent host.

To learn more about choosing the right hosting platform, read this.

Responsive Design

You may have heard the term responsive website design. This refers to a website’s ability to perform on multiple device types and browsers. Responsive design is now a must for your website.

The screen sizes of an iPhone, iPad, a Surface, and a Galaxy are all different. The iPhone by itself comes in different sizes and desktops use a variety of screen sizes as well. A website will be rendered differently depending on the type of device and size of screen.

Web browsers play a role in how a site is displayed as well. Displays will vary on Microsoft Edge, Chrome, and Firefox.

Responsive design is essential for a good user experience. Search engines actually penalize sites that aren’t.

To learn more about this process, click here.

Search Engine Optimization (SEO)

Without traffic (aka, visitors), your website will not generate leads or sales. Period. That’s where SEO comes in.

SEO focuses on the technical performance of your site. But this process also incorporates search terms people use to find your product or service.

It’s getting tougher to get organic (free, earned traffic) traffic online. There are two reasons:

There’s more competition.
Search engines are monetizing the huge audiences they’ve built. They want more businesses to pay for traffic via advertising.

Don’t let these challenges discourage you from building organic website traffic. The time and effort invested in a traffic growth plan is certainly worth it.

Sitemap

A sitemap helps search engines crawl and index each page of your site. Without it, search engines will have difficulty listing your site in search results.

Stage 5: Launching Your Website

With the four previous stages complete, it’s now time to launch your website. In this stage, you’re checking everything to make sure it’s working as it should.

Examples are:

Do images and text align on pages for all device types? (see “responsive design” in the previous section)
Are there any grammatical errors that may have been missed?
Do all links work properly? This includes testing email and email autoresponder.

You should also create a routine maintenance schedule. This helps you stay on top of any technical errors, such as broken links, forms that quit working, etc.

Once the website is live, what problems could arise?

While the list of possible technical issues is endless, it’s still good to prepare. Here is a list of the most common website issues:

1. Your website goes down. There are many reasons for this, from serious technical problems to billing issues. Start with your host and go from there.

2. Site compromised or “hacked”. If this happens, it’s best to reach out to a web developer and get help right away.

3. Website is slow. Having a site that loads quickly (within roughly two seconds) is vital. Slow load times can cause visitors to give up on your site. Google Page Speed Insights is a great way to test your site for speed issues.

Some of the issues you uncover will be easy to fix, other won’t. For the complex technical problems, you may have to hire a developer.

4. “Not Secure” Warning. Perhaps you’ve seen the letters “http” and “https” that preceded a website’s address in the URL bar, like this:

There’s a big difference between the two. HTTPS is encrypted, while HTTP is not. Browsers now show this warning when you land on a site that has not enabled HTTPS. If people see this warning when they visit your site, you can be sure most of them won’t stay long.

Contact your web host and ask them to enable an SSL certificate. This will encrypt your website and add that extra layer of security.

5. Certain website functions quit working. Your website is built using multiple platforms and applications. Because this technology is updated constantly, conflicts may occur. Components that once worked together may stop functioning after these updates take place.

Conclusion

Building a website that enhances your brand is a major undertaking. Refer to these tips on website design to help you create a plan for success.