Tips on Website Design That Will Save You Time and Money

Do you need a new website?

Are you trying to decide whether to hire a designer or do it yourself?

If so, read this post to avoid many of the website design mistakes companies make. And click this link to get our free website design checklist.

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

Besides, I thought, how hard could it be?

Unfortunately, I had no idea what I was getting into.

Many business owners I meet are afraid to waste money on a site that doesn’t generate engagement and convert leads. While most know how essential a site is, they hesitate to hire a designer because they aren’t sure how to interview one or they are afraid of overpaying.

So, they consider doing it themselves.

But inexperienced designers struggle with the web design process. In many cases, businesses that build their own websites end up with a result that damages the brand—sometimes without knowing it. Others get frustrated and abandon the project or turn to social media as an alternative.

Before building a site, all business owners should know a few critical website design principles, whether they hire a professional or do it themselves.

Here they are:

The brand dictates design.

Websites should generate interest in the brand and convert visitors into buyers. Unfortunately, many business owners think bouncing images and sliding text keep users on the page. They don’t.

A website should show people how you help them and why they should care—all within a few seconds. Otherwise, they will leave your site and never come back.

Website design is an art and a science. 

It takes time and practice to master the craft of website design. The technical aspects are sometimes overwhelming. Design guidelines and rules apply, but creativity plays an integral role as well.

The quality of a website’s design makes a significant psychological impact on the audience. A polished website communicates professionalism and expertise. A poor design conveys the opposite.

Hosting is critical for website performance.

Many companies overlook the significance of web hosting. Low-cost hosting solutions often lack the capabilities required for optimal performance.

For example, load speed is essential for search engine performance and customer experience. But shared hosting (typically the cheapest option) is slower and limits the designer’s ability to improve speed.

A website without traffic is like a Ferrari that never gets out of the garage. 

Companies invest in websites all the time without having a plan to reach their target market. But a traffic strategy should be organized before you launch the site, not after. What is the point of investing in a website without first knowing how people will find it?

Click this link if you want to get website traffic.

The following tips on website design will help you avoid mistakes and create a site you can be proud of.

Stage 1: Start with a Plan

Design goals must be clear for the project to be a success.

The question to answer in this stage is:

“What do you want your website to accomplish?”

To gain clarity on the site’s purpose, design, and use, get specific about:

• Budget

• Who the audience is

• Brand style

• Traffic strategy

• Calls-to-action

• Images (i.e., photography, headshots, graphic design)

• Content (i.e., blog posts, case studies, and reviews)

• Timeframe for development and launch date

• Post-launch promotion

I’ll provide more details on most of these in sections that follow. But let’s explore a few of the primary concerns business owners have about a website project.

Budget

With design, you usually get what you pay for. But that doesn’t mean you have to spend $10,000 on a website.

So, what does it cost?

It depends on who you ask.

But let me ask this:

Would you rather spend $3,000 on a website that builds value for your brand, or $500 on one that does nothing to help you grow?

Rather than focus on price, look at the value you receive. To build a branded website that will make an impact and grow revenue, you will have to make an investment.

The Audience

To create a website that appeals to your audience, it must align with their preferences.

To learn more about your target customer’s preferences, explore other brands they like. What products do they buy?

Once you know what some of them are, look at the websites from those brands. This will give you an idea of design features to incorporate on your site.

Technical Details

There are several technical details you must address as well, such as:

• Performance optimization

• Platform (i.e., WordPress, Squarespace)

• Hosting

• Site structure and hierarchy

• Website integrations (i.e., payment processing, email delivery)

• ADA compliance (The American Disabilities Act provides guidelines for websites.)

Read this post to learn more about how your website can strengthen your digital brand.

Stage 2: Website Design Preparation

There are some things you need before you design anything.

A Logo and Favicon

A logo is the most prominent brand element on your website. It will almost always live in the site navigation, near the top of the page, and 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 file types, click here.

It’s helpful to have two versions of your logo. The primary logo design is used most and may include a wordmark and other detailed design features. Your secondary logo should be smaller and is easier to fit into tight spaces.

A favicon is the small 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 (and secondary logo):

Color Palette

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

A typical palette consists of three colors. The primary color is usually for text and major design elements. A secondary color works well for accents. The third, and usually the most vivid, will be an “action color” for buttons, call-out boxes, and links

This is an example of a color palette:

READ MORE: 17 Minimalist Color Palettes for Your Next Design

Typeface System

Typefaces (also called fonts) are one of the most underrated design components. A nice typeface can transform an average design into something really special.

The typefaces you choose should align with the brand’s image and work well together. It’s best to choose a typeface with several weights (i.e., bold, italics) because it can be used in a variety of ways.

Read this post if you need help with typography.

Wireframe

