UI Design Patterns – Our Recommendations

More often than not, a good User Experience is not about reinventing the wheel but putting together in a logical (and aesthetic) manner, interactions that the user is already familiar with. UI Patterns are a great way of incorporating well researched and established rich interactions into your application without getting into extensive research or testing.

There are a number of sites which compile commonly used UI Patterns, indicate what the pattern should be used for and also show you examples of how these patterns are applied across different examples. As a designer, it is then up to your discretion to see which pattern fits your requirement the best and adapt it to your solution. Most UI Design Pattern Libraries are also a great source of inspiration – keeps you up-to-date and also shows you how other designers are implementing them.

Having gone through a number of UI Patterns sites for projects in the past, I will list a few that I find the most useful.

Design Pattern Libraries

Yahoo! Design Patterns

Yahoo Design Patterns Library
Yahoo Design Patterns

One of the most useful Design Pattern Libraries for me is the one from Yahoo!. They have categorised their patterns into useful sections like Layout, Navigation, Selection etc which makes them easy to browse. They also tell you which Design Pattern solves what problem which further helps in selection. Helpful resources – like related patterns and pattern code examples – for both developers and designers have also been provided.

Designing Web Interfaces (by Theresa Neil)

Designing Web Interfaces
Designing Web Interfaces – Theresa Neil

A 3 part series of Design Patterns – Screen Patterns, Essential Controls and Common Component Patterns . This one is especially recommended for beginners as it explains in detail which screen pattern should be used in certain cases and also provides multiple showcase examples. Download the pdf for Standard Screen Patterns and keep it as your handy quick-reference guide.

UI Patterns

UI Pattern Tap
UI Pattern Tap

A good compilation if you want to see a design pattern applied across different examples. Another great source for inspiration would be Pattern Tap – select a interaction pattern and quickly see multiple examples of its usage.

Go through these patterns and soon you will find yourself talking like a pro UX Designer. Beware though; these patterns can just give you guidance and offer tips & examples on how to use them. They are not a ready-made solution for your particular requirement. You will need to do your due-diligence for that. Or just bring it to us and we will do it for you ;-).

[Since we are developing a lot of mobile applications now, I am also researching Mobile UI patterns now and will share if I come across some good resources. Do drop a link if you know of any.]

<!–[if gte mso 10]>

More often than not, a good User Experience is not about reinventing the wheel but putting together in a logical (and aesthetic) manner, interactions that the user is already familiar with. UI Patterns are a great way of incorporating well researched and established rich interactions into your application without getting into extensive research or testing.

There are a number of sites which compile commonly used UI Patterns, indicate what the pattern should be used for and also show you examples of how these patterns are applied across different examples. As a designer, it is then up to your discretion to see which pattern fits your requirement the best and adapt it to your solution. Most UI Design Pattern Libraries are also a great source of inspiration – keeps you up-to-date and also shows you how other designers are implementing them.

Having gone through a number of UI Patterns sites for projects in the past, I will list a few that I found the most useful.

Design Pattern Libraries

Yahoo! Design Patterns – One of the most useful Design Pattern Libraries for me is the one from Yahoo!. They have categorised their patterns into useful sections like Layout, Navigation, Selection etc which makes them easy to browse. They also tell you which Design Pattern should be used for what which further helps in selection. Helpful resources for both developers and designers have been provided along with the patterns.

Designing Web Interfaces (by Theresa Neil) – A 3 part series of Design Patterns – Screen Patterns, Essential Controls and Common Component Patterns . This one is especially recommended for beginners as it explains in detail which screen pattern should be used in certain cases and also provides multiple showcase examples. Download the pdf for Standard Screen Patterns and keep it as your handy quick-reference guide.

UI Patterns – A good compilation if you want to see a design pattern applied across different examples. Another great source for inspiration would be Pattern Tap – select a interaction pattern and quickly see multiple examples of its usage.

Go through all of these patterns and soon you will find yourself talking like a pro UX Designer. Beware though; these patterns can just give you guidance and offer tips & examples on how to use them. They are not a ready-made solution for your particular requirement. You will need to do your due-diligence for that. Or just bring it to us and we will do it for you ;-).

[Since we are going to be doing a lot of mobile application work now, I will be looking for Mobile UI patterns and will share if I come across some good resources.Do drop a link if you know of any.]

Enhanced by Zemanta

Published by

sunainak

Officially known as the Creative Team Lead at Ideafarms, all things interactive catch her fancy. Claiming to be comfortably dumb, she is an avid tweeter. You can also reach out to her at @sunainak.