![thumbnail](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/09/thumbnail19.jpg)
How should you approach UI design patterns?
We use design patterns all the time, if you're unfamiliar with them you probably haven't realized that they're all around you. What about the classic example of having too much content to display on one page? We turn our attention to 'Tabs', a design pattern that enables us to serve all the content we want, without making the user disappear in a sea of links. The typical benefits for using a design pattern include:- showing beginners how to use best practices in web design;
- learning to adapt to collective understanding of designers;
- allowing for better communication, reducing the risk associated with unfamiliar choices;
- reducing the necessary time and costs workflow to carry out specific tasks;
- avoiding wasted time on building something that’s been built before;
- giving the user an experience that he’s familiar and experienced with (the nature of design patterns).
![clicky](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/09/clicky.jpg)
- Navicon — a universal symbol for menu, otherwise known as site navigation, is becoming increasingly popular in modern web design, but has already been fully adapted to mobile devices.
- Parallax Scrolling — a unique design pattern that enables single page website, with an easy to use scrolling mechanism, but also includes a list of background sprites that give the page a lively feel.
- Problem summary: what user problem are you solving? Stay focused, and phrase it like a user story – in one sentence only.
- Solution: how have others solved this problem? A few things to detail include user navigation (including shortcuts), getting user inputs, dealing with data and integrations with other services or applications, and displaying information and content (including defaults).
- Example: great, can you show me? Sometimes a screenshot or mockup is sufficient; other times, user flows and/or additional notes are necessary to clearly communicate the pattern.
- Usage: when should this pattern (not) be used? A few things to detail include product architecture, interface layout, device(s), programming language, absence or existence of other design patterns, type of user, and primary use cases.
The rise of UI toolkits
UI design patterns have always been about making it easier for the user to navigate your website, application or system. If the user learns how to submit a comment for the first time, chances are he will instantly know how to send you an email using the contact form, it's the same repetitive concept of information input. In the recent years, we've seen an enormous growth in the UI toolkit market. A UI toolkit can be simply understood as a set of widgets that let you build a fully graphical application from scratch. Twitter Bootstrap is a perfect example of a successful UI toolkit. These days, a large proportion of web designers will rely on Bootstrap features to ease their own workflow. In a sense, there is no need to reinvent the wheel!3 UI design patterns to remember
In short, design patterns are solutions to recurring problems. By utilizing patterns we can overcome simple user interface problems. If we pay close attention, we notice that patterns are all around us. There is nothing special about that specific design, it's the way it has been applied that you're excited about!Crystal Clear Calls-to-Action
The simplest of web forms (and also, the most common ones) will usually have just a single actionable button: in this case ‘Create Website’. It’s pretty self-explanatory, which is the point. How much more easy could it get, right? Always go for the easy option, don't reinvent the wheel just to stand out from the crowd.![wordpress](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/09/wordpress.jpg)
Breadcrumbs to the rescue
Breadcrumbs show the path from the front page of the site to the current location of the user in the website’s page hierarchy. They are a form of secondary navigation that helps users understand the hierarchy and structure of the website. Breadcrumbs start with the home page and end with the page currently being viewed. In this example by Fares Farhan, we see how he utilizes two UI design patterns at the same time. First, he has got the tabs pattern on top, and second the breadcrumbs navigation pattern on the bottom. By having combined them together he makes for a very pleasant browsing experience.![breadcrumbs](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/09/breadcrumbs.jpg)
Registration should be easy
Unless you’ve been living under a rock, you’ll be aware of social registration. Registration to a website is a common thing to do, and so should be made as easy and pleasant as possible. This is one of my favorite registration pages at the moment. It's the GitHub homepage, and as you can see in the screenshot everything that company stands for is presented in less than hundred words. You also have the ability to register on the go, and the process takes less than a minute to complete. You'll get an email to verify your account, but that is something that we're used to anyway!![github](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/09/github.jpg)
Final Words
I've built websites for over eight years and during those eight years I've realized that simplicity is the key to many design problems. I have come to a conclusion that clutter in design, bloated with unnecessary elements and forms is the most frustrating experience that you can find on the web. Yes, design is exactly how something works, so why not make it work properly? User interface (UI) is incredibly important to the success of your business or venture. The best way to ensure you are designing successful sites is to learn from and utilize existing design patterns.Alex Ivanovs
Alex loves to immerse himself in a subject that he is writing about, not only does it help him to escape in peace, it enables him to learn, and grow at the same time. He is the force behind CodeCondo; a web development community for aspiring developers and webmasters, and Ecommerce Platforms; a blog for new online shop owners. You can follow him on Twitter and Google+.
Read Next
15 Best New Fonts, July 2024
Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…
By Ben Moss
20 Best New Websites, July 2024
Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…
Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance
WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…
By WDD Staff
Exciting New Tools for Designers, July 2024
Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…
3 Essential Design Trends, July 2024
Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…
15 Best New Fonts, June 2024
Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…
By Ben Moss
20 Best New Websites, June 2024
Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…
Exciting New Tools for Designers, June 2024
In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…
3 Essential Design Trends, June 2024
Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!
15 Best New Fonts, May 2024
In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…
By Ben Moss
How to Reduce The Carbon Footprint of Your Website
On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…
By Simon Sterne
20 Best New Websites, May 2024
Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…