Pattern Library First Development

Pattern Libraries, Style guides and Design Systems, seem to be the new hot thing in web development 🔥

Pattern Libraries are something we are self-confessed obsessed with at NoFace.

Focusing our efforts on creating reusable components that work as part of a brands digital solution is something developers have had difficulty organising for years.

Ever since learning about Atomic design principals, the requirement of pattern libraries in every project we approach seems essential.

How does NoFace include Pattern Libraries in Their Workflow?

When working on a new site, we kick off a project with research on the problem we are solving, before moving onto designing a lo-fidelity solution. 

Once happy with our solution, we then transform the lo-fidelity mockups into component-based hi-fidelity designs.

NoFace has recently adopted the use of prototyping tools such as Figma to improve communication with clients on how a solution will be implemented.

Figma also holds a benefit to providing information on design components included in the solution, such as CSS rules, positioning, sizing, etc.

Having complete access to the prototypes and properties it holds is crucial for developers to create a pixel-perfect solution.

When the designs are signed off by the client and designers, they are then handed off to the developers.

Getting the Front-end Developers Ready

With designs at the ready, it's time to get a pattern library up and running.

NoFace's prefered pattern library framework is Fractal, designed and developed by the lovely folk at Clearleft.

At NoFace we have our own forked version of Fractal that saves us repeating code on every project (Normalize.css file, Gulp configuration, folder structure).

Fractal allows us to configure our components into one of the 5 following types -

1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages

To learn more about the atomic structure, read our blog post where we setup a pattern library following the atomic principles.

Alternatively, you can check out our current Pattern Library build at - https://github.com/NoFaceDesigns/NoFace-Pattern-Library

Summary of the Benefits Pattern Libraries Offer

We've covered the benefits of pattern libraries in depth in our design systems, pattern libraries, style guides blog post.

For those who haven't read it, here's a few benefits of using pattern libraries.

One of the major benefits we see in pattern library first development is the ability to attribute statuses to components.

Is this button still in development? Is it test ready? Live version ready?

Another major benefit is the ease of cross-browser and mobile testing Fractal offers.

We've talked about the importance of mobile testing and why it's important for your site to be mobile friendly for your customers on the blog before.

Pattern Library Integration

Once happy with how the pattern library works with page examples.

We then import the pattern library's repository as a submodule to our project or WordPress theme

Binding the two and creating the pattern library as a dependency for the project to use.

The restriction of only adding stylised components to a pattern library, which can then be accessed by a theme or backend developer prevents obscure and undocumented components from living in a project.

Yes, sometimes it can be a pain to have to fire up the pattern library to add one small component.

However, the time spent in documenting the component can save the time of the rest of the team working on the project as they can access the component, notes on use of the component and the expected data with ease.

Conclusion

Pattern libraries are something we can't get enough of.

If you aren't using pattern libraries in your projects, you may want to consider it!

If you are using pattern libraries in your projects, let us know what kind of processes you like to follow and what frameworks you're fond of.