recentpopularlog in

garrettc : styleguide   60

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
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
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
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
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
Dozens of design systems and pattern libraries thoroughly analyzed.
design  reference  styleguide  designsystems  webdevelopment  appdesign  appdevelopment  webdesign 
march 2018 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
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
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
Accessibility Style Guide
"The A11Y style guide comes with pre-populated accessible components that include helpful links to related tools, articles, and WCAG guidelines to make your site more inclusive. These components also serve as a guide for both HTML markup and SCSS/CSS code, to inform designers, front-end and back-end developers at every stage of the website’s creation."
accessibility  styleguide  reference  webdevelopment  webdesign 
march 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
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
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
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
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
Website Style Guide Resources
A collaborative collection of resources for creating Front-End Style Guides and Pattern Libraries.
design  reference  styleguide  designthinking  webdesign  webdevelopment  atomicdesign  resource 
august 2016 by garrettc
Fractal Documentation
Fractal is a tool to help you build and document web component libraries, and then integrate them into your projects.
component  styleguide  webdevelopment  webdesign  tool 
july 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
MailChimp Style Guide
Guidelines and resources for web writers and editors. Includes: voice and tone, grammar, web style, social media, email newsletters, blog posts, legal content, technical content, accessibility, translation, copyright, and more.
writing  styleguide  grammar  mailchimp  design  inspiration  copywriting 
august 2015 by garrettc
Decouple Design with Styleguide Driven Drupal Development
"The traditional approach of directly styling default Drupal markup is not a scalable solution when we consider the volatility of the modern browser ecosystem. It is now necessary for front-end developers to abstract design patterns into manageable components. By using a styleguide we can automate the process of isolating and cataloguing patterns so they can be iterated and tested against independently. In this post I discuss ideas and put forward some informal rules around managing these components from within a styleguide."
drupal  styleguide  frontend  webdesign 
february 2015 by garrettc
KSS Knyle Style Sheets
"Documentation for any flavor of CSS that you’ll love to write. Human readable, machine parsable, and easy to remember."
css  documentation  styleguide  less  sass 
february 2015 by garrettc
Pattern Library
Jekyll-based open source style guide/pattern library.
jekyll  opensource  webdevelopment  styleguide  tools 
january 2015 by garrettc
GOV.UK elements
Component based style guide from Gov.UK for outside services.
css  html  markup  webdesign  process  styleguide 
may 2014 by garrettc
Creating Style Guides
Several years ago, I was working on a large, complex application. It was a bit of a legacy project: many different designers and front-end developers had come and gone, each appending a new portion to the sprawling application. By the time I arrived, the CSS was huge, the styles were varied, and it
styleguide  webdesign  webdevelopment  designsystems  atomicdesign 
april 2014 by garrettc
Pattern sharing
Jeremy Keith on component / design pattern based deliverables
styleguide  designthinking  webdesign  webdevelopment  projectmanagement 
january 2014 by garrettc
Front end styleguides
Comprehensive collection of style guides and pattern libraries curated by Anna Debenham.
design  designthinking  styleguide  patterns  resource  webdesign 
september 2012 by garrettc
Little Printer style guide
The Little Printer style guide and API documentation is delightful. (PDF link)
littleprinter  styleguide  api  documentation  berg 
august 2012 by garrettc
Paul Robert Lloyd's bootstrap for a styleguide and pattern primer. Base don the one he uses on his own site.
bestpractice  webdesign  webdevelopment  styleguide  patterns 
may 2012 by garrettc style guide
Very good example of a web style guide from
css  webdesign  documentation  styleguide 
december 2011 by garrettc
Search 43 different stylebooks at once. Just in case you're not confused enough.
reference  writing  style  editing  search  styleguide  grammar 
february 2011 by garrettc

Copy this bookmark:

to read