Solve your web design problems with UI patterns

Have you ever taken a look at a really well-designed website and wondered how did the designer ever come up with that idea. How could I design something cool like this in a short space of time? How can I even get the inspiration to design something so good?

The answer may lie in understanding user interface (UI) design patterns.

The designer behind the website you are admiring likely has an understanding of how to use UI patterns in their design. It’s kind of like one of the best-kept secrets of web design.

A UI design pattern is a reoccurring solution to a common design problem.

Problems like:

• The user needing to navigate a content heavy page without becoming lost.
• A page has content that needs to stay out of the way unless it is needed
• The content that is to be displayed is unsuitable for just one single page

Encountering a design problem is an everyday occurrence for web designers, the UI pattern providing the solutions for these range in complexity and frequency of use. Design patterns are encountered on some of the most popular websites on the internet. Google, Amazon, Twitter and Facebook to name a few.

For an informed designer, the process of design becomes less about the elusive flash of inspiration and more about applying the correct pattern for the problem at hand.

In the end, a designer with a wide understanding of UI patterns will know the correct logical solution to the problem at hand and for new designers, this looks like genius from the outside.

What makes these designers look even more brilliant is the fact that design patterns can be broken down into reusable elements so the designer can quickly reproduce their work on a website with a similar problem.

When you start to understand UI Patterns you will see them everywhere.

UI Patterns feature heavily in the well-known popular websites because they work, they help the user find the content they are looking for and they help the website owner deliver the right kind of content at the right time. Top social medias sites and e-commerce sites are masters of these techniques and often become industry leaders in innovation as they strive to stay at the top.

There are a vast array of design patterns, too many to describe in this post but as an introduction here are a few examples:

Google.com

aaagoogle1

Google has many options available to its users but not every user want’s to see so much clutter on their visit so Google has cleverly added an overflow menu. The page is simple so the menu is easy to find.

Pintrest.com

aaapintrest

Pinterest has used a cards approach to solving the problem that their users will be uploading images of varying heights to this image search social media site. Pinterest has managed to make varying heights more beautiful in the process by using a card UI pattern and turning the look of variation from an eyesore to eye-catching.

Google.com (again)

aaagoogle2

Google know the user wants to get where they are going fast and to help them along they have added autocomplete into the flow of the design. Googles autocomplete has an uncanny ability to guess your search from just 3 or four words speeding up the process for the user and making them happy in turn.

Learn more at ui-patterns.com

If you are keen to learn more UI patterns and study design problems along with their solutions one of my favourite website to share with you is ui-patterns.com as this resource clearly explains, with images, many of the problems designers are likely to encounter and is organize in categories like navigation, forms, tables etc. It’s a fascinating read!

When applying UI patterns to your own projects, before you can start applying these pattern sIt started with understanding the Audience, what content is the visitor of this website looking for, what problems might they encounter. The process of doing so will pay well as the design process begins.

UI Patterns and web design themes

I think web design themes have a bad reputation and part of this is because the purchaser of the theme will attempt to bend the content to fit the theme, often a theme chosen because of superficial elements like colors, gradients, rounded corners etc and not paying attention to the needs of the content.

I don’t think of themes as inherently bad although when thinking like a designer and you start to understand UI Patterns you will find yourself becoming more critical simply because you know logically what you need and that becomes harder to find like a needle in a continuously growing haystack. So ask yourself why you like a particular theme and if you can replicate a style with a more suitable layout.

UI Patterns are not a magic bullet

There is no one size fits all UI pattern solution for web designers and every project is unique so web designers will need to continuously seek to study patterns in use and become familiar with a wide assortment of options.

The good news is there are many UI patterns that are staples of web design and the more you practice the art of identifying the problem the quicker your skills of applying the correct design pattern.

For me, as a person that is drawn to code more that design, understanding UI patterns has helped me formulate ideas logically without the block of thinking, I’m not a creative designer because I don’t need to be.