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)

@ RollYo.. / 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)  (onboarding = turning potential customers into paid sign-up OR acquisition OR guiding new users / tutorials – more see InnovatingUX.ppt)  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

Futuristic interfaces  and Pinterest on multitouch or NUI’s  animations, gestures +   (also build your own custom library) –  (more for UI designers, not UX/interaction designers)
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, ..) (incl. mega dropdown menu’s  and mini shopping carts) – mainly graphical, some patterns  (404, calendars, pagination, …)   –  css,html  Dashboards +
Forms @
Sign-up Form conventions @
ashboards, usage, graphs, pie diagrams, monitor @   +  Quince +

Dashboard, user profile, my account @  +

Dashboards @  intranets – Tables (open-source design pattern library)  (general inspiration – work of other designers with the tag “ux”) + 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 on page-level)  [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


More – Pattern link directories

Smashing Magazine interface patterns resources TIP!



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


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: