July 28, 2008

This article contains any pattern libraries I have come across. The list is frequently updated.

I´ll start with introducing patterns for those who aren´t familiar with their purpose. If you already know what patterns are, scroll down to the big patterns libraries.

What are patterns?

Repository of conventions.
Collections of common UI elements, or a grouping thereof.
With discussion on why/when to use and visual examples.

Why use patterns?

The tricky thing about (interaction) design is that the answer is often ‘it depends’, as there is generally no reapplicable solution to a specific problem; the answer depends on the larger context, the flow of pages, the other elements in display, or the broader user experience.

Patterns try to get rid of this trickyness. In a way, they are ridding of interaction designers 😉 At times patterns are so abstractly defined (in text), so generic. The bottom line is, study and understand patterns, don’t just copy them.

Start here: design pattern search engines TIP++

See also Visual Fox (?)  (A-B test result search) in other post

More patterns

@Google images search e.g. “account overview” ui OR design OR UX OR usability OR “interaction design” OR “information architecture” OR wireframe

@Google images search with competitors e.g.”my products” OR “My services” account detail [Verizon OR “AT&T” OR Foxcom OR comcast

@Pinterest:   (can help you think out-of-the-box)

@ UI design: Dribble / BeHance /

@  Google Custom Search GCS  (see links below)


Pattern libraries

(in approximate order of popularity and personal preference;

tags desired: find related / see also patterns, e.g. alternatives to tabs)   +   (many more mobile/tablet)  (Now Zurb)  ++-  (down Feb2012) +   (also build your own custom library)   +  (curated, mobile, interactive   web & mobile screenshots, some flows  (onboarding = turning potential customers into paid sign-up OR acquisition OR guiding new users / tutorials – more see InnovatingUX.ppt)  +    onboarding , features, tooltips, screenshots  WATCH  (on-boarding, inspiration by site type)  –  shut-down (also private secure custom library; extensive use-when explanations)    SAP (Splash)  B2B and B2E (enterprise)  TIP Visual, tags, categories, technologies   More reward sites @ other post

Futuristic interfaces  and Pinterest on multitouch or NUI’s  animations, gestures   (2002, with page positioning usage data%) —  (more for UI designers, not UX/interaction designers; some technology CSS/HTML5 snippets. Bit outdated. Some Sketch UI kits via source links)
Yahoo! patterns (down but to be replaced by other site soon)   (Dutch startup?, TIP with bookmarklet to create your own pattern library from any webpage’s element) (mobile design patterns) (anti-patterns)    –  monster is paid.  (some graphical, style/trends of 2010, ..) +   (gallery of screenshots incl. mega dropdown menu’s, video players, mini shopping carts) – mainly graphical, some patterns  (404, calendars, pagination, …)   –  css,html   –  (outdated?)  Dashboards +
Forms @
Sign-up Form conventions @
ashboards, usage, graphs/charts, pie diagrams, monitor @   +  Quince +
Data visualisations, charts @

Dashboard, user profile, my account @  +

Dashboards @  intranets – Tables (open-source design pattern library)  (general inspiration – work of other designers with the tag “ux”) +    (also try Behanced?) TIP – Faceted Nav, etc. Well structured with ´solution elements´

Inspiration pattern libraries + (micro-interactions, mini delights and interaction details) by Floris Dekker (Etsy)  +  (curated marketing designs ideas/screenshots on page-level: homepage)  [hover alts @
More @  (scroll down)

Template libraries   (search for responsive, then select a Business category)

Responsive   –  one page responsive  (with tags)


Forms   mobile forms


See more above


UI focus   – animated

More – Pattern link directories

Smashing Magazine interface patterns resources   2009 😦   #inspiration  = pattern libs  (added 2018)



How to select & use patterns –


Templates are kind of like patterns, but for whole pages and predesigned. Lots of inspiration for generic standard solution.

Top best website designs

There are ample blogs and sites dedicated to collecting, what is to their professional opinion, the most beautiful designs. Emphasis on graphical design or minimalism.

Smashing Magazine

Writing patterns

Mobile patterns

See other post

Books with patterns

Design of sites by …


Forms that work
Luke W