recentpopularlog in

garrettc : designsystems   100

« earlier  
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.
IFTTT  Pocket  slack  communication  designsystems  designthinking 
september 2019 by garrettc
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.
javascript  react  webdevelopment  vuejs  html  css  designsystems  designpatterns  component  webdesign 
august 2019 by garrettc
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?”'
analysis  design  opinion  webdesign  google  designsystems  designpatterns 
may 2019 by garrettc
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."
designpatterns  designsystems  designthinking  webdesign  webdevelopment  patternlibrary 
january 2019 by garrettc
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.
video  webdesign  webdevelopment  designsystems  bestpractice  patternlibrary  styleguide  lessons 
november 2018 by garrettc
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.
business  investment  management  designsystems  patternlibrary  styleguide  roi  budget  powerpoint  keynote  template 
november 2018 by garrettc
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…
webdevelopment  webdesign  designsystems  styleguide  presentation 
november 2018 by garrettc
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?"
designsystems  webdevelopment  webdesign  business 
november 2018 by garrettc
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.
webdesign  webdevelopment  styleguide  ebook  bestpractise  designsystems 
november 2018 by garrettc
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."
designsystems  business  presentation 
november 2018 by garrettc
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…
css  webdesign  designsystems  webdevelopment  typography  grid  colour  space  icons  buttons 
september 2018 by garrettc
Weft. — Ethan Marcotte
"I wrote about trying to understand what you’re designing or building before you design or build it"
css  designpatterns  designthinking  designsystems  webdesign  webdevelopment 
august 2018 by garrettc
CSS Architecture for Design Systems | Brad Frost
"I wrote this post a while ago about how we structure CSS for large-scale design systems"
css  designsystems  patternlibrary  webdevelopment  webdesign  scalability 
july 2018 by garrettc
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."
designsystems  designpatterns  patternlibrary  styleguide  webdevelopment  webdesign  business 
june 2018 by garrettc
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.
designpatterns  designsystems  webdevelopment  webdesign 
june 2018 by garrettc
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."
designpatterns  patternlibrary  designsystems  designthinking  webdevelopment  appdevelopment 
may 2018 by garrettc
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.
designpatterns  designthinking  designsystems  webdesign  webdevelopment  appdesign  appdevelopment  patternlibrary  efficiency  bestpractice  research  business 
may 2018 by garrettc
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?"
designsystems  designthinking  business  change 
april 2018 by garrettc
Heroku Design
Internal CSS and Icon library from Heroku
css  webdesign  designsystems  styleguide  patternlibrary 
april 2018 by garrettc
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.
designsystems  patternlibrary  styleguide  webdesign  webdevelopment  appdesign  appdevelopment 
april 2018 by garrettc
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.
branding  designsystems  webdesign  webdevelopment  appdesign  appdevelopment  patternlibrary  styleguide 
april 2018 by garrettc
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."
styleguide  patternlibrary  designsystems  vuejs  javascript 
april 2018 by garrettc
Creating Themeable Design Systems | Brad Frost
Hey! I wrote a post about creating design systems that can serve wildly different brands:
designsystems  webdevelopment  webdesign  branding 
april 2018 by garrettc
Dozens of design systems and pattern libraries thoroughly analyzed.
design  reference  styleguide  designsystems  webdevelopment  appdesign  appdevelopment  webdesign 
march 2018 by garrettc
The Way We Build
Here’s the simple truth: you can’t innovate on products without first innovating the way you build them.
designsystems  webdesign  process  bestpractice  webdevelopment  patternlibrary 
august 2017 by garrettc
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…
business  designsystems  webdevelopment  appdevelopment 
august 2017 by garrettc
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.
designsystems  webdesign  webdevelopment  business  productdevelopment 
august 2017 by garrettc
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."
branding  styleguide  designsystems  patternlibrary  webdevelopment  appdevelopment  business 
july 2017 by garrettc
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.
branding  styleguide  designsystems  patternlibrary  webdevelopment  appdevelopment  business 
july 2017 by garrettc
Style Guides as Products
How thinking about style guides as products helps you meet user needs and overcome the barriers to adoption.
branding  styleguide  designsystems  patternlibrary  webdevelopment  appdevelopment  business 
july 2017 by garrettc
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.
designthinking  designsystems  business  teams 
july 2017 by garrettc
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?"
designsystems  business  productivity  data 
june 2017 by garrettc
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."
designsystems  patternlibrary  designthinking  css  bestpractice  webdevelopment 
june 2017 by garrettc
4 Things I Know About Pattern Libraries, And one thing I don't...
It’s been four years since I wrote about Responsive Deliverables. Since then I’ve been working steadily with companies to build out their own “tiny bootstraps”. I’ve been reflecting on this work and I thought I’d share some of the things I’ve learned.
patternlibrary  designsystems  webdesign  bestpractice  business 
june 2017 by garrettc
"Dragoman is a plugin for creating applications with a token-based design systems approach. Using gulp with yaml "tokens", Dragoman generates multi-platform assets for core design attributes."
json  yaml  less  scss  android  ios  webdesign  designsystems  patternlibrary  tokens 
june 2017 by garrettc
Design systems, style guides, pattern libraries. What the hell is the difference?
"And this got more complicated when we came with style guides. Or maybe component libraries. Or pattern libraries. Did you hear about design systems? It’s the big thing for 2017. Are they the same? Is there a difference? Why don’t we call it simply documentation?"
designsystems  patternlibrary  styleguide  business  documentation 
june 2017 by garrettc
The Most Exciting Design Systems Are Boring
Design systems should solve problems that designers confront over and over again, so that they can turn to more interesting challenges.
design  styleguide  patternlibrary  designsystems  business  efficiency 
june 2017 by garrettc
Selling a Design System before asking for buy-in
"this is an article of how we sold and gained adoption of an internal Design System at EA before we asked for buy-in. We call this system Joystick."
designsystems  patternlibrary  business  efficiency  webdevelopment  appdevelopment 
june 2017 by garrettc
Carbon Design System
Carbon is the design system for IBM Cloud products. The Carbon Design System is a series of individual styles and components, that when combined make beautiful, intuitive designs. These designs are systemic and logical, as they all follow the same universal principles.
ibm  webdesign  styleguide  designsystems  designthinking  webdevelopment 
june 2017 by garrettc
The Discovery Education design system and pattern library.
designsystems  designthinking  branding  patternlibrary  webdesign  webdevelopment  appdevelopment 
may 2017 by garrettc
Painting with Code
Behind-the-scenes work, event updates and stories from our creative community
reactjs  sketchapp  designsystems  designthinking  javascript  webdevelopment  webdesign 
april 2017 by garrettc
Intro to the 8-Point Grid System
"As a designer you’ve probably heard the term grid whether you’re designing a website, a magazine, or a mobile app. We have grids for all sorts of content arrangements. We use column grids to align content horizontally. Baseline grids to vertically align bodies of text. Soft grids and hard grids to describe how strictly we adhere to them. I took interest in the 8pt grid system after hearing Bryn Jackson avidly talk about it. I decided to find out what, if any, benefits an 8pt system could give my designs."
medium  article  design  designsystems  designthinking  grid  webdesign 
april 2017 by garrettc
Cooking with Design Systems
Design systems make deciding in the browser much easier if you have the right ingredients.
designsystems  designthinking  webdesign  webdevelopment  bestpractice 
february 2017 by garrettc
Designing Systems, Part 1: Theory, Practice, and the Unfortunate In-between
Brasília, seen from above, looks like a bird or a plane. Image: NASA Earth Observatory Part one of a three-part essay based on the talk I gave at Smashing…
designpatterns  designsystems  userexperience  webdevelopment  designthinking  architecture  city 
february 2017 by garrettc
Pattern patter.
"On the web, can our patterns be more than just front-end code?"
styleguide  patternlibrary  designsystems  designthinking  webdesign  webdevelopment 
january 2017 by garrettc
Design system documentation
"Here is a list of links to all the online design system documentation of note I found while researching how other teams document their design systems, brand guidelines and styleguides."
documentation  styleguide  patternlibrary  designsystems  designthinking  resource 
january 2017 by garrettc
Plasma design system
"This case study aims to chronicle how we created a design system at WeWork. I’ll share insight into our process, product design, the tools we used to create and implement the system, and also how we document and share the system with our team."
designsystems  designthinking  patternlibrary  userexperience  webdesign  webdevelopment  pamoja 
january 2017 by garrettc
Evaluating Tools For Building a Component Library
"Component libraries are living inventories of user interface elements (components). I hadn't yet built one for a client, but I'd heard of a few tools used to do so. What I didn't realize was just how many helpful tools there were. When deciding which to use, I realized I needed to define what I considered most important for this specific project. This post outlines that experience."
patternlibrary  designsystems  designthinking  atomicdesign 
january 2017 by garrettc
Component QA in Design Systems
"In systems, you better be ready for the next questions: “What do you mean by quality?” and “How do you assure that quality?” Your answer must be better than “We check stuff after we build it.”"
designsystems  patternlibrary  webdesign  atomicdesign  qualityassurance  testing 
january 2017 by garrettc
Color in UI Design: A (Practical) Framework
"Or, said another way: The fundamental skill of coloring interface designs is being able to modify one base color into many different variations."
colour  design  designthinking  designsystems  patternlibrary  theory  webdesign  webdevelopment 
january 2017 by garrettc
Buttons in Design Systems
"I love buttons. I can do things with buttons. Take a next step. Make a commitment. Get things done. With buttons, interaction springs to life.

