4 Examples of Fantastic Inbound Marketing Web Design

Design is valuable, an investment, and will pay dividends over the life of your business. First and foremost, your website may be one of the first things that a potential customer sees related to your brand. If they come to a website that looks like it was built in 1995 using Adobe Dreamweaver, this will reflect poorly on the brand.

Worse, a bad design may be enough to send someone running back to Google and into the arms of a competitor that has a website that is easy on the eyes. A good design is simple. The arch-enemy of a good website is complexity. Why?

• It's confusing. A complex website can confuse your reader, make them unfocused, and make it hard for them to understand the message you're trying to convey.
• No clear call-to-action. When it comes to inbound marketing, conversion is one of the primary metrics you should be monitoring; how many of your anonymous website visitors are turning into leads? A complex website creates the issue of visitors being unsure of exactly what the next steps for them are. The best inbound marketing website design make "step 2" very clear.
• Too much to read. In the inbound marketing world, the phrase "content is king" is bandied about. However, too much content on main site pages (like the homepage) can have the adverse effect of making a user run for the hills. Less is more: can you say the same 15-word sentence in 4 words? Then do it; it's much more likely to be read.

Let's take a look at some real websites that feature some of the best web design I've seen recently.

Examples of Inbound Marketing Web Design

For each website, you'll see a few screenshots and my analysis of why they are stellar from an inbound design standpoint.

1. Help Scout

As a design influence, Help Scout is one of my absolute favorite examples to show. They truly nailed it. Everything they do is consistently great design, fits a well-defined design aesthetic, and their web content wraps it all up with a pretty bow.

Here's the homepage:

The Help Scout homepage has all of the bases covered. In the GIF above, the homepage includes the following:

• A large testimonial as one of the very first things I visitor will see. 
• An explanatory video for visitors who are more likely to learn by watching a video.
• A list of some of the most common headaches that come with delivering customer support, and how Help Scout solves them. Neither of these explanations takes more than a sentence or two.
• A "looking to switch" section that is valuable for the majority of audiences. Virtually every one making it to this website is either looking to switch from a current help-desk provider, or from their outdated email system.
• Social proof by showing the companies that rely on Help Scout.
• A list of their fantastic free resources for customer support professionals.

Someone seeing the homepage could be presented with enough information to be willing to try a free 15-day trial.

Where it fails: it was a bit hard to find out what the next step is. If you didn't see it, it's hidden in the top right of the menu bar. The call to action (free 15-day trial) should be more prominently featured.

Here is their software features page:

The features page is a perfect example of the "less is more" approach. They reduce features down into very short web copy that explains what the software can do. If that doesn't provide you with enough information, then you simply need to click "read more" on any section to get more info. 

I also love the top navigation bar that allows a visitor to navigate around the page based on what section they want to read.

Here's the resources page:

