Prototyping and Design Patterns for the web

Screenshot 2013-12-07 11.54.43

I recently stumbled across Brad Frost’s thorough and thoughtful analysis of the TechCrunch redesign process. I don’t intend to rehash all of its points, but rather look at a tool used in the process, Pattern Lab. I honestly haven’t been this excited about the potential of a set of tools in a long time. It’s because I feel that Pattern Lab and other tools like it represent the future of of user experience design on the web.

Why is this? A significant number of User Experience Designers use wireframes to communicate their ideas to clients, stakeholders, and developers. The difficulty with wireframes is that although a picture is word a thousand words an experience (read prototype) is able to be understood with little to no words because actually doing a task transcends a picture of a task. The faster the time to take an idea and turn it into something that’s usable results in faster feedback and more rapid iteration. Problems aren’t solved after delivery, but instead can be dealt with early in the process before their potential damage is amplified.

How does Pattern Lab make this possible? Three ways:

1. By Supplying Standard Patterns as well as offering designers ample opportunity to add their own solves a common issue in the UI/UX community. Pattern libraries seem to have a half-life of about one year. I’m amazed at how quickly pattern libraries are assembled and then slowly decay. I empathize with the maintainers of the libraries because I know that with limited resources and the constant rate of change it’s tough to keep them constantly updated.

2. Easy to edit code – The HTML/CSS/JS in Pattern-Lab starts you off with an excellent kit to begin learning. This is all insisted by the use of Mustache as a templating engine which helps take the heavy lifting out of HTML prototyping by providing a simple structure so that you can stay DRY.

3. Using JSON – Thinking about data early in the process provides yet another opportunity to discover problems early on. Additionally, it provides an avenue for frontend developers to meet their backend counterparts somewhere halfway.

You can find Pattern-Lab at What do you think? Do you think that tools like Pattern-Lab are the future of UI/UX Design?

Leave a Reply

Your email address will not be published. Required fields are marked *