{"id":165595,"date":"2017-06-14T13:00:25","date_gmt":"2017-06-14T13:00:25","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=165595"},"modified":"2019-04-25T16:02:05","modified_gmt":"2019-04-25T16:02:05","slug":"consistency-web-design","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/consistency-web-design\/","title":{"rendered":"Why Consistency is the Most Powerful Force in Web Design"},"content":{"rendered":"

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

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

It\u2019s 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\u2019t know that for sure. Or can you?<\/p>\n

So, let\u2019s talk about why consistency is important for web design and how it (or the lack of it) can affect the UI and UX<\/a> of your WordPress site. I\u2019m 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.<\/p>\n

10 Ways Consistency Issues Can Hurt Your Web Design<\/h2>\n

A good-looking design and intuitive interface go a long way in establishing trust with your visitors. But once you\u2019ve 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.<\/p>\n

Consistency helps with this. These are just some of the reasons why:<\/p>\n

#1. Branding<\/h3>\n
\n
\"ConsistencyAnaltech
Can you tell which of the two names in the top-left corner of the site is the actual company name?<\/figcaption><\/figure>\n<\/div>\n

First and foremost, there needs to be a clear connection between your website\u2019s URL, name, logo, and messaging. Even if your company name isn\u2019t 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\u2014and reinforce it over and over again so that the connection eventually seems nothing but natural in your visitors\u2019 minds.<\/p>\n

I\u2019d 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\u2019s a reflection of how you do business. In other words, if you couldn\u2019t take time to dot the i\u2019s and cross the t\u2019s for your own business, will you not be diligent when it comes to delivering a high-quality product or service to your customers?<\/p>\n

#2. Messaging<\/h3>\n

One of the things we\u2019re all so well aware of these days is that consumers want to feel like they\u2019re connecting with\u00a0someone<\/em> and not something online. That\u2019s why brands who show off genuine personalities on their websites and social media do so well. With the use of consistently written copy, you\u2019ll keep visitors locked into the experience your \u201cvoice\u201d continues to guide them around the site.<\/p>\n

#3. Navigation<\/h3>\n
\n
\"Consistency-Verizon
In addition to this confusing mega menu setup, there’s also the issues of inconsistent icon usage across the various tabs.<\/figcaption><\/figure>\n<\/div>\n

You might think that navigation<\/a> is an easy one since it\u2019s always going to be in the same spot and be styled the same way on every page. However, there\u2019s more to consistency than just presenting something the same way across your site.<\/p>\n

There\u2019s also the matter of aligning visitors\u2019 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.<\/p>\n

#4. UI\/UX<\/h3>\n

There is a lot involved in both UI and UX design. Without getting into specifics, I\u2019ll just say that much of what UI and UX designers try to accomplish is a sense of predictability and comfort with end users.<\/p>\n

Take something as simple as a button<\/a>. When they approach the design of a button, they want it to actually look clickable and recognizable\u2014and they want all the buttons on their site to look the same. The goal\u2014with this and other UI and UX design tricks\u2014is ultimately to remove friction from the on-site experience. Without friction, distractions, or hiccups along the way, it\u2019s easier to guide visitors to the end goal (i.e. conversion).<\/p>\n

#5. Imagery<\/h3>\n
\n
\"Consistency-Telecom
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.<\/figcaption><\/figure>\n<\/div>\n

One of the things I remember many of my clients struggling with was the image selection process. There\u2019d be times when I\u2019d 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.<\/p>\n

#6. Interactions<\/h3>\n

What\u2019s 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.<\/p>\n

7. Reading<\/h3>\n
\n
\"Consistency-Arngren
Ahhh… Brutalism at it’s finest. I can’t even with this one.<\/figcaption><\/figure>\n<\/div>\n

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 \u201clearn\u201d 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.<\/p>\n

#8. Testing<\/h3>\n

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

Also, if you should find that a common element found across your site performs better when it\u2019s a different color or placed in a different spot, this will make adjustments to the rest of the site easier to manage.<\/p>\n

#9. Rhythm<\/h3>\n
\n
\"Consistency-NY
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!<\/figcaption><\/figure>\n<\/div>\n

Giving your site a logical rhythm and flow contributes to a consistent design as well. For example, let\u2019s 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.<\/p>\n

10. External Factors<\/h3>\n

One other thing I want to point out is the fact that consistency isn\u2019t always about what you\u2019ve established across your site. Sometimes it has to do with playing into visitors\u2019 expectations.<\/p>\n

I\u2019ll use the logo placement research Brenda talked about here<\/a> as an example. While it might seem cool to put your logo in the middle or on the right side of your site\u2014or even to make it disappear at some point\u2014that\u2019s 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\u2019s performance as well.<\/p>\n

Tools to Ensure Consistency in Your WordPress Site\u2019s Web Design<\/h2>\n

As I mentioned earlier, multiple rounds of QA at the end of an already long web design project aren\u2019t always enough to ensure that you\u2019ve maintained consistency throughout your site. That\u2019s why you should have a set of tools to help you keep consistency in check while<\/em> you work.<\/p>\n

Here is what I recommend:<\/p>\n

#1. WordPress<\/h3>\n

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