The resources page is super clean and easy to navigate (I know, I know, it's not surprising at this point). Their eBooks all have a consistent design, with a sweet 3D book cover.

In addition, they have a demo video down at the bottom. When you go to that demo video, you're met with a form. This is where Help Scout really gets the grand prize: some people want to see a demo, but don't want to speak with someone yet. Understanding this, they put together a pre-recorded demo video for those leads to watch.

Finally, their "online guides":

Help Scout makes fantastic long-form content in the form of online guides. Despite being long-form content, it's easy to follow and grasp and never feels like too much text for a web page. It's cleanly divided into sub-section such as "blog posts". I'm also presented with a CTA, to download an eBook in the middle of the online guide. That's the yellow section you see in the above GIF. The CTA doesn't seem out of place and is very well integrated. The fact that the form is attached right there is a brilliant way to increase conversions. This means that they get all the benefits of long-form content, but still have a chance to convert visitors into leads.

By the way, this page is on the first page of Google for the super broad keyword "good customer service". So not only does this page work for humans, but also works for robots. That's just good inbound marketing.

Start implementing these best practices with a new theme from the CMS Hub theme collection by Envato.

2. OfficeSpace (Enterprise Software)

OfficeSpace software is a company that provides software-as-a-service (SaaS) for office managers to more efficiently allocate their office resources, from seating charts to meeting rooms.

Let's take a look at their homepage. The first inbound web design best practice that they use is to have a very clear CTA. It's big, it's bold, and it bright green. Against the dark blues of the website, this bright green CTA really sticks out. It's likely that every person who makes it to this homepage will be exposed to what the "next steps" are if they want to start a relationship with OfficeSpace.

In addition, the homepage is also an example of what I call "gateway design". That means that rather than telling you every single thing you need to know, they give you a high-level overview. If you want to know more about a specific thing, just click through and see for yourself. Gateway design is a modern design trend that has really helped in simplifying website design and decluttering them.

Now let's take a look at their product page.

The product page has a bit more text than we saw on Help Scout's features page, and that's okay. It's okay to have more content if it's easy to navigate and follow. I call this "The Eyeball Test". 

The Eyeball Test refers to the fact that when a design is cluttered, a user's eyeballs can make erratic movements. They jump around the page, the user is unable to focus or fully comprehend the message you're trying to convey, and it leaves the visitor with a feeling of uneasiness. 

The trick is to employ visual hierarchy, one of the most fundamental requirements of great graphic design. Visual hierarchy is rooted in design functionality and usability. It's a way of organizing the content and design elements in a way that makes sense. 

The visitor is able to see the content and immediately organize it in their head: how should they read it?; What should they focus on first?; Where is the content they want to read specifically?. 

OfficeSpace is able to do utilize visual hierarchy by using sub-sections with bold letters, images, and scrolling. In order to get to the next section, you have to scroll. That means OfficeSpace can better influence the interaction and deliver the information to you in the order they intend.

By the way, the green CTA is consistent on this page as well.

3. ShoreTel Sky

ShoreTel Sky makes takes phone systems (think: the Cisco IP phone that's probably sitting on your desk right now) and brings them into 2014. It makes a cloud-hosted phone system that can work for a single office, or for a globally distributed workforce.

I could go on and on and on about how good the ShoreTel Sky website is for inbound marketing. From design, to the sheer amount of content, they check off all the boxes for inbound marketing best practices. Luckily, you don't have to hear me pontificate: Jessica Meher from Hubspot already did it for me. She wrote a fantastic, in-depth blog article that looks at ShoreTel Sky from an inbound design standpoint (hint: it's a huge thumbs up).

Here's the gist of what she said:

1. Clean call to actions and descriptions
2. Simple, uncluttered design
3. Fresh, and valuable, content
4. Easy to find the right information
5. Mobile-optimized
6. Good at generating leads and demand
7. Uses simple, easy-to-understand language rather than "Gobbledygook". 

4. Evernote

Last, but not least: Evernote. 

Their homepage is simply fantastic. It uses a beautiful color scheme, full-width imagery, and the structure of the CTAs is very clear. It's obvious that they want you to sign up for an account, first and foremost. When you scroll down further, you're presented with three other options: check out the market, refer a friend, or check out Evernote for Business.

If you're already an Evernote user and are going to log in by clicking "sign in" on the top right, then Evernote has that interaction covered as well. Rather than losing that interaction, they have the "go premium" CTA right by the "sign in" button. For an end user, going premium is the next logical step in the relationship.

This is visual hierarchy at it's finest: they expose you to a primary CTA, expose you to secondary CTAs if you scroll down, and if you're just looking to login, they expose you to the most relevant CTA (go premium). 

Their blog page is also awesome. 

It's beautiful with custom images for each blog post. It's cleanly divided into subsections. I love that the top of the blog homepage allows for them to feature specific blog posts that may be high value for them.

The sidebar has two scrolling CTAs that automatically scroll with your cursor, ensuring that you're always exposed to them when you're on the blog. They provide two CTAs: an Introduction to Evernote CTA for users who are still getting acquainted, and a "sign up" for users who are already familiar. This sidebar is so lovely that i'm going to see if I can get something similar implemented for our own site.

In addition, their blog posts all have CTAs attached, an inbound marketing best practice. 

The Bottom Line

When you wrap quality content up in stellar design, the sky is the limit. A good design will allow your users to understand what you do, access the content that is most relevant to them, and clearly show them how they can take the next steps with your company. Design is valuable; it is an investment that will pay dividends in driving visitors and, more importantly, conversions and leads. 

You just saw four fantastic examples of design. What are your influences? What websites do you like the most?

This post originally appeared on the Inbound Marketing Resources blog. Inbound Marketing Resources is a HubSpot Partner located in Waltham, MA.