Web Design Standards: Guidelines for Consistency

Marc Avila

One of the things that make a website looked polished and on-brand are web design standards they’re based on. That’s right, at the core of every great website you’ve visited lays a set of unified design principles established to bring order to what could quickly turn to chaos.

What Exactly Are Web Design Standards 

The web standards movement got started in 1998 and has developed tremendously since that time. The most commonly used web design standards by developers have come from the World Wide Web Consortium (W3C) although some have come from other organizations like the  International Organization for Standardization (ISO).

web design standards w3c
W3C is a comprehensive collection of web design standards that are always evolving.

Essentially they are a communal set of tools and concepts which, when employed correctly, create consistent, beautiful, and easy-to-use websites.

Why is that so important?

For starters, did you know that 94 percent of first impressions on any given website is design-related? And, on top of that, 88 percent of users say they won’t even return to a site if they have a bad experience. But, what makes a user experience good versus bad?

Web design standards are designed to tell us just that.

Some examples of web design standards that relate to the physical appearance of a website might include guidelines on the following:

  • which fonts to use
  • font sizes
  • which colors to use and where
  • the style of clickable buttons
  • navigation menu placement (Web design standards say it should be across the top of the page)
  • location of the Contact Us button (It’s best practice to add this button to the upper right-hand corner)
  • where to put the search feature

And so on…

Of course, web design standards also go as deep as how the code for websites is written… 

Web Design Principles Aren’t Just About Aesthetics Either

computer screen with html code displayed on black background
Web design standards cover both the aesthetic feel and behind-the-scenes performance of your site.

Some of the most obvious benefits include consistency, usability, clarity, and branding. A lot of this directly relates to the aesthetics, but not all of it.

Web design standards give users a predictable experience, helping make the process of navigating your website easier and intuitive. This is both visual as well as hidden behind the scenes in the code.

There are less visually obvious benefits as well including: 

  • Ensuring sites are backward compatible with older browsers
  • Improves forward compatibility, making sure they will still display correctly on new browsers
  • Provides a more stable web experience across all types of devices such as laptops, tablets, and smartphones
  • When coding design standards are employed, they also increase search engine ranking by ensuring they are indexed properly
  • 508 compliance which ensures websites are able to be accessible by individuals with disabilities

FURTHER READING: Advocate and Service Provider for the Rights of Individuals with Disabilities: CORD (Cape Organization for Rights of the Disabled)

Clearly, those are all important to the way visitors interact and, ultimately, perceive your website. Additionally, they make the development of your site, both present and in the future, easier, more organized, and faster.

With all that in mind, applying web design standards to your website is a no-brainer. Yes, your website should use them!

Where To Find Web Design Standards

What’s great about working with a developer or agency like 3 Media Web to build or redesign your website is that they’ll come well versed in web design standards. After a consultation to establish a clear vision of your brand needs, they’ll know which standards will most effectively reach your goals. 

There are also plenty of resources available online as well. 

screenshot of the web design standards from ISO
Though a smaller collection of web design standards than W3C offers, ISO is another great resource.

We’ve already mentioned the web design standards put in place by W3C. There’s a lot of information on this site, but that’s what makes it one of the most comprehensive collections of web design standards. It’s always growing and improving thanks to the open-source developer community that operates it.

There’s also the ISO set of web standards which we also mentioned previously. These standards aren’t as comprehensive as W3C, but the two do interplay with one another.

Their complete list of standards currently available can be found here.

Webpage showing the buttons government websites should use in their web design
The U.S Web Design System official site shows dozens of button varieties different government websites currently have, and discussed new standards for fonts, colors, and other design elements. 

 Another research avenue you may want to peruse is the United States Web Design System. That’s right, the United States government has its own set of web design standards that help them keep a cohesive feel across all government websites. You can find them here.

They include things such as a style guide to dictate which fonts and colors to use as well as common user interface components such as buttons and other elements commonly found on websites.

Tips and Advice To Build A Consistent Website Using Web Design Standards

Web design standards are a communal effort. They’re about what works best for most people and the best way to figure that out is through consensus. 

Fortunately, there are tons of people out there who study web design standards and are actively participating in the conversation about it. That means there are many additional resources available outside of the highly technical guides we linked to in the last section. 

FURTHER READING: Four Necessary Steps to Take Before A Website Redesign

Whether you’re inspired to do a complete overhaul or are looking for small changes to improve your website, these articles can help.

Master The Tangibles

web design standards abstract painting of wireframes
Before you start thinking about design aspects, you need to have a written plan about what each pages’ purpose it.

Before you start writing code for your new website or thinking of what fonts, colors, and imagery to use, you need to have a plan. 

What is each page trying to accomplish? Where do you want the user to go from the page they’re looking at? How does the website interlink with itself?

Remember, first comes the plan, then comes the design and content.

As this excellent ebook from UXpin teaches:

“Figure out the goals of each page, then start mapping out the messaging for each site section. Examine the relationships between pages, and once it all makes sense, start actually creating your content (text and images). When you have workable drafts, you can then start wireframing and prototyping around the rough content. The approach gives you a solid foundation of content to sculpt your design around.”

Current Trends: Is Minimalism The Way To Go?

Yes and no.

The minimalist trend has been around for a long time. More and more web developers and website owners are using the style choice to give them a clean, polished look. 

turned on MacBook Pro with ecommerce website open beside gray mug photo
Sometimes less is more, but not always.

