7

I've been looking at a recent A List Apart article on creating pattern libraries. They point to a few example pattern libraries:

Now working in a UX Team that services a global product family, this seems something we should be investing our time in.

The above article also refers to an open-source repository to help you build up your own pattern library. This is fantastic, but being greedy I want more! :)

The answer to the following question may well be 'get some development time and roll your own', but is there a repository/product out there which will help me build our own pattern library as well as do the following:

  • Allow us to tag patterns so we can see them in different contexts? i.e. patterns used in a particular product, patterns used on small screens, form patterns, etc. This will allow us to build up a powerful IA for the library
  • Allow us to be technology agnostic - as a UX Team we don't want to dictate to the developers which technology they should use (whether that is server or client side). This may limit us in what we can add to the library, but we want to start with just showing examples based on semantic and accessible markup.
  • Allow us to overlay different stylesheets. We work with many clients who want there own brand and the ability for stylesheet switching would be great as well as a powerful sales tool.

I'm sure I could think of other items to add to this list, but I've only just started thinking about this :)

Thanks in advance

  • There is patternry.com It's OK. Better than nothing, IMHO. That said, I'm a fan of Roll-your-own--especially if you want to maintain control over things like CSS (as I think UX should). – DA01 Mar 13 '14 at 15:02
  • This is sort of fascinating to me. Isn't it basically applying MVC principles to UX? – Imperative Mar 18 '14 at 21:36
  • bootply.com is not a pattern library but a builder to create Bootstrap layouts. It has some features from your wish list and drag and drop patterns, themes, templates, includes, preview, save, versions, share. – allcaps Mar 19 '14 at 0:17
  • @imperative not necessarily, though it could be. It's really more about 'build a better wheel and don't re-invent it every time' – DA01 Mar 19 '14 at 0:29
  • @DA01 CSS is an implementation of the UI, not core UX. If you're straddled across the UX and front end dev roles I can see the point of controlling the CSS, but it's mostly common for UX folks to define the UI but not to a CSS level. A UX pattern library isn't the same as a CSS framework. For example Bootstrap is not a 'UX' - it's just a bunch of web UI elements, many of which are overly restrictive. – Stewart Dean Mar 30 '14 at 17:22
3

Here is a really great article by one of the best in the web, Brad Frost: http://bradfrostweb.com/blog/post/atomic-web-design/

It is about something he calls "Atomic Web Design", in which a site is broken down into small components that can be used to build a variety of things while keeping a consistent cannon! Kind of like good directions for your CSS, it seems like common sense, but in reality, it is hard to execute and establish a robust set of blocks that will work in all of your layouts(especially when their are sooo many things!). To help with this process, him and Dave Olson built a tool that helps you write these pattern libraries. What pals!

And here is the great tool he made, called pattern lab: http://demo.patternlab.io/?p=all

More info about patternlab here: http://patternlab.io/

Another tool I like is: http://bjankord.github.io/Style-Guide-Boilerplate/ which is a little more technical but very powerful!

Cheers!

  • Thanks for this. We are going with pattern lab for the moment, as this seems to do exactly what we want and I love the atoms, molecules,.. idea. – Sniffer Apr 2 '14 at 11:18
  • Completely agree, pattern lab is a great tool, but it is not an end all solution, more like a light when it gets dark :) – michaelghinrichs Apr 3 '14 at 5:41
0

you can already do what you want with the ala lib, but if you want more libs to choose from, here's some:
topcoat
http://topcoat.io/topcoat/
bootstrap
http://getbootstrap.com/
oocss
http://oocss.org/
smacss
http://smacss.com/

0

Brad Frost's Atomic demo is my favorite example simply because it takes cues from nature, although their demo is a hypothetical example and only practical examples really resonate for me. Same applies for the USPTO pattern library.

All the examples mentioned above are nice, though I do think they read mostly as snippet libraries. I realize most companies don't even have that much, but the problem is that while you can lead a horse to water you can't make them drink. It's not enough to just provide a list of all the design widgets with lorem ipsum and hope no one wanders off the script.

Disciplined reuse of patterns demands understanding of the generic problems a pattern is meant to solve, and at what level of abstraction. On both the supply and demand sides. Those writing the pattern library need to provide the rationale and teach, and those using the patterns need to search design problems not solutions.

Google's material design starts to scratch that "teach a man to fish" itch (sorry about the clumsy mixed metaphor.)

I guess as with everything it has more to do with the carpenter than the tool.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.