Web Design: How to Go from Zero to 60

By January 9, 2019 Digital
web design

Creating a website can be a long, daunting process – there are hosting providers, domain names, SSL certificates, search engine optimization… the list goes on.

But, we are constantly reminded that in order to get discovered, we need a website. Long gone are the days where television commercials and radio ads drove business: nowadays, to get discovered, you need to be online. Vendasta reports that small businesses with websites average $5.03 million in revenue per year, compared to all small businesses, averaging $3.6 million in revenue per year.

Web design and development consists of many components, so to make it more simple, we’ll break it down into four parts:

  1. Content
  2. Design
  3. Getting Found
  4. Starting Your Website

If you can check off these four categories, then your website will be ready to be launched. Let’s get started!

Part 1: Content

Site Structure

Once a user is viewing your site, you want them to stay there. There should be enough pages where the user can learn about your business, but they should not be drowning in content. Different types of websites require different amounts of pages; however, on your top navigation bar, you should aim to have between 4 and 7 pages.

Check out the Dropbox for Business homepage:

Dropbox for Business website: hero header of the homepage

At the top, there are six navigational links for the “main” pages. Yes, there are dropdown menus, but those organize relevant pages under a general topic. The first three links (Pricing, Compare Plans and Features) will be different depending on what type of website you are creating. One of these might be a link back to the homepage. Usually, these first few main pages are relevant to what goods or services are provided by the business. If they can’t find what they’re looking for on these pages, they will leave. According to Nielsen, a user is very likely to leave a website in the first 10 seconds of visiting it. However, if the user stays for more than 10 seconds, their probability of leaving becomes much smaller:

Neilsen Graph: statistics about staying on a website

If your first few navigational links are promising for the user, they will stay longer than the 10-second mark and pursue those links. Once they have followed those links, they will be more likely to explore the rest of your website and turn into a customer.

The next three links are seen on almost all websites in some variation. There is an About Us link (worded as “Learn More” on the Dropbox example), a Contact Us link (worded as “Contact Sales”), and a Call-To-Action (CTA) link (worded as “Try Free for 30 Days”). The Call-To-Action will be different for every website. For some websites, it might be the Contact link. For ecommerce websites, it might be the link to the shop page. For account-based websites, it might be the sign-up/login link. No matter what page you choose, the CTA should link to (arguably) the most important page on the website, as it is the page that turns a potential lead into a potential customer. For terminology purposes, we’ll call this a “conversion page”.

Pages

The homepage, also known as the landing page, is a glimpse into your website. When a user visits your site, it is very likely they will start on your homepage. There are three things that you must do in order to keep a user on your site and direct them to whatever it is they are looking for. First, you have to captivate the user. Second, you have to explain what your business does. And third, you have to direct them to your call-to-action page.

To captivate the reader, many websites utilize something known as a “hero header” which is basically a full-screen image with a few words and a CTA. On the right side of the Dropbox homepage, there is an image of people collaborating and being productive. On the left side, they have the text “Work better, safer, together” which tells the user that their product is about collaboration and efficiency. They also have a call-to-action button which links to their conversion page. This header will be discussed more in Part 2: Design.

To explain their business, they have a section which compares their plans:

Dropbox for Business website: Compare Plans

Notice how this section only gives a glimpse into the plans, but to find out more information, you would have to go to the “Compare Plans” page on the top navigation bar? On your homepage, you never want to give too much information, or the user will drown in content. Rather, give them sneak-peeks into the rest of the website, and they can visit the pages that they find helpful.

This section also displays the features of each plan:

Dropbox for Business website: plan features

It is important to include your features here because the user is still trying to figure out what you do, and how well you do it. Once they know the exact goods or services you provide, their decision to choose your business over others will be a lot easier.

Finally, to direct the user to the conversion page, they have a second call-to-action at the bottom of the page:

Dropbox for Business: second call to action

This is a very simple, minimal section. However, once the reader has finished reading through the homepage, you want to direct them straight to your conversion page. Granted, there are a few more sections on this homepage (such as testimonials and FAQs). These sections establish Dropbox’s credibility and aid the three main sections.

As for the other pages on your website, they won’t always follow a template as a homepage will. But, once you have created your homepage, it can act as its own template for your site. For your site’s additional pages, you can expand upon the sections that you created on your homepage as glimpses. The other pages simply need to reflect your brand and provide solutions for the user, but other than that, feel free to express yourself.

Part 2: Design

You can have excellent content, but if it’s not simple, yet elegant, the reader will move on to a different business. Design establishes credibility because if your website looks good, the user is more likely to trust you as a company. There are four aspects of web design:

  1. Typography
  2. Colors
  3. Structure
  4. Interaction.

Typography

Text styling, also known as typography, can make or break your website’s design. Generally, you only want two to three fonts on your website. Most websites have one font in their logo, one font for their navigation and headers, and one font for their body text. Some websites only use one font for everything, which also can work very well. But, if you are using more than 5 fonts on a page at once, your user will get distracted and the focus of the page will be blurred. Another important aspect of typography is the size of your text. If your text is too big or too small, it can make your site look very awkward.

