Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Posts Tagged ‘Pattern Libraries’.

We are pleased to present below all posts tagged with ‘Pattern Libraries’.

Meet “Design Systems”, A New Smashing Book

It’s ready, and it’s shipping. We're very proud to release a brand new Smashing book: “Design Systems” by Alla Kholmatova's — our new practical guide to creating effective design languages for digital products. The book isn’t about tooling; it’s about how to set up a shared language that would help teams produce visual output that consistently renders designer’s intent. Get the book now.

Get the book and download the eBook immediately

Throughout this book, Alla Kholmatova will share an approach and the key qualities of a well-functioning, enduring design system. It's based on Alla's experiences, case-studies from AirBnB, Atlassian, Eurostar, TED, and Sipgate, plus 18 months of endless interviews — all attempting to figure out what works and what doesn't work in real-life products. It may not answer every question, but it will help you figure out just the right strategy for establishing and evolving a design system in your organization.

Read more...

Building A Large-Scale Design System: How A Design System Was Created For The U.S. Government (Case Study)

Editor's Note: We’ve been closely working with Maya on this article, and we’re happy to see the final result now being published on 18F. We highly encourage more teams to share the lessons they learned when building design systems or pattern libraries, and we’re always happy to support them in writing, editing and shaping that article. This post is a re-post of Maya’s final article.

Building A Large-Scale Design System: How A Design System Was Created For The U.S. Government (Case Study)

Today, there are nearly 30,000 U.S. federal websites with almost no consistency between them. Between the hundreds of thousands of government employees working in technology, there’s nothing in common with how these websites are built or maintained.

Read more...

Building Pattern Libraries With Shadow DOM In Markdown

Some people hate writing documentation, and others just hate writing. I happen to love writing; otherwise, you wouldn't be reading this. It helps that I love writing because, as a design consultant offering professional guidance, writing is a big part of what I do. But I hate, hate, hate word processors.

Documenting Components In Markdown With Shadow DOM

When writing technical web documentation (read: pattern libraries), word processors are not just disobedient, but inappropriate. Ideally, I want a mode of writing that allows me to include the components I'm documenting inline, and this isn't possible unless the documentation itself is made of HTML, CSS and JavaScript. In this article, I'll be sharing a method for easily including code demos in Markdown, with the help of shortcodes and shadow DOM encapsulation.

Read more...

The Atomic Workflow — People, Process, And Making Design Systems Happen

Editor's Note: We are all trying to figure it out: how do we design flexible and future-proof responsive websites without reinventing the wheel every time a new requirement comes in? You've heard of atomic design, but how do we actually make it applicable in every day situations? Let’s figure it out! We've teamed up with Brad Frost to set up an eBook bundle with the brand-new Atomic Design and our lovely Smashing Book #5 — available in ePUB, Kindle and PDF. Good things come in pairs! Get the bundle, and save 50% off the regular price.

An illustration showing two birds flying away with two eBooks, Atomic Design and Smashing Book 5. Both eBooks are 50% off of their regular price for a limited time

Talk is cheap. And up until now, we’ve been doing a whole lotta talkin’. That’s not to say it hasn’t been productive talk! After all, we’ve discussed the importance of modular thinking, we’ve learned a methodology for crafting deliberate UI design systems, and we’ve showcased tools for creating effective pattern libraries. But here’s where the rubber meets the road. Where we roll up our sleeves and put all of this theory into practice. Where we get stuff done. This chapter will tackle all that goes into selling, creating, and maintaining effective design systems. You ready? Let’s go.

Read more...

Taking The Pattern Library 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.

Read more...

How To Make And Maintain 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.

Read more...

How To Automate Style Guide-Driven Development

Style guides — especially living ones — are useful in many aspects of development and maintenance, so it’s little wonder that developing them has become a highly recommended and a popular practice. But even with the clear benefits, taking the necessary steps to create and start using style guides is easier said than done, as quite often the challenge is cultural, requiring changes in people’s mindsets.

Automating Style Guide-Driven Development

In order to make the transition as painless as possible, equipping yourself with the most helpful tools and automating as many steps as possible become important. These living style guides promote a systematic approach to composing layouts, which used to be just a task within the user interface development process. Incorporating style guides into the development process places importance on the tools used to build the component catalogue.

Read more...
1

↑ Back to top