Designing a website is about more than aesthetics. It’s also about fostering trust from the moment a visitor lands on the homepage. Based on web credibility research done at Stanford, we know that75% of consumersmake judgments about a company’s credibility based on its website design.

That means the design of your site should be as carefully planned and thought out as the content on your site. You’ll need to consider theme, font combination, color palette, and more when creating a professional-looking and trustworthy site. If your site makes bad use of color, has too much text, or otherwise looks unprofessional, then any visitors who land there will likely bounce.

In this post, we’ll walk through the steps to making a WordPress site look professional so you can attract and delight your visitors. Let’s take a closer look at these steps below.

Grow Your Business With HubSpot's Tools for WordPress Websites

By following these steps, you can create a custom WordPress site that strengthens your brand identity and provides your visitors with exceptional experiences. Let’s discuss them below.

Step 1: Choose a Customizable Theme

When installing WordPress, a default theme will be installed automatically on your site. At first glance, you’ll notice it’s rather austere.

Austere homepage of the WordPress default theme for 2019

Source

If you stick with this theme, you can use the Gutenberg editor or another page builder to customize it. Among other options, you can change the color for buttons and links, upload your logo image, add icons to the social menu, and add widgets to appear in your footer.

You can create a beautiful site by customizing this default theme. However, there are limitations that may prevent you from personalizing your site as much as you want. It may be too minimal or typography-driven for your brand. Its single-column layout, which suits content-rich sites, may not suit your ecommerce site.

A customized homepage of the WordPress default theme for 2019

Source

For more control over the appearance of your site, you can choose from hundreds of free and premium WordPress themes available through theWordPress theme directoryor third-party marketplaces. With more color options, sidebars, background options, Google Fonts, and layouts to choose from, you can design your site to appeal to your target audience and ensure it looks one-of-a-kind.

Divi, for example, is a premium theme that allows you to design and customize every part of your website from the ground up. After choosing from over 800 pre-made website layouts, you can then apply animations to any element on the page, add shadows to images and text, pick from hundreds of web fonts or upload your own, and much more. Below is a landing page from Divi’s design agency layout pack.

Demo landing page from Divi’s design agency layout pack

Source

Step 2: Select Your Color Palette

As you begin customizing your theme, you’ll be presented with virtually unlimited color options. That does not mean you should try using every single one. Instead,pick a color palettefor your site and stick with it. Enforcing your color scheme across all pages on your site — as well as across promotional materials and social media content — will help strengthen your brand awareness and attract and retain a loyal audience across platforms and channels.

But how do you pick the right colors for your site? Asweb designer Ben Gremillionpoints out, there’s no set of colors that looks professional in and of itself. You just have to use color in a coordinated and thoughtful way.

为你的网站选择配色方案时,你可以draw inspiration from your logo and content. For example, say you have a photo background on your homepage. You can sample a few shades from that photo and give them to the sidebar, links, headings, and footer. This is a great way to achieve a unified look across your site.

A site's color palette based on the photo background of its homepage

Source

Step 3: Select Your Typeface

Many WordPress themes come with fonts pre-installed but you canadd custom fonts manually or with a pluginto elevate the appearance of your site.

Back in the day, the Internet could only support a few fonts across different browsers and devices. That meant site owners faced a limited font selection for their site.

Then came the advent of web fonts, which helped revolutionize web design. Web fonts are compatible with all types of browsers and devices so they’ll display no matter what visitors use to access your site.

现在,您可以选择从数以百计的字体,它can be overwhelming to narrow down your selection. Two major factors to consider when selecting your typeface are readability and personality. You’ll want to make sure that the font style as well as the point size, weight, and color you choose is easy to read on desktops and mobile devices. You’ll also want to pick a font that evokes your brand’s personality. Ask yourself how you want people to feel when they visit your site.

Let’s look at two Google Fonts that pair well together.Lorais a Serif font inspired by the curviness of calligraphy. Well-suited for body copy, it’s a great choice for digital magazines, blogs, or any other site that is focused on storytelling.

Body copy using the Serif web font Lora

Source

Montserratis a geometric sans serif fonts inspired by the old posters and signs in the traditional Montserrat neighborhood of Buenos Aires. It will make headings stand out on your homepage, landing pages, and blog. Take a look at Dang & Blast’s homepage below to see the font in action.

