Well-designed websites are central to a company’s marketing efforts; not only do they increase brand awareness, but they grow sales with enticing promotions, clear messaging, and compelling calls-to-action. To be sure your small business website design is effective, includes strong branding, industry-specific keywords, educational content, and a clear path for purchasing your products/services.
Design is only one part of a website’s success. To ensure visitors use your site without interruption, it’s critical that you have a reliable site host like Bluehost. Not only do they guarantee 99.9% uptime, but they are a recommended host for WordPress—the site-builder we focus on in this article. Get your own Bluehost account with five free email addresses and a free domain today for less than $3/month.
Here’s how to design a website in 10 steps:
1. Set Up Web Hosting
Before you can design your website, you need secure web hosting. Web hosting providers provide servers where you can store all of your website content, accessible via a domain such as www.yourbusiness.com. While there are a number of hosts available, we recommend Bluehost; it is easy to use and costs just $2.95 per month. To set up hosting, visit Bluehost.com, choose your plan and domain name, complete checkout, and enable your free SSL certificate.
Choose Your Web Hosting Plan
Navigate to Bluehost.com, then click on the “Get Started” button in the center of the screen. There you will see the three plans to choose from: Basic, Plus, and Choice Plus. All plans come with unmetered bandwidth for unlimited website traffic, a free domain name, a free SSL certificate, a 99.9% uptime guarantee, free customer support, and automatic backups.
Most small businesses just starting out will find the entry-level Basic plan suits their needs. The plan includes hosting for one website, 50GB of storage, and five free custom email addresses. Those who need more storage—to handle large media files on their website—should consider the Plus plan for unlimited storage. After choosing the plan that’s right for you, click “select.”
Choose Your Domain Name (If Applicable)
On the next screen, you will be prompted to add an existing domain to your site or register a new one. A domain is the URL for your website, such as www.yoursite.com. All Bluehost plans include a free domain name, so if you do not already have a domain, add in a domain you would like in the “new domain” field, then click “next.” If your desired domain name is available, you will be notified on the following screen. You can also check availability using the widget below.
For example, if your business is called Joe’s Pizza, and www.joespizza.com is not available, try www.josepizzaboston.com. Avoid using words that are not typically associated with your industry, however.
Also, be sure to select an appropriate extension, which is the three-letter business category indicator following the period. Generally, businesses are advised to use the .com extension for their URL (signifying “commercial”).
After finding a domain name that is available, you will be brought to the checkout page. Here, input your personal and contact information, confirm the hosting plan is correct, input payment information, and click the “submit” button at the bottom of the page.
The next page will be your confirmation page. Click the “Set password” button at the bottom to create your account password and access your Bluehost account.
2. Log In to WordPress
There are many different site-builders available on the internet, from WordPress to drag-and-drop builders such as Weebly and Wix. While drag-and-drop builders are easier to use, content management systems (CMSs) like WordPress offer countless customization options; for that reason, we’ll be using WordPress as the example in subsequent steps. To set up your site with WordPress, use the one-click installation option in your Bluehost account.
From the Bluehost dashboard, you will have the option to “Log in to WordPress.” Click this button to trigger the one-click WordPress installation.
After logging in to WordPress through Bluehost, you will be brought to your new WordPress admin dashboard. This is where you will design and build your WordPress website.
3. Select & Install a Theme
WordPress themes are predesigned templates that allow users to add or modify website content easily. Depending on the theme, there are significant design and content customization options available. WordPress comes with hundreds of free themes, which can be found by hovering over “Appearance” in the left-hand menu on the WordPress dashboard, then clicking “Themes.”
From the “Themes” page, click the “WordPress.org Themes” tab in the horizontal menu to browse all of the free WordPress themes available. Alternatively, click “Premium Themes” for paid themes or “Upload” if you have purchased a theme separately.
The WordPress themes page organizes all themes by five primary categories, accessible in the top horizontal menu: Featured, Popular, Latest, Favorites, and Premium. You can browse themes by clicking on these category links, or by clicking on “Feature Filter” and selecting the theme functionality that’s critical to your business, such as online bookings and scheduling, menus, services pages, ecommerce capabilities, and more.
You can also search all available themes by keyword; simply type in your search phrase in the “Search themes…” box at the top right of the screen. Matching themes will populate below. Choose the theme that most closely fits your business’ needs; while most themes will offer many customization options that can be used when your business grows, it’s important to keep early-stage customization to a minimum so you can get your site live quickly.
When you find a theme that you think might be of interest, hover over the theme and select the “Preview” option. This will open a live preview window that shows you how the website theme looks and works. After choosing the theme you want to use, click “Install” and then “Activate” in the lower right-hand corner.
Drag-and-drop builders offer similar themes that you can edit with custom content blocks. For example, Weebly offers dozens of themes categorized by business type or function, and Wix offers hundreds of templates with easy-to-add features like live chat and member login modules. Visit their websites to learn more.
4. Customize Your Website’s Appearance
The next step in designing your website is customizing the appearance of universal site elements, or the elements of your site that appear on all pages. These include your site title, background, color scheme, menu, header, and footer. To customize these elements, go to “Appearance” and click “Customize.” From there, you will have the option to customize each of these elements. For guidance and inspiration, read our article on top website design ideas.
Add Title & Tagline
Your site identity is comprised of the website title and tagline, as well as the logo and favicon. The title appears on every page, while the tagline often appears below the title on the homepage. Both appear on browser tabs. To add your title and tagline, go to the “Appearance” tab in your WordPress dashboard and then click on “Customize.” Select the “Site Identity” tab from the menu options.
Input your “Site Title” and “Tagline” in the corresponding text boxes. Typically, your site title will be your business name and your tagline will be a short slogan or description of your business that quickly identifies what your business does.
For example, a dental practice in Raleigh named Raleigh Family Dental would likely use “Raleigh Family Dental” as its title and something like “Our dental practice is our family” as its tagline. Taglines should be short (eight words or less), convey your mission or business philosophy, and include one or two industry keywords to help your site rank in search results. In the example above, “dental practice” is the targeted keyword.
Upload Your Logo as Your Favicon
Next, upload a site icon, also known as a favicon. This is the small graphic that appears next to a site title in a browser bar. The graphic helps website visitors to quickly identify your site’s browser tab from many that are open at the same time. Upload your favicon by going to “Appearance,” selecting “Customize,” then “Site Identity.” From there, click “select image” to upload your favicon. Your image must be in JPEG, GIF, or ICO format.
If you don’t have a logo, create one or hire a graphic designer to create one for you. Those without a good deal of design experience will likely want to outsource to the pros to ensure they get a high-quality, professional logo. We recommend hiring a graphic designer from Fiverr, which costs as little as $5.
The size of your site icon needs to at least be 512×512 pixels. Remember that the icon will appear as a square, so be sure your icon isn’t a rectangle or it will either get cut off or be too tiny to see.
Also, notice that site icons are typically on a transparent background so that there is no background on the icon. You can remove your background by using a free online editor tool such as LunaPic, where you upload your icon, click the background area that you want removed, and then download a new version of your icon with a transparent background.
Customize Background, Fonts & Colors
Header and page backgrounds, fonts, and colors display on every webpage, and are customized separately from site identity elements. Set your website header color by clicking on the “Colors” tab under “Customize.” Then select the color you want your website header text to be. Click “Publish” in the upper right-hand corner of the screen to save changes.
To change the general page background color, return to the main dashboard menu, click on “Appearance,” then click on “Customize” and select the “General Options” tab. Next, select the “General Styling” option. Choose your site color scheme and fonts. You will notice there are several options: you can change the standard background color, add a background image, and change the static link color as well the color of links when visitors hover over them.
It is recommended that your colors match your branding, so consider the colors in your existing logo carefully before selecting background and link colors. Also, it’s recommended that you choose a background color that is not distracting or would make it difficult to read site content. While you can upload an image as the background, it’s recommended you stick with a solid color.
To change your font, go back to the “Customize” menu item under “Appearance” and select the “Typography” tab. Here, change any font and styling to match the aesthetic of your brand. Be sure to keep fonts consistent and legible across your site. After making all design selections and changes, click “Publish” from the upper right-hand corner of the screen to save your changes.
5. Build Out Your Web Pages
Every website is comprised of pages, which house themed or categorized content. For example, a landscaping company website might have “Contact,” “About Us,” and “Lawn Services” pages. Each page is created separately, which is done by clicking “Pages” from the left-hand menu and then selecting “Add New.” After building out your pages, select which one will serve as your homepage.
To create a new page, go to your WordPress dashboard and select “Pages” from the left-hand vertical menu. Then click the “Add New” option. Add your page title; this is the name of your webpage, which will be displayed in the site menu and at the top of the page.
Continue to add pages by repeating this process. Create a page for each content category you need. You must create a homepage, often titled “Home,” and it is also recommended that you create pages to house basic business information, such as “About Us,” “Contact Us,” and “Products/Services.”
Update Homepage Settings
After creating your “Home” page, you need to tell WordPress that it is the page you want to use as your homepage, or the page visitors see when they type in your domain name. To do this, go to “Appearance,” then “Customize,” and finally, to the “Homepage Settings” option. First, change the “Your homepage displays” option to “A static page.” Then, use the drop-down menu to select which page should serve as your homepage.
6. Customize Your Web Pages
Web pages are comprised of copy (or text) and media, such as images and videos. To add content to your pages, select either the text or image icon in the upper right-hand corner of the editor (as shown below). Then, type and format copy or adjust visual elements until the page is complete. Once you have completed your page, click the “Publish” button in the upper right-hand corner of the screen.
Add Site Copy
Site copy is the text of your web page. To add site copy, open a page and click on the bar that says “Start writing or type.” You will be able to format the copy that you add using a pop-up HTML editor. This allows you to change text alignment, add various stylings (header or paragraph style), add links, and bold or italicize copy.
For web pages that include a lot of copy, be sure to break it down into small, digestible chunks of information, rather than using long paragraphs. This makes the content easier to read. As a general rule of thumb, it’s recommended that paragraphs be no longer than five lines long.
Also, keep in mind that you will likely be serving readers with different reading habits and schedules. To serve them all, provide enough information in headers and introductory paragraphs to satisfy a 30-second reader who is likely just skimming content, and more in-depth content to serve the 30-minute reader who will likely read your content from start to finish.
Finally, be sure to use specific keywords in your site copy to help your content appear in Google search results. Research words and phrases that Google favors by visiting the Google Keyword Planner, then add the top-ranking keywords naturally to your content. This will increase your site’s visibility.
To complement your site copy, add media such as images and graphics to your pages. When creating and choosing media, remember that your media needs to be relevant to your webpage and its copy. Great media that aligns with your branding and copy will help further convey your page’s overall messaging. Add media by clicking the image icon in the upper right-hand corner of the page editor, then selecting an image or video from your media files.
On top of choosing media that is relevant to your page’s copy, you also need to be sure that your chosen media is high quality. Great images and videos that are low-quality will fail to convey your message, and oftentimes will undermine your message completely.
For those without graphic design experience, consider using a free tool like Canva. It features a drag-and-drop interface, which anyone can use to create professional-looking graphics. It also includes hundreds of design templates in various sizes that give users a good starting point for designing graphics. If you’re more comfortable outsourcing graphic design, consider hiring a professional designer from Fiverr for as little as $5.
Once you have added a title, copy, and media to each web page, click “Publish…” in the upper-right-hand corner of the page.
7. Create Your Menu
Every website has a menu that allows visitors to navigate to individual pages on the site. Typically, this is part of the header, but can be placed in various locations depending on your theme. To add your menu, click on “Appearance” in the WordPress dashboard, then select “Menu” from the menu options. Create a new menu, title it, and then add the pages you want as part of your main navigation.
Build Your Menu
There are two common menu orientations: centered or on the right-hand side at the top of every page. Neither one is better than the other; it’s simply a design preference. To create your menu, click the “Appearance” tab from the left-hand menu, then select “Customize” and “Menus.” From the “Menus” page, click the “Create New Menu” button.
Start by naming your menu. This is for your own organizational purposes, so use a name that you can easily identify. If you only plan to have one menu, keep it simple. Next, select locations where you want your menu to display, such as “Top Bar,” “Main,” “Footer,” and “Mobile.” Most only use the “Main” and “Footer” options, as those display the two standard menus in the top menu navigation and in your footer. Click “Next” in the bottom right-hand corner of the screen.
Now that you have indicated where you want your menu to be displayed, you need to tell WordPress which pages to include in your menu. To do this, click the “Add Items” button.
A new column will appear to the right displaying all of the pages you have created. Click the “+” to the left of each page you want to add to your menu. As you select pages using the “+,” you will see them appear in the list on the left-hand side. Be sure to include submenu pages—pages that will be nested under main menu items—as well.
Reorder your menu options by clicking on one of the pages and dragging it to a different place on the menu. To add submenu options, drag the page slightly to the right below the page you want it to be nested under, then release. Click the “Publish” button at the top of the page to save your changes.
8. Customize Your Header
Your header design will automatically be set to match the theme you installed, so you may not want to change it if you like the theme defaults. If, however, you wish to change the style of it, go to “Appearance” and click the “Header” option.
Here, you can select a background color, image, or video. For the most part, header design should be kept clean, meaning using a solid color that contrasts your text color, such as a white background with black text. This will keep your header more legible and your website aesthetic and more professional. You can also edit the position and size of your header.
9. Install & Activate Plugins
Plugins are a piece of software that can be added to a site to increase its functionality. Plugins can give a site the power to do anything from live chatting with site visitors to accepting payments. First, consider the basic plugins you will need for your website, then install them by going to the “Plugins” menu option and selecting “Add.” Find your desired plugin, and click the “Install” button to the right of the plugin name.
Consider Necessary Plugins
While plugins give WordPress websites a number of different functionalities that are often specific to certain business types, there are some plugins that nearly every website should have. These include plugins for increased security, search engine optimization, and marketing tools. Consider the ones below as you build out your site.
Here are the plugins every WordPress business website should include:
- Drag-and-drop site builder: While the built-in WordPress editor is sufficient for some site owners, using a drag-and-drop website builder plugin allows you to customize web pages more easily with an intuitive editing interface. We recommend starting with a low-cost one like Elementor.
- Search engine optimization (SEO) plugin: Strategically writing great site copy with your keywords in mind is good, but SEO tools, such as the wildly popular Yoast SEO plugin, help you use the right keywords to ensure your site ranks well in relevant search results.
- SSL certificate: An SSL certificate allows you to process payments through your site and helps with search rankings. After getting an SSL certificate, which is available for free through many web hosting providers such as Bluehost, you still need to install the certificate on your site. Plugins such as Really Simple SSL make it easy to install your new SSL certificate on your site.
- Security and performance plugins: Additional security and performance plugins, such as Jetpack, help maintain a site’s security while also helping to increase its load times. For more guidance, read our article on keeping your website secure.
- Marketing tools: There are a number of marketing plugins that can help a site convert visitors to customers using lead capture forms, email marketing widgets, and live chat functionality. Consider your existing marketing tool set and search the WordPress plugin database for plugins that can integrate these tools with your website.
Find & Install Your Plugins
Regardless of the plugin you are installing, they are all installed the same way. To install a plugin, go to the “Plugins” tab in the left-hand vertical menu, then click “Add New.”
From the “Add Plugins” page, browse or search for plugins. For example, if you are looking for a website builder, search “website builder” in the search bar on the right-hand side of the screen above the plugin results. Once you have found the plugin you want, click the “Install Now” button to the right of the plugin’s name.
Once the plugin has been installed, the “Install Now” button will convert to a blue “Activate” button. Click the “Activate” button to enable the plugin. You will now see your plugin in the left-hand menu, as well as under “Installed Plugins” in the “Plugins” tab. Click on either menu item to edit plugin settings. Repeat this process for all of the plugins your site needs.
10. Publish Your Website
Now that your site has been built, it’s time for your site to go live. To do this, you need to publish it by clicking “Bluehost” from your WordPress dashboard menu, then selecting the “Launch your site” button. Now, when you type your domain name into a URL, your new site will appear.
Elements of a Good Website
While every small business website design will differ based on each business’ individual needs, all good websites encompass certain elements. These elements include everything from clean design to fast load times and sharp, clean copy.
Here are the elements all small business websites should have:
- Clean design: All sites should have a clean design, free of clutter. Busy sites can be confusing for site visitors, causing them to navigate elsewhere. Ultimately, this means businesses won’t be able to convert site visitors to customers. For more design guidance, read our list of website ideas.
- Search engine-optimized copy: Web copy should include high search volume keywords in order for the site to be found in search results on platforms like Google and Bing.
- Straightforward navigation: Menus should be clear and easy to navigate, with pages clearly defined and submenus logically nestled under the correct pages. This helps site visitors easily find the information they’re looking for.
- Information about your business: Site visitors often want to learn more about not just what products and services a business offers, but about the company itself. Including a standard “About Us” page provides users with this information and can help tell a compelling story.
- Contact information: Websites must give visitors a way to contact them, such as through email, phone, live chat, or a contact form. Without contact information, businesses may miss a lot of opportunities to gain new customers.
- Clear a call to action: In order for a website to serve as a marketing tool for a business, it needs to include a call to action, or CTA. This could be anything from a traditional newsletter signup to a request to schedule an appointment.
- High-quality images: Images are often one of the first elements a website visitor sees, so having captivating images that are not only high-quality but also convey your site’s message is critical to engaging site visitors and converting them to customers.
- Compelling copy: Website copy, or its text, must provide users with relevant and useful information. Great copy provides site visitors with information that moves visitors through the sales funnel, increasing the likelihood of a sale.
- Fast load times: Even well-designed websites can fail to keep visitors engaged if they don’t load quickly. Fast load times depend on a number of variables, but to ensure the fastest load time, consider reliable web hosts like Bluehost.
- Security: Websites are prone to hacking and data breaches, so it is important to take precautionary safety and security measures for your site. At a minimum, sites need to have an SSL certificate to encrypt users’ sensitive data and to help keep page content safe.
There is a lot to consider when designing an effective small business website. To be sure you are including all of the critical elements on your site, make note of the list above, then review our tips for making a good website.
5 Top Website Examples
Looking at other successful websites can help you as you design your own site. The five websites below include varying design elements and functionalities, showcasing the necessary elements for a well-designed site.
Here are five top website design examples:
Why it works: This online clothing store is effective in portraying its brand with a feminine color scheme throughout and a site font that matches the logo. The site includes a centered logo and menu, with sales messaging ever-present in the top site banner.
Why it works: This desert adventure tours site uses its business color scheme throughout the site to maintain consistent branding. It also includes an online booking system, so site visitors can book a tour directly through the site. This allows users to engage quickly without having to look up other contact information, such as phone numbers or email addresses.
Why it works: This construction company’s website lets its homes do the talking by featuring a full-width gallery of recent projects on the homepage. Prominently displayed contact information on the homepage encourages interested clients to contact them right away. Easy site navigation is not an afterthought, though; a clean top menu allows users to easily click on other site pages for business information.
Why it works: This classic car parts shop takes a smart approach to a catalog-style site by including a prominent vehicle search field on the business’ homepage. Instead of site visitors having to search through an extensive catalog to find the parts they’re looking for, they can just input their car and see relevant results. This search functionality is standard for businesses such as hotels, making it easy for users to quickly find what they’re looking for.
Why it works: This ice cream shop’s logo and menu are easy to read, and the site is designed in a playful way that aligns with the whimsical ice cream shop’s brand. Notice that branding is maintained throughout, as the “Shop Now” button and the banner in the upper left-hand corner of the screen match the color of the brand logo. The image of the spoons is a fun way of showing different flavors.
When using other websites as examples, keep in mind the main elements every site needs. Is the site visually pleasing, and if so, what makes it appealing? Does the navigation function logically? Do competitors include pages your site does not? What type of calls to action do your competitors use? Asking these types of questions will help you create a better website. See our top business website examples for more design inspiration.
Top 5 Website Design Tools
Website design tools make it easier for even non-tech-savvy businesses to build professional websites. Not only are most of these tools available for free or limited upfront cost, but they can reduce the amount of time it takes to design and build a website. Below, we have highlighted tools that allow you to do everything from graphic design work to free stock image sourcing.
Here are the top five website design tools for small business:
- Canva: This is one of the best—and easiest to use—graphic design tools that gives anyone the ability to create high-quality graphics without graphic design skills or experience.
- Fiverr: Use Fiverr to find a professional freelancer who can do anything from write website copy to design logos and create graphics. Fiverr gigs start at just $5, giving small businesses an affordable way to outsource work to experts.
- Pexels: This is a platform for finding free stock images. It can be great for businesses that do not have enough professional-quality images to use on their site.
- Elementor: A WordPress website builder plugin that gives users the ability to edit a site using an easy drag-and-drop interface.
- LunaPic: A free tool that makes it easy to remove the background of an image. This is especially helpful if you need an image or logo with a transparent background to overlay on other graphics or colors.
The best business websites serve as marketing tools that can help businesses grow and increase sales. For a website to serve as a marketing tool, it needs to not only be well-designed, but designed to be found by your target audience. Learn more about website marketing strategies to get ideas on how you can turn your site into a marketing machine.
10 Website Design Tips From the Pros
To give you more small business website design assistance, we consulted web design pros. The experts below give you inside information on what makes a site successful, from building a sitemap to understanding your site visitors.
Here are 10 website design tips from the pros:
Frequently Asked Questions (FAQs)
Why should I have a website?
While there are many ways to market a business, almost all consumers expect a business to have a website that includes basic company information along with product and service details. If you do not have a website, you may appear to be unprofessional or untrustworthy. For more information about the value of a website, read our article on website basics.
How much does it cost to build your own website?
Website costs can vary from free to more than $10,000. For example, a do-it-yourself site built on the popular drag-and-drop builder Weebly ranges from $0 per month to $25 per month. It’s free to use WordPress, but it requires additional website hosting, which ranges from $3 per month to over $25 per month, as well as themes and plugins, which add to the cost.
Which website builder is the best?
It can be difficult to know which website builder plugins are the best because there are so many available. The top builders include Visual Composer, Elementor, and Beaver Builder. Learn more about each builder, including price, how each works, and who each is best for in our article on the six best WordPress website builders.
What is the easiest way to build a website?
The easiest way to build your own website without any web design or coding knowledge is with a drag-and-drop builder, such as Squarespace and Weebly. Users will find that each of these platforms has very intuitive editing interfaces that make building a website a quick and painless process. Also, read our article on how to build a website with no coding experience.
Bottom Line: How to Design a Website
Small business website design—involving everything from text to media and proper navigation—is key to the success of a small business. With the proper design and content elements in place, businesses can generate leads, convert those leads to customers, and generate ongoing sales. As the heart of digital marketing in the 21st century, all small businesses should design a website.
However, it doesn’t matter how well-designed a site is if it doesn’t load quickly or is plagued with frequent downtime. To ensure the integrity of your site, choose Bluehost for reliable web hosting. It has a 99.9% uptime and is optimized for fast load speeds, with affordable plans starting at just $2.95 per month. Get started with Bluehost today.