If you’ve ever ran your own site, or simply have a general interest in UX, then you’ve more than likely came across web design patterns before.
You might not know what they mean exactly, but you’ve still come across the term, regardless.
Web design patterns — otherwise known, or referred to as user interface design patterns — are there to actually help designers when mapping out websites and how they look (the hint is in the name).
The look of any website is tied to its feel, in that visitors pay attention to the visual aspects over, say, the content that’s presented to them.
This is what makes web design such a difficult task, and why so many choose to go with an agency to help them out.
It’s like: how do you navigate crafting something that is visually appealing, but also easy to navigate, while reflecting the originality of the brand in question? It’s the UX equivalent of spinning plates, only there’s a lot to lose should you drop any of them.
The most obvious being: interest in what it is you do.
Not to worry though!
In this post we’re going to be breaking down what web design patterns are, and why they’re so important to begin with.
What are Web Design Patterns Exactly?
We’ll start with the elephant in the room, a definition of what website patterns are.
So here goes:
Web design patterns are a set of guidelines for designing the user interface on a website..
It’s not one set template or one set design that you need to follow — if it was, everyone’s websites would look near identical to one another.
Could you imagine a world where sites like Under Consideration (one of the best looking sites there is) didn’t have its signature look?
Basically, a website design pattern is there to solve user-centric problems, to ensure that they can easily navigate your site with ease, and not run into any issues that slow down them down in some way or another.
Or cause them to leave your website and visit another.
For example, cards, those you’ll find spread about countless social media platforms and websites, exist to split information up on a single page.
The Benefits of Web Design Patterns
You might be asking yourself: why don’t designers ever stray away from these website patterns?
Some do. Artists and individuals from graphic design backgrounds will often break these moulds to create something that is remarkably eye-catching.
Still, what works for them wouldn’t necessary fly for a B2B business, or someone looking to make money that isn’t in the arts and entertainment sector.
You can split the main benefits of web design patterns into two main reasons, those being:
- Patterns ensure quality UX
- They streamline design/the process
While the two are kinda self-explanatory, we’re still going to break them down to provide context.
Web Design Patterns Ensure Quality UX
Ever heard the saying:
If it isn’t broken, don’t fix it?
Yeah, that applies to web design patterns pretty much in that they provide tried and tested methods, or guidelines in crafting websites.
They also appeal to designers of various experience levels.
Web design patterns are universal in a sense, in that they exist as a sort of code that is readable in every language. A visual language, of course.
Sure, those starting out will more than likely treat these patterns akin to a bible.
But don’t forget about the intermediate to expert designers that will always refer back to these patterns should they get stuck — or need of a refresher.
Streamlining the Design Process
Inventing solutions when they already exist to the problems you’re having seems super counter-intuitive.
Web design patterns streamline the design process as they provide accurate solutions to problems you’ll more than likely run into when designing a site.
Think about it, these patterns are data, data that tells you what to do/not to do.
What’s more, most of these website patterns are very easy to pick up and understand. Anyone who’s looked at a website for longer than 5 minutes should have come across some of these patterns already, even if they didn’t know it at the time.
Examples of Website Patterns
Just reading the definitions of website patterns is pretty limiting when it comes to understanding what they are, how they help, etc.
Which is why in this section we’re going to be sharing various examples of web design patterns. When looking at web patterns, it’s important to recognise how they’re categorised.
Some are navigational based, others touch on how responsive everything is. The hamburger, for example: navigational. Or the pull down to refresh: responsive.
Now, let’s look at a few examples.
Shopping Carts
Some would call it one of the most popular web design patterns there is, one that you’ll find on every ecommerce site.
We’re of course referring to shopping carts, you know, the feature that allows you to add products to a dedicated list, allowing users to remove, or increase the quantity of whatever’s in there.
Yeah, that’s an example of a web pattern. A pattern that is so popular, most wouldn’t consider it a pattern to begin with.
You’ll find that most patterns are a case of following something known as ‘common sense.’
Grid Layouts
Look at any noteworthy website and you’ll notice that everything is set out accordingly. The space between sections is well laid out, and it isn’t nearly as cluttered as it could be.
Developers have grid layouts to thanks for that.
A grid layout is pretty self-explanatory in that it essentially maps out and divides a webpage into columns, splitting everything up all evenly.
Typical page elements will break down into a 12 column grid that runs vertically and horizontally. Doing it this way ensures that the webpage flows a certain way without any overlap.
It’s worth noting that designers do have free rein when it comes to sizing or spacing. The grid is simply there to keep everything nice and tight.
Wizard
Have a complex series of steps that lead to a single goal?
Seek the help of the wizard, a way to break down the processes under each, one step at a time. Think of it more as a method than a descriptive solution, a thought process that maximises the likelihood of your goal.
How you use the wizard is up to you, although you’ll find that it comes in handy, mostly, whenever you find yourself putting together certain processes, such as:
- Creating an account
- Getting through a checkout
- Completing an online survey
- Following a tutorial
The wizard recommends that at each stage, clear language must be used, followed by a button to navigate backwards should users need to make any alterations before proceeding.
The Hamburger
Just mentioning the word ‘hamburger’ has me hungry, only in web patterns, a hamburger refers to something completely different.
A hamburger is the name given to those little horizontal lines you see in the top corner of most sites, be it on desktop or mobile. That being said, for UX purposes, you’ll mostly find this little guy on mobile.
Its purpose is to declutter the nav bar on both mobile and desktop devices, not to mention make travelling a website all the more easier.
Clicking, or tapping on the hamburger with your finger, should open a contents page of sorts, linking off to other key areas of the site.
The hamburger is often slightly bigger on mobile, this is to make it easier to find and interact with.
One Finger Navigation
Not everyone is operating a mobile phone with two hands all the time, this poses an interesting thought in the minds of developers.
After all, some parts of a website are a lot harder to interact with when the user is holding and touching on areas with their index finger.
Try touching the top part of the screen now and you’ll see how difficult it is. This is why most mobile sites keep all of the important information somewhere near the top quarter, middle or bottom part of the screen.
One finger navigation is one of those areas that most don’t think about whenever web design conversations are brought up.
Pull to Refresh
If you don’t know what we mean by pull to refresh, simply head over to Instagram or any other form of social media with any kind of feed built into it.
We’ve included an example using our own Instagram account as seen in the image above, for reference.
Now drag the feed down and watch as new content is loaded onto the screen as per your request! This is a web design pattern that is very handy to have if you’re constantly adding new content to certain pages.
It’s such an effective way of giving users a reason to stay on a site if they feel like there’s something new coming.
It goes without saying, but with pull to refresh it’s important that users pull all the way down and release, otherwise, the feed won’t refresh.
Modal Window
Modal windows are a real attention-grabber as and when you need them.
They’re similar to pop ups in that they deactivate everything else on a single page to pull focus to this one box. Within that box is information, or ways to adjust the site to fit the needs of the user.
For example, you might find that the box opens and in it are various language options to choose from — as is the case with Pinterest.
Top Tip: Try to use these sparingly as it can be a bit spammy if you use them more than once (twice if you’re lucky).
An Infinite Scroll
Getting to the end of a page and having to manually click on the next page can be frustrating from a user’s point of view, more so if there are over 30 pages.
This is where the infinite scroll comes into play, a web design pattern that is like a bottomless pit of information.
Perfect for retaining the attention of your audience.
When crafting websites it’s important that the infinite scroll is categorised so that the information/images/or whatever is relevant to the user.
Shoving everything on there in one go is sure-fire way of increasing your bounce rate, which isn’t what you want, for obvious reasons.
Drag and Drop
Uploading content to a website is made a hell of a lot easier with the help of drag and drop uploads.
The ability to simply drag assets from your desktop straight into a window does cut through a lot of the noise in that you don’t have to find the file in your computer manually.
That being said, you should always add a ‘browse’ button of some kind so that users have some way to upload content.
Credit to Redbridge Tuition
A Breadcrumb Trail
Last but not least we have the breadcrumb trail, those you’ll find sitting near the top of a web page most of the time.
A breadcrumb trail essentially lets users know how deep into a website rabbit hole they’ve ventured, only it gives them the chance to jump back with ease instead of having to hit the back button repeatedly.
Placing an arrow in between each section is great for the user, especially those that might not be as tech-minded as others.
You might choose to implement breadcrumbs on sites with a lot of information or documentation on them. User’s tend to get lost on these pages, so it’s important that you provide a loose guide for them to use.
Why are Web Design Patterns Important?
Guides are there for a reason: to steer you away from certain issues to ensure you deliver.
And web design patterns are no different They exist to give web designers something to use as a reference point when creating websites.
Knowing the fundamentals is ideal if you’re going to go off on your own to create a website of your own, instead of seeking the help of an agency or using a bog-standard template.
When do Website Patterns Come in Handy?
Keep in mind that web design patterns are very helpful to refer back to when you’re constantly updating a site.
While they do come in clutch when crafting your website initially, you should always be looking to improve things once it’s up and running. And when you do, you’re going to need a guide to keep you on the right track.
For example, you might decide to add an ecommerce section to a website, which will obviously require a near complete overhaul of everything you see.
If this is the case then you best get reading up on the relevant website patterns!
Do you Always Need to Follow Web Design Patterns?
Following a web design pattern is simply a suggestion — albeit a very stable suggestion. You should only really stray from these UI designs if it benefits you in the long run.
In other words, if you work in a very competitive B2B industry, then you probably shouldn’t do anything too extreme, as doing so could jeopardise everything.
If something off-kilter would work for you, then maybe you could go against the grain.
“Digital design is like painting, except the paint never dries.”
— Neville Brody
Experimentation fuels innovation, and designers have a habit of changing things up a bit all the time to avoid creating the same thing over and over again.
Where Can I Find Web Design Patterns?
Other than reading blogs and other internet resources, there are many ways to find web design patterns, most of which are shared by other web developers.
The internet offers an endless supply of knowledge, with no shortage of info on UI design patterns. You need only look in the right places.
Google Developers
The most obvious choice for many aspiring UI designers is Google Developers.
Under the fundamentals tab within Google Developers you’ll find everything you could ever need to get started — including various web design patterns.
Understand that Google Developers, although helpful, is a very entry level resource. If you’re looking to hone your website skills even more, then you should probably check out the next source.
UI Patterns
Another great source is a site known as UI Patterns. This website is essentially the Yellow Pages for web patterns. The information here is shared in such a way that makes it very easy to pick up.
There’s also a rationale to everything, to ensure that everything you’re doing is with intent.
What’s more, the site is constantly updated with new and interesting patterns. It’s like the UI gift that just keeps on giving!
Inspiration and Pinterest are like two peas in a pod.
There are hundreds, if not thousands of web design pattern tags on this image-sharing platform for you to sit and sift through. Some are a little basic, but it does give you a better idea of how these patterns are used in application.
If you’re looking to craft a user friendly website, and prefer learning through images, then Pinterest is the place to be.
What are Web Design Patterns and Why Are They Important?
You should have a pretty good idea of what web design patterns are and why they’re so important at this point.
We’ve covered a lot of info here, from the benefits of utilising patterns or guides shared by other UX designers, to the common examples of UI patterns you should already be familiar with.
Creating a website is tough when you don’t have a lot of experience in putting one together. How else could you explain the number of brands that settle for templates and sub-par website services?
Templates or original websites made from scratch that capture your brand for what it is? Which do you think is better at generating results?
There’s nothing more appealing than a well-designed, well thought-out website. One that utilises the right patterns based on what’s needed for your website to be the best representative of your brand possible.
We’ve helped so many brands turn their goals into results through the websites we’ve made for them. Everyone from DP Fasteners to Opi Frutta.
If you’d like a website to call your own then get in touch with Canny.
You can either send us a web design brief, or simply tell us what you’re looking for directly.
Website Patterns FAQs
What is a design pattern in web development?
Think of website patterns as templates for developers to use and follow when crafting websites of their own. The established design patterns you come across are tried, tested and shared by other experienced developers.
Where can I find the best UI design patterns?
One of the best resources is a site known as UI Patterns. This site is home to thousands of patterns, complete with all the relevant information needed. Plus, it provides a lot of context to why you’re doing what you’re doing.
What is a MVC?
A model-view-controller — often known as a MVC — is a software design pattern, used for developing user interfaces that group logic into three interconnected elements. It’s a popular web design pattern, meaning you’ve probably come across it once or twice already.