Check out this site for Mint, a financial management app:

Mint website: homepage hero header

The main header (“It’s all coming together”) is the biggest font on the page. There is a subtitle, which is a lot smaller, and call-to-action buttons, which are smaller but bigger than the subtitle. Further along the page, there is a features/services section, each with its own header and subtitle. Although there is not a “best practice” for specific sizes for each of these elements, it is important to use a larger font size to highlight important messaging. A page header will always be larger than a section header, a subtitle will always be smaller than a header, body text will always be smaller than a subtitle, etc.

Colors

Similar to fonts, less is more when it comes to colors. The specific colors you use will be based on your logo and brand, but try not to use more than 5 colors on your main pages. Mint, the example shown earlier, has a two color logo (teal and white) along with black text to the side:

Mint website: company logo

Teal and white are the main colors used on the website, as shown in this screenshot:

Mint website: full homepage screenshot

The backgrounds of the images are all teal, which increases contrast and visibility. The call-to-action buttons are all orange, which helps the user to correlate a specific color with conversion. The “secondary” call-to-action buttons are all white with a teal outline, which makes the buttons more subtle (because they aren’t quite as important as the orange “primary” call-to-action buttons).

By creating color consistency and limiting the number of colors you use, your brand will be more established and more easily recognizable.

Structure

No two sites will have the same structure. However, there are a few rules to follow in order to make sure your content flows logically and effectively. Back on the Mint website, you can see at the top that the hero header fills the entire width of the screen and just about half of the height of the screen. These hero headers will always fill the whole width and at least half of the screen in order to draw the user’s eye to it right away.

Moving down the page, there is a column layout (sometimes 2 columns, sometimes 3). If you need more than 4 columns, a tabbed layout might work better:

Mint website: tabbed page layout

The user can toggle between tabs to show different features of the software (in this case). A tabbed layout has many uses, as it consolidates a lot of information into one section. This will be discussed further in the Interaction section.

Interaction

When a user is on your website, they don’t just want a static experience. If they are able to interact with your content, they will be able to learn more about your company, which will lead to more lead conversions.

If your company provides a product, a great way to incorporate interaction on your website would be to create a quote calculator that users can fill out in order to get an estimate on how much they will need to pay. Take a look at Geico’s insurance coverage calculator:

Geico website: insurance quote calculator tool

Not only does the quote calculator provide insight to the customer on what they will be paying, but it also is their first step in connecting with your company. They have broken the wall between themselves and the website, so it is now a two-way interaction. Also, with tools such as a quote calculator, you can require an email in order to access the tool. With the customer’s consent, you can add this email to your database in order to start marketing to them and further the communication.

Another example of an interactive part of a website is a chatbot. We explained chatbots in a previous blog post; to put things simply, they are messaging apps that allow you to interact with potential customers. You can see a chatbot on our site:

Outspoke website: chatbot tool

When a site visitor clicks on it, they are able to interact with your sales/marketing team. Or, you can automate the chatbot to direct users to certain pages, capture email information, and more.

As more and more businesses are going online, the design of a website is becoming more and more important. With good typography, colors, structure, and interaction, you’ll be able to set apart your website from the rest.

Part 3: Getting Found

After you have spent a lot of time on creating your content and designing your website, you’re going to want to get visitors. Unfortunately, just because you have a good-looking website doesn’t mean your traffic will immediately spike. But, there are a few things you can do to start spreading the word about your company and, ultimately, creating more customers.

Search Engine Optimization (SEO)

Search Engine Optimization, also known as SEO, can single-handedly make or break your company’s online success. When you optimize your website for search engines like Google or Bing, you are more likely to show up in the top search results when a user searches for your keywords.

For example, if one were to google ‘business card maker’, here’s what would show up:

Google search for business card maker

Not including the ads, the coveted first listing of the search results goes to bizcardmaker.com. This doesn’t necessarily mean that Business Card Maker is the best company for making business cards. However, they have optimized their site so well that when the relevant keywords are looked up, their site is shown first. There are five easy steps you can take to correctly optimize your site:

1. Use Specific Keywords

Search keywords are a list of words that you set for your website. When people search something on a search engine (i.e. Google), your website will be more likely to come up if the search term matches some of your keywords. For example, let’s say you’re selling dog food online, and some of your keywords are dog, food, pet, and feed. When someone searches “What should I feed my dog?” then your site will be more likely to come up because you had 2 keywords that matched the search term. But, don’t just put every keyword possible – you want to make sure that your website will be relevant to all of your keywords, because you might be negatively impacted by the search engine if you have irrelevant content..

2. Implement Compliant HTML

This is one of the more technical steps. As long as you aren’t coding your own website, this will be done for you by your content management system (i.e. Squarespace, WordPress, etc). Make sure your website’s HTML code has few to no errors, all of the proper meta tags, a sitemap, and a robots.txt file.

3. Utilize Alt Text for Images

