recentpopularlog in

garrettc : designsystems   85

« earlier  
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 
16 days ago 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 
23 days ago 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 
4 weeks ago 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 
10 weeks ago 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 
11 weeks ago 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 
12 weeks ago 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
Adele
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
"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
Comet
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
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
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
✨Una Kravets' Blog: Musings on Front-End Development and Design✨
"Component libraries can be very useful in terms of organization, unity, and ensuring performance/accessibility. They're a great asset to any team (especially as teams grow) and I've learned a lot about the development of design systems along the way from working on various teams of varying size and with unique groups of people […] This is not a technical post, but a few good items to consider before diving into such an endeavor."
designsystems  designthinking  webdesign  patternlibrary  webdevelopment 
october 2016 by garrettc
Space in Design Systems
From Basics to Expanded Concepts to Apply Space with Intent.
designsystems  webdesign  designthinking  reference  bestpractice 
october 2016 by garrettc
Design System Doc Components
Excellent tips and advice for documenting a design system.
designsystems  designthinking  webdesign  design  documentation 
september 2016 by garrettc
Designed for Growth
"Design debt is acquired by design teams creating non-reusable solutions for isolated problems. Design debt is made up of an over abundance of non-reusable and inconsistent styles, treatments, and interactions and the interest is the impossible task of their management and modification."
designsystems  business  design  designthinking 
september 2016 by garrettc
Why and How to Test Your Pattern Library – Part 1: Testing Strategy
Still testing your pattern library manually? Here's how to improve user confidence by using design specs to combine documentation, communication and automated cross-browser testing.
designsystems  patternlibrary  testing  webdevelopment  pamoja  userexperience 
september 2016 by garrettc
Integrating pattern libraries with backend code
Great discussion on Github about the holy grail of pattern libraries: One source of truth, where you define the pattern once, and then distribute it to the build system.
patternlibrary  patterns  webdevelopment  designsystems 
september 2016 by garrettc
Style Guides: Best Practices and Workflow for Web Developers
With responsive websites being an expectation in today's web landscape, we need to maintain the complexity and flexibility of a system by designing and building individual components that move and reflow within layouts. Style Guides are a mechanism to style most (if not all) of your site's themable elements in one place, and have quickly become the foundational tool for tackling an increasingly-diverse web landscape. Getting greater theme coverage allows your site builders and content managers to dynamically add new pages and layouts to your site, all while keeping the look and feel intact and maintaining a consistent experience for the end user. Style Guides give designers and developers a platform to create a shared vocabulary, building out components of a system instead of ‘pages’ to a website, and deciding on markup together.
styleguide  patternlibrary  designsystems  designthinking  webdevelopment 
september 2016 by garrettc
Pantsuit: The Hillary Clinton UI pattern library – Git out the vote
Absolutely love ’s deep dive into “Pantsuit,” the pattern library used by the Hilary Clinton campaign
patternlibrary  designthinking  designsystems  webdevelopment 
august 2016 by garrettc
What we would change about Rizzo
Lessons learned while building the Lonely Planet style guide and pattern library.
styleguide  webdesign  webdevelopment  designsystems  patternlibrary 
august 2016 by garrettc
Conducting an Interface Inventory
"An interface inventory is similar to a content inventory, only instead of sifting through and categorizing content, you’re taking stock and categorizing the components making up your website or app."
webdevelopment  userinterface  usercentereddesign  designsystems  designthinking 
august 2016 by garrettc
« earlier      
per page:    204080120160

Copy this bookmark:





to read