Years ago, right after launching my business, I chose to build my website. Of course, 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 didn’t know what I was getting into. But as the saying goes, “You don’t know what you don’t know.”
Website design—if done well—is an enormous 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 messaging, 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 quality of a design makes a critical psychological impact. 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 get what you pay for.
A website without traffic is like a Ferrari that never gets out of the garage. However, it will help if you plan to get visitors to your site starting the day you launch.
This post gives 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. So, your goals must be more specific.
To get more clarity, consider:
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) 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 launch?
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 (such as WordPress or Squarespace)
- Website hosting
- Site structure (organization of pages, site hierarchy)
- Website integrations (i.e., payment processing, email delivery)
- 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 a logo can also be used in various 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.
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:
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” for buttons, call-out boxes, and essential features or content (i.e., links).
This is an example of a color palette:
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). Select a typeface with a variety of weights so you’ll be able to use it in many ways.
A wireframe is like a blueprint for the structure of a site and its pages. It serves as an outline that provides a visual of your site’s layout. It includes features and 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 awhile 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—a fantastic website.
A website’s theme is the foundation for the entire site. 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.
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 making a site that is disjointed and confusing.
Make the most valuable 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.
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 an add-on for websites that tracks social media sharing activity.
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.
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.
An error can occur when old links exist in cyberspace after making changes to your site’s structure. A custom 404 page lets visitors know something went wrong and redirects them back to your site.
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 linked to an email service that generates an automatic response when someone signs up.
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.
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 sign up for your email list. It could also involve a much more significant 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. Then, make sure users can access it with one click.
Stage 4: Technical Design Details
When it comes to tips on website design, most people think of the technical details. This section will give you an overview of the necessary items you’ll need to address.
Your website host is like the engine of a car. In comparison, 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 acceptable if they 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.
You may have heard the term responsive website design, which 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 various sizes, and desktops use various screen sizes as well. Therefore, a website will be rendered differently depending on the screen’s type of device and size.
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. Unfortunately, search engines penalize sites that aren’t.
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:
1. There’s more competition.
2. Search engines are monetizing the vast 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 are undoubtedly worth it.
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.
- 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 properly? Test emails and email autoresponders.
It would help if you also created a routine maintenance schedule. A schedule enables you to stay on top of any technical errors, such as broken links or forms that quit working.
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 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, 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:
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, which encrypts your website and adds an extra layer of security.
5. Certain website functions quit working. You will use multiple platforms and applications to build your website. Because this technology is updated constantly, conflicts may occur. Components that once worked together may stop functioning after these updates take place.
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.
In the meantime, if you have any questions or need help designing a strategic website, email me personally at firstname.lastname@example.org.
Until next time,