Does your website have a mascot that the audience isn’t responding well to or that outright hates it? Or maybe your new client has brought along a mascot that you’re unsure about? If a mascot’s design or messaging isn’t on point with an audience, there’s no sense in keeping it as is and losing business over it. Today, I’m going to give you four options for turning your hated brand mascot into one the people love.
Read more…
Enter the Brand System: a shared library that defines the brand’s story, symbols, and strategy. Learn how Brand Systems can help avoid fragmentation, confusion, and exclusion within teams.
Read more…
This article includes practical advice that will be useful to anyone who is thinking about creating a design system to enable harmonious, integrated, and fundamentally successful product development.
Read more…
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.
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…
Finding the right way to architect a lasting pattern library is difficult. This article highlights some practical techniques and strategies to establish a pattern library that will be actively and consistently used by the entire team.
Read more…
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.
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.
Read more…
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…
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.
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.
Read more…
Living style guides are an important tool for web development today, especially in large, complex web applications. Among many things, they help greatly help to organize and distill complex interfaces.
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…
