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.
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…
Creating a flexible UI system that is consistent and easy to customize, while also scalable and cost-efficient, depends not only on how it is built, but on how it is designed. A library of components has very little value if every new design is created independently, ignoring established standards and patterns. In this article, Adriana De La Cuadra explains the value of modularity in UI design and how it ties into the process of style guide-driven development, which improves the implementation of flexible and user-friendly applications, while helping designers and developers collaborate more productively.
Read more…
Creating a living style guide is a long but worthwhile process. Steven Lambert made a few mistakes along the way that prevented developers and designers from adopting it sooner or using it effectively. However, he pushed through and eventually made it to the end. This is the story of how Steven developed a living style guide, the mistakes made along the way, and why the current landscape of style guide generators did not suit his needs.
Read more…
In his article on Selling Design Systems, Dan Mall suggests to illustrate how fractured an organization is by printing out its different presences online and putting them on a large board as an example of all the wasted money and effort that goes into making sites from scratch, one-by-one, needlessly reinventing the wheel every time. What Vitaly Friedman learned from his experience is that trying to focus on the workflow or the process is never as helpful as focusing on tangible benefits that the client will get as a result.
Read more…
In this article, Ben Callahan will help you be more successful with your web projects by starting at the beginning; by working from day one to help set your client’s expectations about what’s going to happen, and by working throughout a project’s life cycle to do the same. By the end of this article, you’ll find yourself more inspired to invest in your own understanding of how the web works, and more willing to invest in your teammates’ understanding. Ben hopes you’ll feel excited to try a new approach, but he also that you’ll be empowered to tear these pages up if they don’t work for you. Only you, your team and your customer can figure out the best way to approach a project. The time is now — so, get to it!
Read more…
Small companies with newer brands suffer from not yet having established a culture and the difficulty of conveying their inner values in external communication Working so closely with a large enterprise such as Lufthansa can be overwhelming for any small startup. In this article, Josip Budzaki explains how the project with Lufthansa and their way of thinking really facilitated the process and enabled the team to follow their vision — that’s not something you encounter in many companies!
Read more…
Living style guides help front-end developers transform front-end codebases into well-described pattern libraries with the minimum of effort. But to make them really efficient, we need to choose the proper tools — so let’s have a closer look at what our community has to offer. In this article, Robert Haritonov has arranged the tools by function, highlighting only the most powerful ones worth knowing about. You can find more tools, plus videos, articles and other material about style guides at styleguide.io.
Read more…
In this article, Varya Stepanova & Juuso Backman will talk about style guides that are generated directly from the style definition sources — i.e. CSS and its modern variants. Style guides are useful in many aspects of development and maintenance, so it’s little wonder that developing them has become a highly popular practice. But even with the clear benefits, taking the necessary steps to start using them is easier said than done, as quite often the challenge is cultural, requiring changes in people’s mindsets. We encourage everyone to try it!
Read more…
Email is one of the most important tools for reaching your customer base. But with the ever-growing number of emails to send, getting them all out the door can seem a little overwhelming. By putting in place a solid email design workflow, you’ll be able to regularly ship engaging and mobile-friendly emails with ease. Incorporating a modular approach and a custom framework into your email workflow can lead to increased productivity and make it easier for you to iterate on your designs. You will have to make an initial investment of time to get everything up and running, but the result will improve your designs, the customer experience and your engagement rates, leading to happier customers and increased revenue.
Read more…
Joshua Mauldin started with style guides with the desire to make it simple to maintain and grow a design. One of the first questions, understandably, was why use Fireworks for a style guide? For him, it was mostly because of symbols and styles. Sure, you could use similar things in Photoshop, but he found Fireworks’ implementation to be smarter. In this article, you will find out why you would want to set up a style guide using Fireworks, and you’ll also get a little starter template that Joshua likes to use.
Read more…
