Patterns

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

Rollyo.com

http://www.google.com/cse/home?cx=002511809528603050287:g97sidtolmw

http://www.uxforthemasses.com/design-patterns-search/ 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: http://pinterest.com/search/boards/?q=dashboard%20web%20OR%20ui%20OR%20UX%20OR%20patterns   (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)

http://patterntap.com   +   (many more mobile/tablet)  (Now Zurb)

http://ui-patterns.com/  +  (down Feb2012)

http://www.useronboard.com/  (on-boarding = turning potential customers into paid sign-up OR acquisition OR guiding new users / tutorials – more see InnovatingUX.ppt)

http://nicelydone.club/most-popular-products-patterns-categories/#lists  WATCH  (on-boarding, inspiration by site type)

http://quince.infragistics.com  –  shut-down (also private secure custom library; extensive use-when explanations)

Welie.com
http://konigi.com/

Futuristic interfaces https://www.noteloop.com/kit/fui/  and Pinterest on multitouch or NUI’s

http://uyi.io/  animations, gestures

http://patternry.com/patterns/ +   (also build your own custom library)

http://ui-cloud.com/categories/ –  (more for UI designers, not UX/interaction designers)

http://www.userplus.com/design-patterns-2/
Yahoo! patterns (down but to be replaced by other site soon)
http://discover.usabilla.com/   (Dutch startup?, TIP with bookmarklet to create your own pattern library from any webpage’s element)
http://developer.nokia.com/community/wiki/Category:Mobile_Design_Patterns (mobile design patterns)
http://darkpatterns.org/ (anti-patterns)

http://www.bbc.co.uk/guidelines/gel/
http://www.designmeltdown.com/    –  monster is paid.  (some graphical, style/trends of 2010, ..)
http://www.interaction-patterns.org
http://www.smashingmagazine.com/category/showcase/
http://www.smileycat.com/design_elements/ (incl. mega dropdown menu’s  and mini shopping carts)
http://graffletopia.com/
http://box.mepholio.com/ – mainly graphical, some patterns  (404, calendars, pagination, …)   –
http://codeidol.com/ajax/ajaxdp/
http://flickr.com/photos/factoryjoe/
http://www.flickr.com/photos/morville/
http://www.vimeo.com/album/17554

http://bashooka.com/category/inspiration/  Dashboards +
Forms @ http://www.flickr.com/photos/squaredeye/sets/72157594526698707/
Sign-up Form conventions @ http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/
D
ashboards, usage, graphs, pie diagrams, monitor @ http://www.dashboardinsight.com/dashboards/gallery/gallery-article.aspx   +  Quince +

Dashboard, user profile, my account @ http://patterntap.com/?terms=&sort_by=created&type=21718&style=28&platform=All  +  http://designingsocialinterfaces.com/patterns/Profile

Dashboards @ https://www.ibm.com/design/language/inspiration

http://digitalworkplacegroup.com/resources/screenshots-live-tours/  intranets

http://www.jankoatwarpspeed.com/post/2010/02/26/table-ui-patterns.aspx – Tables
http://osdpl.fluidproject.org/ (open-source design pattern library)
http://dribbble.com/tags/ux  (general inspiration – work of other designers with the tag “ux”) +

http://patterns.endeca.com/content/library/en/home/patterns.html TIP – Faceted Nav, etc. Well structured with ´solution elements´

Inspiration pattern libraries
http://littlebigdetails.com/ + (micro-interactions, mini delights and interaction details) by Floris Dekker (Etsy)
http://www.crayon.co/  (curated marketing designs ideas on page-level)
http://uigifs.com/
hoverstat.es  [hover alts @ http://www.creativebloq.com/design/hover-dead-long-live-hover-4132957
More @ http://freebie.supply/design-code/  (scroll down)

Template libraries

http://themeforest.net/search?category=ecommerce&site=themeforest.net&suggest=true&term=responsive   (search for responsive, then select a Business category)

Responsive

http://onepagelove.com/   –  one page responsive  (with tags)

 

Forms

http://www.usertesting.com/blog/2013/04/04/42-form-usability-resources/

https://econsultancy.com/blog/63513-10-simple-tips-for-improving-mobile-form-ux#i.gtjwos119wd22z   mobile forms

LukeW

See more above

 

More – Pattern link directories

Smashing Magazine interface patterns resources TIP!
http://www.uxpond.com/sites.html
http://www.visi.com/~snowfall/InteractionPatterns.html

More

http://www.quora.com/User-Interfaces/What-are-the-best-sites-to-browse-cool-innovative-user-interfaces-and-UX

Templates

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

http://www.templatemonster.com

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

http://www.atrickdesign.com/

Writing patterns

 http://www.uie.com/articles/elements_of_a_design_pattern/
http://www.visi.com/~snowfall/InteractionPatterns.html

Books with patterns

Design of sites by …

Forms

Forms that work
Luke W

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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: