Note: This section of the site is under heavy construction, tread carefully.

Bookmarks tagged with “designsystems”

111 bookmarks by garrettc


Why it's time to update our language about bad design patterns by Amy Hupe, content designer.

Why we need to retire the racist term we use to describe bad design patterns, and what to use instead.

Bookmarked on #


Design Systems Collection

Explore our free collection of design systems courses taught by Ethan Marcotte.

Bookmarked on #


Design Systems: Step-by-Step Guide to Creating Your Own

"Design doesn’t scale easily. Efficiency doesn’t emerge from thin air. Scaling design through hiring, without putting standards in place, is a myth. With every new hire, new ideas for color palettes, typography and patterns appear in the product, growing the inconsistency and increasing the maintenance cost. Every new hire increases the design entropy. There’s only one way to stop the growth of the chaos. Committing to running a design system process. Gradual growth of a design system equals gradual increase in consistency and speed of software development. Design scales. But it scales only with a design system."

Bookmarked on #




django-pattern-library

A module for Django that helps you to build pattern libraries and follow the Atomic design methodology.

Bookmarked on #


About Carbon

Carbon is IBM's open source design system for digital products and experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools, and more.

Bookmarked on #


Geri Reid - Forms best practice

Best practice for forms, including research insights and examples.

Bookmarked on #


Color Swatches in Storybook

How to display your SCSS / Sass color variables as color swatches in StorybookJS.

Bookmarked on #


World Food Programme UI Guide

Excellent example of a Storybook based design guide from the World Food Programme.

Bookmarked on #



Slack Design Kit

In 2016, Slack was two years old and already used by millions of people. Our codebase had grown rapidly, and like many companies that focused on product/market fit, our code was built in a way that favored time-to-market over maintainability, consistency, or reusability.

Bookmarked on #


Storybook: UI component explorer for frontend developers

Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.

Bookmarked on #


Why Don't We Just Use Material Design? | Webdesigner Depot

'The question posed in that meeting (Why don’t we just use Material Design?) reverses the design process in a way that epitomizes the problem with any design system. The question that should have been asked was: “Would employing Material Design solve some, or all, of our problems?”'

Bookmarked on #


Benefits of a connected design system

"We’re seeing more and more organisations, big and small, empowering design teams to think more systematically. Couple that with the adoption of declarative JavaScript libraries, such as React and Angular, we’re able to unlock new ways to use web components to design, build and maintain interfaces. This shift in approach is pulling design and engineering disciplines closer together, aligning workflows, and fundamentally changing the way teams communicate with each other."

Bookmarked on #


Design systems pro video series—Master product design at scale with Brad Frost, Dan Mall, and Josh Clark

Watch videos of design system pros Brad Frost, Dan Mall, and Josh Clark sharing best practices for product design at scale. Get expert recommendations for improving speed, quality, and consistency with design systems.

Bookmarked on #


Evangelizing a Design System

Get buy-in from executives for your design system. Explain why design systems are popular, show current gaps, calculate the expected ROI.

Bookmarked on #


Building a Design System: A Practitioner's Case Study

- How to build a design system from scratch - How to audit your product for design consistency - How to structure and communicate a design system to an Agile…

Bookmarked on #


Building a compelling business case for a Design System

"Design Systems are here to stay. […] But it’s not designers who we have to convince when it comes to investing in the build of a design system. Especially if we aren’t lucky enough to be in an organisation where design has a ‘seat at the table’. How can we sell the benefits of a design system with more focus on appealing to upper management, who may not see the same benefits we do?"

Bookmarked on #


Design Systems Handbook

Your guide to design systems best practices. Learn how to design, build, maintain, and implement design systems–from design leaders and world-class teams.

Bookmarked on #


Getting executive buy-in for your design system

"As you may know, sometimes it’s difficult to explain inside a company what exactly a design system is and what value it provides. It’s also usual that we, the designers, try to get executive buy-in without having analyzed the specific circumstances of our company."

Bookmarked on #


Create your design system, part 1: Typography

Typography is arguably the essential part of a website. When we think about the content of a web page, we think about words. In this article, we’ll take a look at how to set a typography system in…

Bookmarked on #


Weft. — Ethan Marcotte

"I wrote about trying to understand what you’re designing or building before you design or build it"

Bookmarked on #


CSS Architecture for Design Systems | Brad Frost

"I wrote this post a while ago about how we structure CSS for large-scale design systems"

Bookmarked on #


Why Design Systems Fail by Una Kravets

