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).
- 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.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.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!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
LimeWire Developer APIs Herald a New Era of AI Integration
Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…
By WDD Staff
20 Best New Websites, March 2024
Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…
Exciting New Tools for Designers, March 2024
The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…
Web Tech Trends to Watch in 2024 and Beyond
It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…
By Louise North
6 Best AI Productivity Apps in 2024
There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…
By Simon Sterne
3 Essential Design Trends, February 2024
From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…
Surviving the Leap from College to Real-World Design
So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…
By Simon Sterne
20 Mind-Bending Illusions That Will Make You Question Reality
Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…
By Max Walton
15 Best New Fonts, February 2024
Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…
By Ben Moss
The 10 Best WordPress Quiz Plugins in 2024
Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…
By Robert Reeve
20 Best New Websites, February 2024
It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.
Everything You Need to Know About Image Formats In 2024
Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…
By Robert Reeve