Why Consistency is the Most Powerful Force in Web Design

Why Consistency is the Most Powerful Force in Web Design

You want to create a strong brand presence. You’ve got your logo, you’ve picked the font, and you’ve selected a strong color palette to represent your brand. But how do you ensure that you’ve consistently used your branding elements and other stylistic choices across your WordPress site?

Perhaps you rely on multiple rounds of QA at the end of development to check your site for consistency issues. But you’ve been looking at your site for what? A few weeks? A couple months? I’m sure your eyes and brain are fatigued by that point. Even if something as subtle as a font mismatch occurred, there’s a good chance you might not catch it unless you were approaching the QA with a fresh set of eyes—and who has time for that when you’re so close to the finish line?

It’s a balancing act, for sure. You want to create a great-looking site and you want to do it as quickly and efficiently as possible. Your assumption is that any consistency issues will be caught and resolved before the site goes out the door, but you can’t know that for sure. Or can you?

So, let’s talk about why consistency is important for web design and how it (or the lack of it) can affect the UI and UX of your WordPress site. I’m also going to include some tools you can use to ensure that the elements on your site are consistently designed, placed, and written, leaving very little room for error at the end of your project. At least in terms of consistency.

10 Ways Consistency Issues Can Hurt Your Web Design

A good-looking design and intuitive interface go a long way in establishing trust with your visitors. But once you’ve established that trust through an initial positive impression, you need to think about what more you can do to create favorable conditions on your site.

Consistency helps with this. These are just some of the reasons why:

#1. Branding

ConsistencyAnaltech Branding Issues
Can you tell which of the two names in the top-left corner of the site is the actual company name?

First and foremost, there needs to be a clear connection between your website’s URL, name, logo, and messaging. Even if your company name isn’t something that people inherently associate with whatever you sell (like why would anyone ever have associated a red bull with a drink?), your site should establish a clear connection between all branding elements—and reinforce it over and over again so that the connection eventually seems nothing but natural in your visitors’ minds.

I’d also argue that clear, well-thought-out, and cohesive branding demonstrates to visitors that you care about the tiniest details. After all, a disconnect in your branding could lead visitors to wonder if that’s a reflection of how you do business. In other words, if you couldn’t take time to dot the i’s and cross the t’s for your own business, will you not be diligent when it comes to delivering a high-quality product or service to your customers?

#2. Messaging

One of the things we’re all so well aware of these days is that consumers want to feel like they’re connecting with someone and not something online. That’s why brands who show off genuine personalities on their websites and social media do so well. With the use of consistently written copy, you’ll keep visitors locked into the experience your “voice” continues to guide them around the site.

#3. Navigation

Consistency-Verizon Navigation
In addition to this confusing mega menu setup, there’s also the issues of inconsistent icon usage across the various tabs.

You might think that navigation is an easy one since it’s always going to be in the same spot and be styled the same way on every page. However, there’s more to consistency than just presenting something the same way across your site.

There’s also the matter of aligning visitors’ expectations of how a navigation bar should work, in general, with the reality of your own. Sure, it might be cool to place it at the bottom of your site or to use a personalized symbol instead of a hamburger icon, but that could lead to unnecessary confusion and frustration for some.

#4. UI/UX

There is a lot involved in both UI and UX design. Without getting into specifics, I’ll just say that much of what UI and UX designers try to accomplish is a sense of predictability and comfort with end users.

Take something as simple as a button. When they approach the design of a button, they want it to actually look clickable and recognizable—and they want all the buttons on their site to look the same. The goal—with this and other UI and UX design tricks—is ultimately to remove friction from the on-site experience. Without friction, distractions, or hiccups along the way, it’s easier to guide visitors to the end goal (i.e. conversion).

#5. Imagery

Consistency-Telecom Images
Based on just the photos on this website, can you even tell what the company does for a living? You’ve got, like, a 50/50 chance of getting it right.

One of the things I remember many of my clients struggling with was the image selection process. There’d be times when I’d receive a set of images they wanted to use, but it would be a total mishmash of styles: a cartoonish illustration of a saleswoman, a close-up photograph of fiber optic cabling, an abstract image of cars driving along a road late at night. While they each connected somehow to what the company did, there was no consistent story that they told (if any at all) nor did they appear to fit with one another aesthetically.

#6. Interactions

What’s the goal of your WordPress site? To get visitors to interact with it, right? You want them to watch a video, read another blog post, or fill out a form to sign up for your service. As far as best practices go, any element that can be interacted with through scroll, hover, touch, etc., should look and respond the same way across your website. This gives visitors a better sense of control over their experience as they can predict what will happen when they take a certain action.

7. Reading

Consistency-Arngren Brutalism
Ahhh… Brutalism at it’s finest. I can’t even with this one.

As focus wanes and patience shrinks in our visitors, web content needs to be easier to consume. With consistent use of typography and header tags throughout your text, visitors can more quickly “learn” how to navigate through a page to get to the information they want. They can scan down to the next header title or they can look for the blue underlined text for the hyperlink they need.

#8. Testing