An interesting note from the ebook we talked about above details the trend of minimalist design and why it works so well in modern web design.

…and why sometimes it doesn’t work at all.

There are certain types of businesses and sites which minimalism works well on, but it has its limitations just like any design concept. E-commerce sites, like Amazon, for example, would be underserved by minimalist design because they are too complex. 

Of course, that’s not saying it’s impossible, but extra-thought does need to go into it to pull it off. Something to keep in mind!

Small Tweaks Have A Big Impact

It’s common knowledge good copy sells and is an integral part of any business website. But what’s talked about less is how it’s displayed.

As Business2Community so accurately points out:

“With all the more complex design decisions of landing pages to distract us, it’s easy to forget the simple fact that readership equals revenue. If our copy is hard to read, it won’t get read.”

They’re not just talking about the phrasing of your content either.

Since the copy is what inspires people to purchase from your website, they need to be able to physically read it. That means using a clean font at a size that’s easy to see.

looking over the shoulder of a man browsing the internet
Use text that is large and clean, making it easy to read.

 That means no unusual cursive fonts for page copy. And don’t even think about using a pixel value to set the size of the font. Since all screens will vary in size and pixel density, what is 14px on one device may look completely different on another. 

There are web design standards dealing with the coding end of things that allow developers to set the font size to a percentage instead of a pixel size. That way, the browser will automatically render the text in an ideal size to be viewed on that device.

Current Trends: The Iconic Hamburger Icon

Does the icon in the upper right-hand corner look familiar? The one that’s three bars stacked on top of one another?

example of the hamburger icon on the 3 media web mobile site
The hamburger icon, seen here in the upper right-hand corner, has become a favorite among web designers who appreciate it’s compact style and recognition factor.

Chances are you’ve encountered the “hamburger icon” on more than a few occasions while browsing the web. 

This may seem a bit like a wildcard on the list, but, for better or worse, this icon has become nothing short of iconic. This deliciously named icon is everywhere on the mobile web. And the hamburger icon is diligently trying to extend its reach to desktops and other applications too. 

It’s a great example of a web design standard and how they work–it’s achieved widespread recognition by people as a clickable option to see a menu. This was possible thanks to web designers worldwide adopting it as a web design standard.

“For designer/developers, the main draw for using the hamburger icon in a desktop application is the ‘clean factor.’ Minimalist design continues to gain popularity, so of course, the impulse would be to strip away everything but the most basic elements.”

Sitepoint

Though the hamburger icon does have its disadvantages, it still serves up exactly what it was intended to do–simplify navigation.

By giving the option to hide cumbersome navigation menus by keeping them tucked away until clicked, the hamburger icon provides a working solution that satisfies modern design trends.

Does Your Website Deliver A Great Customer Experience?

You know the old saying, “don’t judge a book by it’s cover?” As good as advice as it is, the majority of people will disregard it entirely when it comes to your website. 

In fact, 57 percent of people will not recommend a business if their mobile website experience is poorly designed. And 50 percent will stop visiting your site if the experience they have when visiting your site is bad.

The facts speak for themselves. But, the reality is, they’re easier said than done. What even makes for great customer experience when it comes to websites?

What Makes a Good Customer Experience?

According to this HubSpot survey, the answer is pretty straightforward.

Seventy-six percent of those polled in the study agree that the most important aspect of web design is that the site makes it easy for visitors to find what they want.

web design standards that provide customer experience are easy to navigate, accessible on any device, and provides good customer experience

That’s good news if you’ve been paying attention to the current web design standards. They’ll play a major part in making sure your website meets these goals.

DIY Or Agency?

What’s great about the web design standards being so freely available is that anyone can access them and apply what they’ve learned to their own web design. On top of that, there are plenty of templates available for novice website developers to work with.

But, are those really any good?

It’s a common question, you’d be surprised how often clients come to us asking it. We even wrote an entire article on it…

FURTHER READING: Custom Website Design vs. Templates — Let’s settle this.

As often as people ask us if templates are the way to go, you’d really be surprised to learn how often business owners come to us after having spent copious amounts of time and resources working with a template only to never be able to fully realize the vision they had for their site.

Based on our experiences and the experiences of some of our past clients have had before coming to us, we’ve concluded it worth the money to work with a web design agency or individual. Especially if you’re serious about growing your business.

wordpress plugins page with list of installed plugins
There are tools that make DIY web design easier. Unfortunately, they’re not always foolproof or straightforward.

The consensus says:

Templates = Amateur 

Custom Web Design = Professional

That being said, as the article states, there are few instances where a template might work for you. If you just need a basic website with basic information and don’t plan on upgrading the site in the future, a template may be the way to go.

However, if you’re thinking about piecemealing together a quick and dirty site with the hopes of redesigning and upgrading it in the future, a template will turn out to be more hassle than it’s worth.

Why?

Because you’ll be starting from scratch all over again, racking up more time and money that goes into your website.

We’ve covered a lot of ground today, but there’s still a lot to learn when it comes to web design standards. If not sure where to start or want to talk to an expert in the matter, feel free to reach out to us with your questions

The 3 Media Web team is here to help.

banner displaying a trophy and copy announcing 3 Media Web as a top 14 web design agency
And we couldn’t have done it without our incredible clients. Click the image to see more.
Questions to consider before you redesign your website
Related Posts
Image SEO (Why It Should Be a Top Priority)
Discovery: The Key to Success in Our Web Projects
Master These Three Top Ranking Factors Ranking Your Site on Google