Patterns.devImprove how you architect webappsPatterns.dev is a free online resource on design, rendering, and performance patterns for building powerful web apps with vanilla JavaScript or modern frameworks.
Tips for Portable Patterns
One of the promises of design systems is portability. Every new project should benefit from the patterns and principles of the previous… why reinvent the wheel each time? But accomplishing that can be tricky when it comes to HTML, CSS and JavaScript patterns. Teams that maintain a consistent technical stack have it easier in this regard. Maybe they only develop a single product, or maybe they mand
Pattern-Book - A Component Pattern Library (Style Guide) designed to be easier to maintain
Why should a pattern library need to be told which styles you use? A pattern library designed to be easier to maintain Q. What is a Pattern Library? A pattern library, also known as a style guide, is a way of showing example usage of HTML and CSS for components (React components, or plain HTML). When sites comprise different technologies or are very large then having this example usage can help ac
Pattern Library Workflow
Just about a year ago, I started working at Allstate. Myself and my team of two UI Engineers and a Design Lead established a Pattern Library that has been very successful. With the success I decided that it would be a good idea to share our workflow in an article. For starters we have the four segments that every Pattern Library is structured with. These start with fundamentals that translate into
A working pattern library. — ethanmarcotte.com
Whether I’m designing a new site or auditing an existing one, nearly all my design projects from the last few years have culminated in a pattern library. But in my experience, the biggest challenge of modular design isn’t designing the patterns. It’s everything that comes after that. (That’s not to say designing in patterns is easy, mind.) Here’s the inimitable Alla Kholmatova, from her wonderful
Pattern Libraries
Pattern Library: https://natashahockey.github.io/pattern-library/ IntroductionPattern libraries and their importance have gained a lot of attention in the tech space recently. Designers and developers are now understanding the benefits of having tried and tested components ready to go for projects. It means that it takes less time to build new features and pages. Whilst the initial period of desig
スタイルガイドジェネレーターの「Fractal」がかなり良さそう
ずっと自分好みのスタイルガイドジェネレーターを探していたんですが、ようやく見つけました！「Fractal 」というツールで、かなり良さそうなのでご紹介します。 初級編、中級編の2回に分けて、初級編ではインストールと初級設定からウェブUIの起動までを、中級編ではコンポーネントのより細かい設定などについてご紹介します。公式ドキュメントは初めてだとわかりづらいところもあったので、その辺を補う形でまとめてみたいと思います。 ※先日、スタイルガイドとパターンライブラリの違いについてまとめましたが、スタイルガイドやパターンライブラリを自動生成するツールは「スタイルガイドジェネレーター」というのが一般的なようです。「パターンライブラリジェネレーター」とは呼ばないみたいですね。 では早速、「Fractalのはじめの一歩」的な感じで行ってみましょう！ Fractalとは まずは、ざっくりとFractalをご
Air/shots
Air/shots is an internal initiative from our design tools team. A feature on air/shots originally published in Fast Company earlier this year. Airshots in action I’m a Design Technologist. To be honest, I’m not sure exactly what that means. While my official job description is to create tools for the Design team at Airbnb, I also try to keep in mind how the tools I develop can help the entire com
How To Create A Pattern Library And Why You Should Bother
Looking for an in-Depth Guide to Pattern Libraries? Gain free and instant access to a 3500-word step-by-step guide to creating your first pattern library, plus advice on UX design every 1-2 weeks via email. What Is a Pattern Library? A pattern library is a collection of user interface design elements. The site UI-Patterns describes these user interface design patterns as: Recurring solutions that
スタイルガイドとパターンライブラリの違い
最近、パターンライブラリの作成ツールを探していて「Fractal」というツールを試しています。で、ふと「スタイルガイドとパターンライブラリの違いってなんだっけ？」という疑問が湧いたので、ちょっと整理してみました。ちなみに、どっちがいいかを書いているわけではないです。 特にウェブ向けのものではスタイルガイドもパターンライブラリもほぼ同じ意味で使われていることが多い気がしますが、あえてスタイルガイドとパターンライブラリを違ったものとして定義するとどうなるか、まとめてみます。 スタイルガイド 企業や組織のブランドイメージを統一するためにまとめられたガイドライン ロゴの使い方、配色パターン、タイポグラフィなどのビジュアルデザインを定義する より総括的なものだと文章のトーン&マナーなどのコミュニケーションデザインを定義する場合もある UIパターンやコンポーネントのデザイン一覧（パターンライブラリ）を
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
No Style Design System
https://github.com/teambit/bit/blob/master/README.md
Pattern patter. — ethanmarcotte.com
Drupalcon 2017: Pattern Language
Pattern Library vs Style Guide - what are the differences?
What is the Difference Between a Style Guide and Pattern Library?
Color | Mailchimp