Are your fresh design ideas no longer fresh or are you a designer who continually re-uses the same old and trusted design patterns that have followed you for many a year? Or, you might just be a UI designer that is stuck in a rut? If you are looking to change all that, then this is the post for you.
This article offers inspirational UI resources as well as showcasing the best in design pattern solutions. Whatever your need for all of the sites and resources below, they all offer one thing in common… they all strive for better User Experience one design pattern at a time.
It does not attempt to be a substitute for creative design, it simply seeks to describe what you probably already know and have learned about, by offering solutions to common design problems.
Welie.com – Patterns in Interaction Design »
GUIdebook has been designed to be almost an online museum of graphical interfaces. This labour intensive site has been put together, clearly lovingly, by Marcin Wichary, whos admiration of those old and obscure interfaces has driven him to desperately preserve all, so as not to be forgotten. What a great job he has done!
You can use this site in two ways – as a way to look back and refresh some nice memories from a bygone era, or if are interested in seeing the evolution of GUIs throughout the decades (and it is fascinating to witness that). Either way, this is a must bookmark for anyone that even takes the slightest interested in GUI.
Not only does this huge repository have some marvelous vintage interfaces it is also has a mighty fine collection of GUI related articles that date back through the decades.
GUIdebook: Graphical User Interface gallery »
By not only listing different ways of solving common design problems, but also rationalizing about how, when, and why such solutions should be used, it is the goal of the site to create a tool that will help end future debates, get a clear understanding of why you’re doing what you’re doing, and why we’re not doing what we’re not doing.
UI-Patterns.com is an attempt to over time create a library of such solutions to common problems. It seeks to better the situation for the UI designer, who struggles with the same problems as many other UI designers that have struggled with before them.
Quince UX Design Patterns Explorer
Quince (pronounced kwinse) is a rich, interactive user experience (UX) design patterns library were you can search for patterns by keywords or explore all patterns, by task, by tag relations, or by wireframe.
The idea is to allow you to explore patterns via their relationships, which are based upon like tags, e.g., patterns tagged with Navigation were also tagged with Data Entry and so on.
Quince UX Design Patterns Explorer »
Pattern Tap : Organized Web Design Collections
Pattern Tap was born out of a love for the best interface designs on the web. The developers of this fantastic and popular resource wanted a place where all UI designers could come and easily find the solutions they were looking for.
Pattern Tap is here to hopefully satisfy and encourage the inspiration needs of all interface designers and they aspire to be the design tap for your next inspiration need.
Pattern Tap : Organized Web Design Collections »
UI Pattern Factory is a resource for everyone who needs to design or develop user interfaces. It is a collection of Web design patterns, best practices, which will help you find inspiration and design interfaces with great user experience.
The goal of the Konigi Showcase is to prove the point that design patterns are nice, but innovation for the sake of improving contextual experience is better. This site is also about demonstrating the idea that not only is it the job of the UI/UX/GUI designer to give users what they expect and think they want, but more importantly it is to give them what they need and might not be able to express.
Smashing Magazine offers many in-depth articles, fresh resources and inspirational showcases that focus on UI. Whereas every other resource on this page may offer solely design patterns and solutions, Smashing Mag offer a wider array of topics:
Designing Social Interfaces: Overview and Practical Techniques »
Enhancing User Interaction With First Person User Interface »
10 UI Design Patterns You Should Be Paying Attention To »
12 Useful Techniques For Good User Interface Design »
10 Useful Web Application Interface Techniques »
Read more UI articles on Smashing Magazine »
UI Scraps: user interface designs found by Jason Robb
UI Scraps is a personal collection of good, bad and noteworthy user interface designs found by Jason Robb.
UI Scraps: user interface designs found by Jason Robb »
Yahoo! Design Pattern Library
At Yahoo!, a pattern most often comes into the library via the traditional design process. Within the context of a product design cycle, a solution to the common problem is created.
The solution, within the context of a property or specific product is tested and iterated. Design research and designers collaborate and will test the range of low-fidelity prototypes to final product usability testing. Data is collected and those results inform the solutions offered in the pattern library.
Yahoo! Design Pattern Library »
Blink Interactive is a Seattle-based user experience consulting firm who have compiled this informal yet extensive design library of design examples with commentary.
Elements of Design is a different type of web design showcase focusing on the specific aspects of web design: Comment forms, calendars, footers, forums, mega drop-down menus, login forms… it covers everything! Excellent resource.
UIZEN – Showcase of best online/web application user interface design.
There are many CSS/Website galleries but they do not help solve Web Application, CMS or a back-end problem. This is where UIZen comes in, they showcase good User Interface Designs from around the web so you next Web Application or back end is not only usable but also good looking.
UIZEN – Showcase of best online/web application user interface design. »
ecommr is a website that showcases the best (and sometimes worst) in e-commerce design, with a clear focus on the individual elements that make up an online stores.
They break down retailers and focus on individual user interface elements in order to offer a gallery of inspiration for designers, developers, information architects, and for anyone working with online retail.
They go through e-commerce sites with a fine tooth comb and take screenshots of all of the elements that they may find interesting. These are then posted on the site and neatly categorized and tagged by both the Retailer and the type of Element.
The Open Source Design Pattern Library is a place where individuals and organizations can share, collaborate, and discuss design patterns. The OSDPL aims to become a community where designers, developers, and other people interested in patterns can come to reference material, collaborate on patterns and designs, and share their knowledge with everyone.
The collection, which hasn't been updated from 2003, does not primarily consist of GUI designs of common software, but tries to outline the recurring design problems faced when trying to create good design.
The collection consists of user interface design patterns (interaction patterns) that seems to be recurring problems when trying to make design based on the user’s goals. These design patterns have been analyzed during the past years by going through hundreds of designs, to give instructions and design examples to the students of design courses at the University of Helsinki, Dept. of Computer Science.
It provides a more focused inspiration than your typical CSS galleries (which only display full sites), by dividing web site elements by categories that can then be found found in the collections section.
UI Patterns is a growing collection of User Interface Design Principles and User Interface Usability Patterns.
UI Patterns »
CSSbake doesn’t look at the complete package a website offers. It doesn’t even look at the complete layout – CSSbake focuses on the little details that make up a larger composition, it focuses on the ‘ingredients’ of a website.
The patterns and examples on this site help you create websites that the color blind will be able to use without any loss.
We are Colorblind – Patterns for the Color Blind »
This blog is intended for both user experience practitioners as well as anyone involved in product design and development. Often, when creating designs or experiences, it’s easy to forget the “big picture” behind why you’re creating what you’re creating. It’s nice to have a little reminder of how important user experience really is and how it impacts everyone’s everyday lives.
inspireUX – words to inspire user experience designers »
Ember – User Interface Design
Ember – User Interface Design »
UI Flickr Groups
Web Design Inspiration on Flickr »
A collection of screenshots of websites that have been found to be inspirational, interesting or otherwise attractive.
Design Patterns on Flickr »
This collection captures findings of consistent, unique or interesting interfaces and design flows from across the web.
Interface Insults on Flickr »
Have you ever been insulted by an error message on a website or in an application? Take a screenshot and post with this group…
- Attack of the Blob-Based Animated Backgrounds in Web Design
- 8 Fascinating UI Concepts for eCommerce Websites
- 8 Fantastic Onboarding Carousel HTML & CSS Snippets
- The Tiny Short Animation Trend in Web Design
- The Design Trend of Utilizing Monochrome Colors in Hero Areas
- 10 Beautifully Designed, Minimal & Name-Centric Business Cards
- Exploring the Beauty and Power of Volumetric Backgrounds in Web Design
- Keeping Time: A Collection of Clock and Timer Code Snippets