recentpopularlog in

garrettc : patternlibrary   64

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
Pattern Library First: An Approach For Managing CSS
"CSS can be hard to manage across a project, especially when you need to include media queries for various breakpoints and fallbacks for older browsers. In this article, we will take a look at using Fractal to manage components which use CSS Grid."
css  styleguide  fractal  patternlibrary  webdesign  webdevelopment 
july 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
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
Inclusive Components
A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece.
accessibility  reference  css  components  html  webdevelopment  webdesign  bestpractice  patternlibrary 
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
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
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
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
Comet
The Discovery Education design system and pattern library.
designsystems  designthinking  branding  patternlibrary  webdesign  webdevelopment  appdevelopment 
may 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
The Atomization of Your Brand Experience
"[…] the difficulty in recent years is that brand experiences have been on an accelerated path to atomization — the breaking down of a user’s brand experience into a distinct series of building blocks — with no slowing down in sight. These building blocks are sometimes called atoms, sometimes called cards, or sometimes called patterns."
patternlibrary  atomicdesign  webdesign  appdevelopment  webdevelopment  branding  cards  patterns 
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
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
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
Taking Pattern Libraries To The Next Level
"…finding the right way to architect a lasting pattern library and to integrate it into an existing workflow seems to be a challenging task and one that most design and development teams eventually give up on. In this article, I’d love to highlight some practical techniques and strategies to establish a lasting pattern library that will be actively and consistently used by the entire team."
css  patternlibrary  patterns  styleguide  webdesign  webdevelopment  bestpractice  designthinking 
october 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
Qualities of Successful Pattern Libraries: Pick Any Two - Cloud Four
Pick two: User-Friendly, Collaborative, and Integrated. Your pattern library can be 2 of those 3, says :
collaboration  patterns  webdesign  styleguide  patternlibrary  webdevelopment 
july 2016 by garrettc
Build your UI toolkit
Fabricator is a tool for building modular website design systems.
webdesign  webdevelopment  atomicdesign  designthinking  designsystems  patternlibrary 
april 2015 by garrettc

Copy this bookmark:





to read