That’s why Buttons are arguably a design system’s most important component. Devilishly simple, they offer a simple label in a defined region I can press. As such, buttons are where you apply a design language’s base attributes in ways that’ll ripple throughout more complex component later."
designsystems  designthinking  patternlibrary  buttons  webdesign  userinterface  webdevelopment 
january 2017 by garrettc
Buttons in Design Systems
"…Buttons are arguably a design system’s most important component. Devilishly simple, they offer a simple label in a defined region I can press. As such, buttons are where you apply a design language’s base attributes in ways that’ll ripple throughout more complex component later."
designsystems  designthinking  patternlibrary  buttons  userinterface  webdesign  webdevelopment 
january 2017 by garrettc
Learning from Lego: A Step Forward in Modular Web Design
"With hundreds of frameworks and UI kits, we are now assembling all kinds of content blocks to make web pages. However, such modularity and versatility hasn’t been achieved on the web element level yet. Learning from Lego, we can push modular web design one step forward."
webdesign  designsystems  designthinking  patternlibrary  webdevelopment  scalability 
december 2016 by garrettc
Design Tokens in Design Systems
Jina, from Salesforce, talks about the Lightning Design System.
designsystems  designthinking  slideshow  presentation  webdevelopment  webdesign 
december 2016 by garrettc
The Atomic Workflow — People, Process, And Making Design Systems Happen – Smashing Magazine
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…
webdevelopment  webdesign  designsystems  patternlibrary  scaling 
december 2016 by garrettc
Why do we create style guides?
"At Next, the style guides we create are the manifestations of our design systems. They provide our clients with the scalability to support their business or product into the future on the Web."
designthinking  webdesign  webdevelopment  patternlibrary  designsystems  styleguide  bestpractice 
december 2016 by garrettc
Programming Design Systems
A free digital book that teaches a practical introduction to the new foundations of graphic design.
design  ebook  programming  designsystems 
october 2016 by garrettc
Design patterns
"These patterns are based on the research and experience of the whole GOV.UK design community"
reference  guide  designsystems  govuk  gds  patternlibrary  patterns 
october 2016 by garrettc
« earlier      
per page:    204080120160

Copy this bookmark:

to read