The Four Must-Haves of Website Design

Inbound Marketing, Website

If you think websites all work the same, then you are very confused. Designing a website and designing a website that works are two very different things. There are four main elements to an effective website design.

1. User Experience

Always design with the user in mind. Think about the questions your personas are asking. Why are people coming to your site? The design should cater to your persona. Think about what needs they have, and what immediate action they're hoping to take when they land on your homepage. Design every aspect of navigation with your users in mind.

For example, if you’re a remodeling construction company and your audience is middle-aged women looking to renovate, then your website should be designed with a feminine approach, as opposed to a rugged construction company website. This is why conducting research on your target audience and personas is so crucial to your website's success.


Learn more about One Squared About the Event


2. Call-To-Action Buttons

Calls-to-Action (also known as CTAs) are key in website design. Inbound marketing is about taking the next step, as the persona or user is ready. A CTA button is that next step. As a designer, you need to visualize where the user will be looking for more information, and place a CTA in that space. Keep in mind that not every button is a CTA, but every CTA is a button.

CTAs help guide the user down the funnel. If they don’t stand out or if they’re not placed properly it can confuse your users and discourage them from clicking through. The most important elements to a CTA are the design, language, and placement. 


3. Responsive Design

Responsive Web Design

Throughout your design you need to constantly ask yourself, How will this look on mobile? If your design can’t be seen on a mobile device, then you’re doing it wrong. 80 percent of Internet users own a smartphone. This means that when people are looking for garage door repair, oil changes, and an appointment with a chiropractor, they're likely handling it all from the palm of their hand. Responsive website design crucial.

Keep the 12 column system in mind. This can be intimidating to designers but Bootstrap is a great resource to give you a visual. Bootstrap lets you see how the blocks will shrink down and help you design around that. If you’re making a Call-To-Action or custom image make sure it’s still legible at 320 pixels wide.


4. Testing & Analysis

ALWAYS test your site. Test and retest, and then test some more. Just because something worked on a previous web design, doesn’t mean it’ll work for this one. If you’re trying something new, test to make sure it works! Don’t be afraid of failure, that’s how you learn. If your first idea didn’t work, try another one. Again, keeping your user in mind, know that if there's an issue with your website they'll find, they'll experience it, and they'll remember it. You can't take that chance. QA the hell out of your site before launch, and give yourself (and your team) the task of trying to break it. Find the fault lines, and reinforce them. 

Leighton Interactive Homepage Heatmap Before

On our website, we added this device called CrazyEgg. This helps us test our site and shows us how far down a page users are scrolling and what they’re clicking on, along with other awesome features. We noticed the “Let’s Talk” button over the video wasn’t performing as well as we’d hoped. So what did we do? Tried something else!

Leighton Interactive Homepage After

We realized it was redundant to have the “Let’s Talk” button in the Navigation and over the video. So we added CTAs that answer questions users are coming to our site for. We’re still testing this to see if it’s doing better than the last design. 

If it doesn’t work … you guessed it, we’ll try again.

By using these four principles, you can design one beautiful and effective website.


Give a little.
Get a lot.

We regularly share insights on how we approach marketing. Get on the list.

Easter Egg!