Web Design for Inbound Marketing I: The Attract Phase

31 Jul, 2018

In this series on Web Design for Inbound Marketing, I'll be discussing a series of best practices for designing your site according to inbound, user experience and user interaction best practices. In this first part, I'll discuss the first part of the Inbound Methodology: the Attract phase and how you can keep visitors on your site. 


The Inbound Methodology

HubSpot's Inbound Methodology consists of four phases: Attract, Convert, Close and Delight. If you are not familiar with the methodology, I'd recommend taking a quick read through their Inbound Methodology page or even completing their free Inbound Certification


Their first phase, Attract, is the process of attracting visitors to your website and they list content as one of the key tools for accomplishing this. But how do you design your site in such a way that you can keep any traffic that's arrived on your page? In this article, I'll cover how you can accomplish that.


What do Visitors Want?

Both marketing and design are highly goal driven. When marketers create a campaign, they should always be driven by a specific goal such as generating more traffic or converting more leads. This is also the case for design. Design, at it's core, is functional. While many may think of design as aesthetically pleasing, it's really about creating something that serves a purpose. For some interesting content on design, I'd recommend checking out Don Norman's The Design of Everyday Things or listening to the 99% Invisible podcast.

When designing to attract visitors, our main goal is to keep them engaged and interested in moving on to the next step. To accomplish this, you'll want to ensure that you design for the following questions:

  • Has the visitor found what they are looking for?
  • Has the visitor had an enjoyable experience on the site?
  • Is the visitor interested in taking the next step?


Succeeding With Your Visitor

To ensure that we're designing our website to succeed in the attract phase of the Inbound Methodology, we'll want to answer each of the questions above. As a solution to each, I will combine inbound knowledge with user interaction design principles. 


Has the visitor found what they are looking for?

Are they in the right place?

First of all, the visitor should know they're in the right place. Therefore, it's important that there be consistency, which is one of Don Norman's key design principles. You will want to ensure that: 

  • There is brand consistency: make sure that you're using your brand's identity throughout such as your brand's logo and colours.
  • There are common design patterns: such as similar components, typography and colours

Often, your company will already have their brand and style guide. You may find internal resources with recommendations on the correct logos, colour palettes imagery and typography to use. For example, here are LinkedIn's Brand Guidelines and HubSpot's Style Guide. Smaller businesses might not have resources like these, but you can always take a look at your branding on existing resources.

Typically, UI designers will put together a style guide listing all of the different elements of their website - check out the ones here for examples of what these might look like. This way, elements like buttons, forms or boxes will look the same throughout the site in order to avoid confusing the user.

If you are designing on HubSpot's CMS, you can use their boilerplate CSS to design different elements.


New call-to-action


Is the content helpful and relevant?

Since this post is on design, we'll talk less about the content itself and more about how it's structured.

My advice here is, don't re-invent the wheel! While you may want to get creative, users typically expect a certain hierarchy and structure. For example, blog posts should have a clean layout including the title, author name, published date, content structured into paragraphs... etc. 

Recently I read an article on Web Designer Depot on the freshest web designs of July 2018. While many of these designs are indeed fresh and creative, they are probably not the best design to deliver a blog post, for example. Take http://drftwld.com/, it's hard to make heads or tail of what's going on: 


The whole site is just crazy colours floating around. Is it creative and interesting? Yes. Would I feel that it was relevant if I'd clicked on a link that said "Learn more about our company"? Probably not. Perhaps if the link I clicked on said "Check out how creative you can get with web design" I would feel that it was relevant. Again, we're designing for purpose

Another design principle that might be worth mentioning here is affordance - whether it's clear what the element's purpose is: a door know affords turning it, a mug hang affords grabbing on to it... etc. In the above website, it's not clear which of the elements are buttons. Typically, you should ensure that this is the case in your design. 


Has the visitor had an enjoyable experience on the site?

In order to simplify the user consuming your content, it should be clear and concise. Use hierarchy to lay out your content in a clear way:

  • Use whitespace: make sure there is space between your elements to avoid visual clutter.
  • Set levels of importance: this can be based on colour, size or typography.
  • Use columns: space your elements out into different columns and rows.
  • Group elements: you may have several boxes, each containing different information.
  • Break it up: use paragraphs, highlight quotes, insert images, add sections - try to make it easy to reach!

Another important aspect to ensure that all users have an enjoyable experience is to ensure that your design is accessible. There are a lot of guidelines but, in general, it's important to ensure your fonts are sufficiently large, the site is structured in such a way that it can be read aloud, that you include image alt text and that your colours are accessible.


Is the visitor interested in taking the next step?

Remember how we said that both marketing and design are goal-oriented? You should have a goal as to what you want your visitor to do - what will ultimately close that person? 

Make sure that your design has clear call to actions on what's next. The call to action will very much depend on who they are and what stage of the buyer's journey they're at, but don't forget to include it in your design. 

To include another design principle, you'll want to ensure that it's visible: place it in an appropriate location in your design, make it large and use contrasting colours. The text should be concise, in the second person and actionable. You can read more about CTA best practices here


In Summary

It would be impossible to cover absolutely all aspects of good design in one post, but I hope that some of the content above will motivate you to learn more about thinking about the user and design principles when designing your website to retain visitors during the Attract phase. 

In my next post, I'll talk about designing website for the next stage of the Inbound Marketing methodology, the Convert phase, in which I'll cover designing landing pages, forms and long-form content to convert visitors. 

Topics: inbound-web-design

Join the Conversation!

Do you have a question, feedback or comments on this post?