Discovering Pattern Lab

by

pattern-lab

My Discovery

Pattern…What?

In the ever-changing, fast-paced, fast-forward world of technology, adding manageability, malleability, and structure to the environment of a developing or growing application becomes of utmost importance. Although applying this is arguably not easy at first, it lends to the simplicity of handling and implementing changes to features that need to be met in order to keep up with the demands of an application. Recent projects have given me the opportunity to explore the concept of Atomic design as implemented through Pattern Lab, and have consequently introduced me to a new and improved way of looking at UI development.

Simply put, Pattern Lab advocates for the generic development of web assets that are flexible and can make meeting the ever-growing standards and demands of a large project more obtainable. Prior to engaging in these projects, my approach to looking at a website was to look at every page as a separate entity, followed by writing the appropriate markup and adding associated styles to render each of these builds. Pattern Lab introduces a different concept. Working with Pattern Lab has enforced more of an awareness for the entire web application as a whole. The ultimate goal is to develop pieces of the web application with sustainability and reusability in mind. By focusing on the basic styles and behaviors appropriated to each of these interface patterns, Pattern Lab allows developers to deal with instance-specific styles and functionalities of an asset as a separate concern, thereby making it easier to apply revisions accordingly.

Pattern Lab…How?

For starters, Pattern Lab is a templating system that consumes data from a source separate from that provided by a back-end server. This separation ensures that there is no stunting of the build process as often happens in a growing application when front-end and back-end development are out of sync. It follows the style-driven development of initially simple, reusable components that are then combined to build more complex page-level components. Finally, these pieces can be laid out on a page in a certain way to create full-page templates.

In Pattern Lab, these structures are atoms, molecules, organisms, templates, and pages. The Pattern Lab documentation adequately describes each of these assets and summarizes them as follows:

  • Atoms are the most basic of assets like HTML tags and abstractions (i.e. input, buttons, fonts, headings)
  • Molecules combine atoms to work as a unit (i.e. form field and it’s label)
  • Organisms are built from molecules and atoms to create a unique part of the interface (i.e. form)
  • Templates combine mostly organisms to produce page-level objects
  • Pages swap out placeholders in templates with specific instances of content

With the exception of page structures which test out the display of real data, the purpose of each of these is to define the look and feel of the components. The basic process for using Pattern Lab is to build these structures, import the generated mark-up and styles into the project, and make adjustments accordingly in Pattern Lab until the style and behavior “fits” the demands of the UI. Because all design changes to interface patterns should start in Pattern Lab, retro-fitting components from an existent web application is also important in preserving the process.

The following is an example that highlights an asset used in multiple instances across a website. This can be identified as an “info-block” organism that is made up of other atomic pieces–“info-block–description” atom, “info-block–title” atom, and “line” atom.  As shown in the two example screenshots below, the “info-block” organism and it’s sub-components have basic styles that are common to all it’s manifestations in the interface.

The screenshots above are taken from a theme for a website. It exemplifies that the “info-block” organism is a pattern that is reused multiple times throughout the interface, deeming it appropriate to create a template in Pattern Lab for.
A template for the “info-block” organism can be broken down into assets in Pattern Lab.  

Pattern Lab…Why and When?

There are several advantages that using Pattern Lab boasts. The most attractive one is that following this systematic approach of building application-wide components rather than designing individual pages allows for more consistency of styles and predictability of behavior for these elements that are used throughout a website; this, in turn, also lends to an easier and more effective way of changing a component’s style and/or behavior as it ensures that all instances of the asset in the application are appropriately updated.Additionally—from my experience—as long as the most basic attributes of smaller assets like atoms remain simple, it becomes easier to visualize how to combine them together and trust the behavior of the larger, more complicated components that are built from them.

Deciding whether Pattern Lab is an appropriate tool for developing or integrating into a web application heavily depends on its current structure and needs. Pattern Lab is fitting for a project that has identifiable components used throughout the site. All instances of these components should have a clearly defined, yet generalizable, set of features for a developer to be able to utilize Pattern Lab effectively. It is also best for sites that are not already implementing CSS/HTML-heavy frameworks like Bootstrap, since creating customizable assets is one of the main objectives of developing with it. Additionally, although Pattern Lab is ideal and simple to follow when a component is created from scratch, integrating a third party library into it is a decision I have found that should be decided on a case by case basis depending on how configurable and “Pattern Lab-friendly” it is. Some questions to consider when determining this are: How customizable are the styles for the library? Can the basic styling needs and HTML markup be captured and mapped almost 1:1 in Pattern Lab and the actual environment?  The perk to doing this is that if a library is swapped out with another library or a custom component, Pattern Lab already has the basic styles that can be applied. Then again, for modules that are not “Pattern Lab-friendly” and are difficult to fit into Pattern Lab, I would suggest creating an additional stylesheet.  Otherwise, adding Pattern Lab to the developing environment of an application can add control to the maintenance and clarity to the manipulation of properties of existent assets; this can prove to be a huge advantage as it may decrease the rift in knowledge that inevitably exists between current and future team members working on the project. Subsequently, this improves the overall consistency of a component’s derivatives as they appear in the interface.

Additional Thoughts?

There are, of course, some drawbacks to using Pattern Lab as well. A reoccurring issue and concern I encountered were that some structures were really complicated to define, and in many of these cases I had to resort to resolving this with my own subjectivity. Even though the documentation for Pattern Lab is thorough in breaking down and defining the players that are involved in its approach to Atomic design, there is still a certain amount of ambiguity; for instance, although buttons are qualified as atoms, they can be arguably broken down into text (which is a atom in itself) and a container. Another disadvantage is that deciphering reusability of web assets can be a process in itself and may take more time than if one were to dive right into the design and creation of a component,

Also noteworthy is although Pattern Lab can simplify the development of an interface, in order to reap all its benefits in the long run, there is a required maintenance process. As the demands of the UI change and the application develops, the assets in Pattern Lab should always be synced up and exist in parallel with its counterpart in the actual UI. This continuous 1:1 mapping ensures that the Pattern Lab components maintain predictability in the live application.

About the Author

My name is Helen Thi and I am a new entry-level web developer stemming from a healthcare background, where I first nurtured my research-oriented and problem-driven self. I am fascinated by the amount of material available on the web to learn from and excited by the potential to make an impact with my newly acquired web-based skill set through my contributions to projects and ideas. More recently, my focus and interests are in UI development with novel front-end technologies/tools.

References

 

Category : Atomic Design & Pattern Lab, company, CSS, Front End Development, HTML, Innovative products