Alt text, short for alternative text, is a technical attribute given to images in HTML code. The alt text of an image is simply just a description of it. If there was a picture of a jar of pickles, its alt text could just be “jar of pickles”. Alt text is important for two reasons: accessibility and SEO. For accessibility, alt text helps visually impaired users who might not be able to see images, so the alt text is read out loud to them by a screen reader. For SEO, alt text helps search engines index your side and understand it.

4. Interlink Your Content

This aspect of SEO pertains more to blogs. In your blog posts, linking to other internal blog posts is extremely important as it allows search engines to index your entire site. Linking externally to other websites also helps to establish your own site’s credibility. The same thing goes for other sites linking back to you. Establishing links both internally and externally will work wonders on search engines.

5. Reduce Loading Time

Another metric that search engines use to measure your website is your page loading time. If your pages take a long time to load, your pages won’t show up very high on search results. To reduce loading time, you can do things such as compressing images, minifying code, and using a content delivery network (CDN).

Email Lists

Collecting email addresses and building your database of potential customers can help later when you want to start marketing directly to those people via email. There are many ways you can collect email addresses on your site, but two great tools are MailChimp and Constant Contact. Both of these tools also help you to create marketing emails and send them to your list of potential customers. When you email these leads, they will remember your company and might be converted into paying customers.

Blogs

Having a blog will not only establish your credibility, but it can help turning the wheel during the buyer’s journey. You can read more about the buyer’s journey and inbound marketing here. When your blog answers a question posed by a lead, your company has given value to them. They will click around your website and try to understand what you do. Then, they might reach out to you to find out more. Or, even if they don’t reach out to you, they might sign up for your blog with their email. They will receive emails whenever you post a new blog post, but you can also send them targeted marketing emails about the specific goods or services you provide.

Advertising

There are many platforms that you can use in order to create advertisements which direct to your site. Facebook, Google Ads, and Yelp for Business are just a few paid advertising services. These tools let you target ads to leads who are interested specifically in the services you provide, or even leads who have already visited your website before. Paid advertising is not always necessary for attracting customers, and it’s also not guaranteed to attract customers. But, when coupled with other aspects of marketing, it can help to drive home sales.

Social Media

Depending on your target market, social media may or may not be helpful for you. If you are a business-to-business company, you might want to look towards other methods of marketing. But, if you are selling to consumers directly, there is a high chance that they are active on social media. According to Statistica, 77% of the United States adult population had a social media account in 2018. Depending on the age of your target market, prevalent social media accounts to have are with Facebook, Instagram, and Snapchat. Make sure your profiles are professional, reflect your brand, and offer links to your website. You can read our blog post here about finding success on Instagram. You can read our blog post here about automating, scheduling, and connecting your various social media accounts.

Even if your website is world-class, making the website is only half the battle. The other half is marketing your website and attracting visitors. There are many ways to do this, and it is important to use various lead capture methods to find success in your website and, ultimately, your business.

Part 4: Starting Your Website

To actually build your website, there are an endless amount of tools, plugins, themes, etc that you can use. In this post, we will go over 4 options: Squarespace, WordPress, a custom site, and an agency.

Squarespace

Starting at $12/month, Squarespace offers a drag-and-drop website builder coupled with hundreds of templates to choose from. Although it is the most basic of these four solutions, it is a good starting point for small businesses as it has a small learning curve and extensive customer support.

WordPress

There are two versions of WordPress: WordPress.org and WordPress.com. Bluehost gave an in-depth description of the difference between the two services. Basically, they are both owned by the same company, but WordPress.com is paid while WordPress.org is free. With WordPress.org, however, you will have to find your own web hosting provider. Sounds complicated, doesn’t it? Although WordPress is more complicated than Squarespace, it offers a higher level of customization. Most small businesses usually start with something simple such as Squarespace, and when they are ready for more customization, they make the switch to WordPress.

Custom

A custom website is when a developer writes the code for a website from scratch. This code consists of HTML, CSS, JavaScript, and possibly more languages. Although a custom site will be unique from any other website, it is strongly recommended that you use a content management system such as Squarespace or WordPress. Designing everything from the ground up is essentially reinventing the wheel, as content management systems give you the same amount of customization with less time and frustration. Maintaining a custom site requires a unique skill set that most people do not possess. To make things worse, even the smallest changes can become extremely time consuming.

Agency

Overwhelmed by all the information in this post? You aren’t alone. More and more businesses are trusting agencies to build and maintain their websites. Agencies are able to leverage the skillsets of their entire teams to not only create a website with beautifully designed custom graphics, well placed CTAs and intuitive navigation, but also do so in a way that is easy for you to maintain moving forward.

Here at Outspoke, we enjoy designing website for our clients and have found that through collaboration we are able to achieve undeniable results. If you are interested in how we can help you create the website of your dreams, don’t hesitate to shoot us a message!

Final Thoughts

Rome wasn’t built in a day. And your website won’t be built in a day either. Designing a website is an ongoing process that won’t stop once you launch your site. To keep attracting customers, you might need to publish blog posts, advertise your services, update your pages, revise your keywords, and more. It is a long and crazy process, but in the end a great website will allow you and your business to achieve your lofty goals and provide the world with an amazing product or service.