A wireframe serves as a blueprint for the website’s structure. This outline provides a visual for the site’s layout, including features and navigation.

A website’s structure is important because it addresses ease of use. If your site is easy to navigate, people are more likely to click through it to see what you offer. Likewise, if it’s difficult for them to find what they want, they will leave. A wireframe is the map that will lead you to the ultimate destination—a fantastic website.

Click this link to learn more about website wireframes.

Theme

A theme is like the website’s foundation. Themes provide design features, layout, and other front-end elements users will see. Once you select a theme, you won’t be able to change it without damaging the site, so choose wisely.

Read this article to learn more about themes.

Stage 3: Content

Your website’s content consists of individual web pages, such as the home, about, and contact pages. Blog posts often account for most of a site’s content, but images, graphics, and videos count too.

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

Why?

Adding content as you design the site is like building a house one room at a time. Developing content first reduces the risk of building a disjointed and confusing site.

Make the most valuable content easy to access. It is best to position relevant content on the home page or only one click away.

As you write web copy, include credible sources to build trust.

Once site content is complete, check links to make sure they work. Edit text for spelling and grammatical errors. Grammarly and the Hemingway Editor are helpful tools for writing web copy.

Images make or break your website’s visual appearance. Use high-quality images and graphics that apply to site content. Images with vague meanings often confuse or bore users.

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

Avoid overusing stock graphics or photographs. Resources like Adobe Stock offer a wealth 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 an add-on for 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 pages. You can also use the footer to help visitors navigate the site by placing key links inside of it. By habit, most users scroll down to the bottom of the page, which means your footer will be highly visible.

Announcement Bar

Do you have something important to say to your visitors? Maybe you have a big sale going on 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 links break or change. 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. The form connects to an email service that generates a response when someone joins your list.

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. The action could be as small as clicking on a link to read a blog post or sign up for your email list. It could also involve a much more significant step, such as buying a product.

Decide what you want visitors to do when landing on the site and make calls-to-action prominent.

Stage 4: Technical Design Details

In a post that gives tips on website design, it’s impossible to ignore the technical details.

Here they are:

Website Hosting

Your website host is like the engine of a car. In comparison, the website is what people see, but the host powers it into cyberspace. 

Hosting may or may not be part of your website platform plan.

Many web builder platforms include hosting. These solutions are fine for those who don’t want to maintain the site or want to avoid technical details. But there is a tradeoff.

Self-hosted platforms have limitations. It may not be possible to implement certain features. You may not be able to improve a site’s performance because you won’t have access to the site’s server.

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

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

Responsive Design

Responsive design refers to a website’s ability to adapt to various devices and browsers.

The screen sizes of an iPhone, iPad, a Surface, and a Galaxy are unique. Likewise, Microsoft Edge, Google Chrome, and Mozilla Firefox are independent web browsers.

Responsive design enables the site to adjust and provide the optimal viewing experience.

I’ll use an example to illustrate how devices and browsers affect website display.

The width of iPhone screens ranges from 4 to 6.7 inches. So, a website’s display may change, depending on the site’s design and the screen’s size.

Responsive design is essential for a good user experience. Unfortunately, search engines penalize sites that aren’t responsive.

To learn more about responsive web design, 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 ensures optimal performance on search engines. This process also leverages 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:

1. There is more competition.

2. By limiting organic reach, search engines entice businesses to advertise on their platforms. This is their way of monetizing the vast audiences they have built. Don’t let these challenges discourage you from building organic website traffic. The resources invested in a traffic growth plan pay long-term dividends

Click here to learn more about creating an SEO strategy.

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.

Read this to learn more about setting up a sitemap.

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?

• Do all links work?

• Test emails addresses and contact forms.

• Check site speed to gauge performance.

To ensure that your site performs well, create a routine maintenance schedule. A regular site checkup allows you to discover problems before they can do much damage.

Once the website is live, what problems could arise?

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

1. Your website goes down. There are many reasons for this, from server failure to billing issues. Start troubleshooting by contacting your host.

2. Site compromised or hacked. If this happens, reach out to a web developer or IT specialist and get help right away.

3. Website is slow. Having a site that loads quickly (within three seconds) is vital. Slow load times can cause visitors to give up and go to a competitor’s site.

Google Page Speed Insights is a free tool you can use to test your site’s speed. Some issues you uncover will be easy to fix, and others won’t. For 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:

5. Certain website functions quit working. You may use several platforms and applications to build your website. But conflicts can arise from constant updates to these apps.

Start by disabling each app to locate the problem. Again, if you need help, you may have to reach out to a designer or developer.

Conclusion

Building a website that enhances your brand is a major undertaking.

If you have questions, email me personally at chris@goldenvineyardbranding.com.

Until next time,

Chris