With consistent use of web design elements, your A/B testing efforts will be more efficient down the line. Here’s why I say this: if you’ve used the same design, shape, size, spacing, and so on for a specific element on a web page, then your A/B tests won’t have to focus on the inconsistencies contributing to the lack of conversions.

Also, if you should find that a common element found across your site performs better when it’s a different color or placed in a different spot, this will make adjustments to the rest of the site easier to manage.

#9. Rhythm

Consistency-NY Times
I love the New York Times as much as the next person, but the layout on their site is horrendous. There’s absolutely no logic!

Giving your site a logical rhythm and flow contributes to a consistent design as well. For example, let’s say you placed a 300-pixel image on the left side of a page and balanced it with a 50-word description on the right. Below that, you placed a 50-word description on the left and a 300-pixel image on the right. And so on. Visitors will be able to pick up on that predictable rhythm, which in turn will help them know what to expect next.

10. External Factors

One other thing I want to point out is the fact that consistency isn’t always about what you’ve established across your site. Sometimes it has to do with playing into visitors’ expectations.

I’ll use the logo placement research Brenda talked about here as an example. While it might seem cool to put your logo in the middle or on the right side of your site—or even to make it disappear at some point—that’s not what visitors have come to expect of websites in 2017. It might not seem like a big deal, but deviations from well-known design best practices could hurt your website’s performance as well.

Tools to Ensure Consistency in Your WordPress Site’s Web Design

As I mentioned earlier, multiple rounds of QA at the end of an already long web design project aren’t always enough to ensure that you’ve maintained consistency throughout your site. That’s why you should have a set of tools to help you keep consistency in check while you work.

Here is what I recommend:

#1. WordPress

Before jumping into any external tools, start right in WordPress. There is one area in particular that’ll help you reduce the likelihood of introducing inconsistencies into your site: the Theme Customize tool. In here, you’ll be able to establish global settings for:

  • Fonts
  • Colors
  • Spacing
  • Menu animation
  • Links
  • And more (this depends on which theme or website builder you use

#2. Style Guide

Consistency-Style Guide Template
An example of a free style guide template on Behance.

Every brand—digital or otherwise—needs a style guide. This defines everything straight out the gate so there’s no confusion when creating content for your brand. This should include:

  • Your logo (and different variations of it)
  • Color palette that includes primary and secondary colors, text colors, icon colors, and more
  • Typefaces; ideally, no more than two or three fonts
  • Imagery
  • Iconography
  • Textures and patterns

Rather than try to create your own style guide, find free style guide templates on websites like Behance (like the one shown above or Dribbble.

#3. UI Kits

Consistency-UI Kit
An example of a free UI kit on Dribbble.

While you could rely on your site’s theme to provide the default styling of your UI elements, most of you will probably prefer to personalize them so they match your brand’s look. Creating those from-scratch, however, takes time and might not be something you’re comfortable doing on your own. This is where pre-made UI kits come in handy. They generally include things like color palettes, button designs, widgets, form fields, tabs, and pattern libraries.

As with the style guide, you should be able to find a free UI kit template (like the one above) that would work nicely for your site’s design.

4. Wireframes and Mockups

Consistency-Wireframe Grids
I’m telling you, it’s all about the grids. They won’t let you down.

Every web designer’s process will differ in terms of how much planning and sketching-out of a site needs to be done before an actual design is created. That being said, I find that wireframes and rough mockups—especially ones that are grid-based—are helpful in terms of catching issues with misalignments, incorrect sizing, inconsistent spacing, and so on.

When you’ve got a fully designed web page in front of you, it’s easy to get distracted by how pretty it looks or all the cool things it does. This is why earlier planning phases are a good place to nip potential inconsistencies in the bud. Personally, I think Adobe Illustrator is the best grid-based tool. However, if you don’t use Adobe and don’t want to pay the money for it, you could find a free grid online or use Wireframe.cc.

#5. Plugins

And, finally, we come to plugins. I realize this is a very generic tool recommendation, but, you’ve got it admit, plugins do a great job at giving you consistent design elements to work with. Think about something like a pop-up. Rather than try to code your own popups on the backend and risk using different colors, fonts, or popup placements, the plugin ensures that they look and act the same every single time.

If you’re looking for a reliable plugin resource to help you take the guesswork out of your design elements’ consistency, start with WPMU DEV’s collection of WordPress plugins.

Wrapping Up

Oscar Wilde once said, “Consistency is the hallmark of the unimaginative.” Now, I hate to disagree with Mr. Wilde since I’m a big fan of his writing, but, in this case, I have to. While I do understand why some people would confuse “consistency” with the idea of stifling creativity, I don’t think that’s the case at all. I believe that consistency is what enables web designers, developers, and even writers to have more time to be more creative.

By infusing your site with identical design elements, a predictable rhythm to the content, as well as a logical interface, you’ll give visitors a familiar setting through which they can navigate. That then provides you with time to surprise them with unexpected treats like popups and animation.

What’s the worst inconsistency you’ve discovered long after one of your websites has gone live?