Prototyping with Pattern lab

4th June 2015 by TP

A faster route to development for web projects

We’ve previously covered Atomic Design and how this methodology has revolutionised the way we approach web projects. Pattern lab, a development resource used to create atomic design systems, is an accompanying tool which works alongside Atomic Design to streamline the prototyping stage.

From a development perspective Pattern lab is an amazing tool that has all the capabilities to play a major part in any web build. We use Pattern lab as our primary prototyping tool, as it contains a static site generator that constructs an interface by stitching your atoms, molecules, and organisms together to form templates and pages.

Before we go on, a pattern library is a collection of design elements that appear multiple times across a site. A digital catalogue of everything that you could possibly need to build a website: paragraphs, headings, buttons, lists, radio buttons and even form fields. In order to create consistency in user experience, agencies often use a pattern library to ensure departments don’t end up reinventing the wheel.

From a client perspective the main benefit that Pattern lab brings is how much quicker development starts in comparison to traditional web design methods. This is because with Pattern lab we can easily create wireframes in the browser. We call these HTML wireframes and are simply a working prototype of your site. They use the exact same programming and markup languages that will be used to develop the final code.

Old school wireframing methods such as using design softwares play much less of a part in the wireframing process, and we now get to make a start on the development phase much sooner. The creation of artworked visuals, paired with basic wireframe diagrams have been combined and superseded.

By providing our clients with a working prototype in their browser, rather than static wireframes or designs, means that concepts that would otherwise be based on their assumptions can be shared with them in the design stage. Concepts such as hover states or events that happen on mouse clicks – it’s always better to demonstrate than explain. With this in mind, we end on one of the most important factors. From the outset we can demonstrate how the site will react and respond across multiple devices and screen widths, and by using the viewport resizer in Pattern lab, clients can clearly see this optimisation from the get-go rather than it being an after thought.

It would be great to hear from your web build process. How long did it take? How quickly into the process were you able to conceptualise Responsive Web Design? Were there any hold-ups in wireframing or prototyping? Does your web developer still present designs as artwork and/or wireframes that don’t convey the look and feel of the site? If so, speak to us.