"It’s like going to the gym. Small incremental changes make a big difference over the long term. If you just work out for three months and then stop, you’ll lose all your progress. It’s like that with design systems. They have to stay in sync with the live site. If you don’t keep it up to date, people just won’t use it. It’s really important to have a solid core. Accessibility needs to be built in from the start. And the design system needs ownership and dedicated commitment. That has to come from the organisation."

Bookmarked on #



The Problem with Patterns

It started off as an honest problem with a brilliant solution. As the ways we use the web continue to grow and evolve, we, as its well-intentioned makers and stewards, needed something better than making simple collections of pages over and over again. Design patterns, component libraries, or even style guides have become the norm for organizations big and small. Having reusable chunks of UI aids consistency and usability for users, and it lends familiarity and efficiency to designers. This in turn frees up designers’ time to focus on bigger problems, like solving for their users’ needs. In theory.

Bookmarked on #


Design systems

"I think a lot of people are collecting patterns and calling the resulting collection a design system. No. That’s a pattern library. You still need to have a framework for how to use those patterns."

Bookmarked on #


From Purpose to Patterns

At the heart of every well functioning design system are effective design principles. In this talk Alla Kholmatova shares insights from her long-term research on what makes effective design principles, how to define them, and how principles translate into design patterns in practice.

Bookmarked on #


The Fast and Slow of Design

"Working fast is alluring for every board-room executive. Especially if, over the course of months, speed (and failure) results in faster product releases, more revenue, bigger and faster growth. Capitalism, right? However, I'm of the opinion that speed – and those arbitrary deadlines – create an unhealthy balance that can eventually lead to the demise of the company. Moving fast and breaking things tends to be at the expense of paying attention to slower, subtle, more stable, 'boring' aspects of a system. So what happens when we focus on the entire system? How can we create sustainable, balanced design systems that serve our companies and products for the long term?"

Bookmarked on #


Heroku Design

Internal CSS and Icon library from Heroku

Bookmarked on #


A comprehensive guide to design systems

By utilizing a collection of repeatable components and a set of standards guiding the use of those components, companies are changing the pace of creation and innovation within their teams.

Bookmarked on #


Your guide to design systems from the world’s leading brands

A look at some of the best public design systems out there—from Atlassian, Shopify, Airbnb, and more.

Bookmarked on #



Vue Design System

"An open source tool for building Design Systems with Vue.js Vue Design System provides you and your team a set of organized tools, patterns & practices. It works as the foundation for your application development."

Bookmarked on #


Creating Themeable Design Systems | Brad Frost

Hey! I wrote a post about creating design systems that can serve wildly different brands:

Bookmarked on #


Adele

Dozens of design systems and pattern libraries thoroughly analyzed.

Bookmarked on #




The Way We Build

Here’s the simple truth: you can’t innovate on products without first innovating the way you build them.

Bookmarked on #


And You Thought Buttons Were Easy?

Selling a design system into an enterprise usually involves a pitch to many audiences. Designers appreciate cohesiveness. Engineers value efficiencies. And, pivotally, executives appreciate value…

Bookmarked on #


Design Systems (The missing ingredient)

Stop thinking about your Design System as a Design System, start thinking about it as a product. From concept to build, testing and shipping, Design Systems have their own production cycles to manage — and it doesn’t stop at release. Over time, your Design System will accumulate a backlog, as new additions are requested and old ones need updating. Backlogs are messy and need to be managed and prioritised.

Bookmarked on #



What’s the difference between style guides, pattern libraries, and design systems?

"In my organization, we’re trying to implement an integrated marketing plan which will be helped along greatly by a sound design system. In order to implement this properly, a shared vocabulary needed to be created so we could be sure we were referring to the same thing. In this post I do my best to explain the terms style guides (editorial and visual), pattern libraries, and design systems."

Bookmarked on #


Adopting Design Systems

Establish a model for product teams to adopt your system predictably and collaboratively so that you can report progress across your enterprise.

Bookmarked on #


Style Guides as Products

How thinking about style guides as products helps you meet user needs and overcome the barriers to adoption.

Bookmarked on #


The expanding role of design in creating an end-to-end customer experience

Lines between products, services, and user environments are blurring. The ability to craft an integrated customer experience will open enormous opportunities to build new businesses.

Bookmarked on #



Measuring Design System Success

"As an advocate of your system practice, can you paint the picture of what success looks like? And, is it measurable?"

Bookmarked on #


Handling spacing in a UI component library

"Building a highly consumable UI component library is no easy feat and this article will focus on one particular tricky aspect of it: outer component spacing. By outer I mean spacing that is not internal to a component."

Bookmarked on #