A homepage using the Sans Serif font Montserrat

Source

For more help in making the right typographic choice for your site, check outThe 33 Best Free Fonts Designers Should Download.

Step 4: Create a Custom Homepage

Just as it provides you with a default theme, WordPress will provide you with a default homepage that automatically displays a list of your latest blog posts. You’ll want to take the time to replace this with your own custom homepage. Since this is a visitor’s first impression of your site and possibly your business, your homepage should introduce your brand, briefly explain your products or services, and point out the next step these visitors can take once they’re done exploring the page.

To achieve these goals, you should include a few items, including an about section, email opt-in form, and contact information. Once you’ve created a clean and persuasive landing page, you can then set it as the homepage of your site.

In the Classic editor, just go toSettings>Reading. Click “A static page” and then select the desired page from the dropdown menu. In the Gutenberg editor, clickMy Site>Design>Customizeand then locate the Homepage Settings option. You’ll then follow the same steps as in the classic editor.

In the HomePage Settings tab of the Gutenberg editor, you can replace the default homepage with a custom page

Source

Step 5: Customize Your Navigation Bar

You want to make it as easy as possible for visitors to browse your site so they stay longer and read more of your content. Tocreate a custom navigation menuthat helps increase your page views and reduce your bounce rate, you can use WordPress’ built-in menu editor.

You’ll start by selecting your menu items. By default, WordPress assigns each new page a tab, which can quickly overcrowd your menu. Instead, try to think of categories that are broad enough to organize all your posts and pages. For example, your menu might only include an About Us, Shop, and Blog tab. You can then create sub-menus that will appear as drop-down items when a visitor hovers over one of the parent tabs. Such an organized navigation system will ensure your visitors have a seamless experience and make your site look more professional.

To make your site even more user-friendly, you can add a search bar to your navigation menu. By default, WordPress only lets you add a search section on your sidebar, footer, and other widget-ready areas. However, you canuse a plugin or code snippet to place a search box in the navigation menu. That way visitors can type in a keyword to quickly and easily find the content they’re looking for if they don’t see it among your menu tabs.

A demo site with a search box in its navigation menu

Source

Step 6: Upload a Custom Favicon

In WordPress, your favicon is the icon displayed in your visitor’s browser tab or as a bookmark when saved to their browser or phone. These icons are small but mighty. Say your visitor has a dozen tabs open in their browser. Your favicon will ensure your site stands out so that the visitor can quickly get back to your content.

A favicon can also strengthen your brand’s identity. Consider how much more memorable your logo would be as your favicon rather than the nondescript default image WordPress assigns pages.

A site that displays a nondescript default image in browser tab

Source

If you don’t have a logo yet, don’t worry. With tools like Canva and Online Logo Maker, you don’t need to hire a logo designer or spend a fortune tocreate a high-quality, professional-looking logo.

Once you’re satisfied with your logo, you can upload it to your site. If you have WordPress version 4.3 or later, then you can use the built-in Site Icon feature to set up your favicon. Otherwise, you canset it up manually.

Step 7: Customize Your Footer

WordPress automatically includes a branded footer on your site that reads “Proudly powered by WordPress.” This default footer can detract from your brand’s identity and make your site seem unprofessional.

To ensure every inch of real estate on your site is supporting your brand, you can create a custom footer that includes your logo, copyright notice, and a link to your privacy policy. Such resources will help site visitors identify with and trust your brand. Here’s a custom footer that reflects the brand’s personality much more effectively than the default footer.

A custom footer that reflects the brand’s personality much more effectively than the default footer

Source

There are a few methods for customizing your footer. You can either change the theme settings, update the footer widget, use a plugin, revise the footer.php code, or use a theme builder with a plugin.

For a step-by-step guide, check outHow to Edit or Remove the Branded Footer on Your WordPress Website.

遵循以上步骤,你可以开发的ic design choices that reflect the purpose and brand of your business. This will help improve the credibility of your site, attract more visitors, and strengthen your brand identity.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

Originally published Nov 22, 2019 11:14:46 AM, updated September 01 2021

Topics:

WordPress Website