Style Guides articles

Taking Pattern Libraries To The Next Level




 


 

No thorough conversation about the front end today can end without mention of pattern libraries. Sometimes a pattern library appears in the form of a living style guide, or as a design system, or as the outcome of an atomic design process, or as an all-knowing user interface framework. In all of these cases, designers and developers seek the right strategy to approach the complexity of the web with a modular, components-based approach.

Sketching out the modules and patterns within the interface.

However, finding the right way to architect a lasting pattern library and to integrate it into an existing workflow seems to be a challenging task and one that most design and development teams eventually give up on. In this article, I’d love to highlight some practical techniques and strategies to establish a lasting pattern library that will be actively and consistently used by the entire team. These tips might help you get on the right track when you set out to build your next style guide, assets library or design language.

The post Taking Pattern Libraries To The Next Level appeared first on Smashing Magazine.

Pixel-Perfect Specifications Without The Headaches




 


 

Designers, developers and managers often work with compressed timeframes and multiple projects simultaneously. A team must be able to respond quickly to feedback on their product from clients, project managers and developers. Each minor revision in the UI or UX needs to be reflected in the documentation, so that designers and developers always have the latest information.

Pixel-Perfect Specifications Without The Headaches

A style guide ensures that your project doesn’t encounter serious problems when you implement the initial design. Making sure that all specifications are accurate to their designs is critical, because an inaccurate specification means that developers will have to either rely on guesswork when building the app or go to the design source to get answers to their questions.

The post Pixel-Perfect Specifications Without The Headaches appeared first on Smashing Magazine.

Making And Maintaining Atomic Design Systems With Pattern Lab 2


  

The benefits of UI design systems are now well known. They lead to more cohesive, consistent user experiences. They speed up your team’s workflow, allowing you to launch more stuff while saving huge amounts of time and money in the process. They establish a common vocabulary between disciplines, resulting in a more collaborative and constructive workflow.

Making And Maintaining Atomic Design Systems With Pattern Lab 2

They make browser, device, performance, and accessibility testing easier. And they serve as a solid foundation to build upon over time, helping your organization to more easily adapt to the ever-shifting web landscape. This article provides a detailed guide to building and maintaining atomic design systems with Pattern Lab 2.

The post Making And Maintaining Atomic Design Systems With Pattern Lab 2 appeared first on Smashing Magazine.

Designing Modular UI Systems Via Style Guide-Driven Development


  

Using a style guide to drive development is a practice that is gaining a lot of traction in front-end development — and for good reason. Developers will start in the style guide by adding new code or updating existing code, thereby contributing to a modular UI system that is later integrated in the application. But in order to implement a modular UI system, we must approach design in a modular way.

Designing Modular UI Systems Via Style Guide-Driven Development

Modular design encourages us to think and design a UI and UX in patterns. For example, instead of designing a series of pages or views to enable a user to accomplish a task, we would start the design process by understanding how the UI system is structured and how its components can be used to create the user flow.

The post Designing Modular UI Systems Via Style Guide-Driven Development appeared first on Smashing Magazine.

Top