Inside Frontend #2 / 動的デザインガイドラインのつくり方 / Masanari Hamada @nairirou / #InsideFE
動的デザインガイドラインのつくり方
Inside Frontend #2 / 動的デザインガイドラインのつくり方 / Masanari Hamada @nairirou / #InsideFE
IBM Design Language
Build Bonds This is the guiding ethos behind IBM’s design philosophy and principles. This helps us distinguish every element and every experience Designed by IBM.↓
Pepabo Design
GMOペパボ株式会社のデザインにまつわるドキュメントをまとめているウェブサイトです。現在は、共通基盤デザインシステム「Inhouse」のドキュメントを公開しています。
Color contrast is an important aspect of accessibility. Good contrast makes it easier for people with visual impairments to use products, and helps in imperfect conditions like low-light environments or older screens. With this in mind, we recently updated the colors in our user interfaces to be more accessible. Text and icon colors now reliably have legible contrast throughout the Stripe Dashboar
Hawkins: Diving into the Reasoning Behind our Design System
Stranger Things imagery showcasing the inspiration for the Hawkins Design Systemby Hawkins team member Joshua Godi; with cover art from Martin Bekerman and additional imagery from Wiki Chaves Hawkins may be the name of a fictional town in Indiana, most widely known as the backdrop for one of Netflix’s most popular TV series “Stranger Things,” but the name is so much more. Hawkins is the namesake t
DMMのエンジニアで『React開発 現場の教科書』の著者でもある石橋啓太さんにお声がけ頂いて『ReactとAtomicDesignからみるコンポーネント開発』でお話をさせて頂きました。 テーマは個人的に関心のあった「Atomic Designの代替」を選びました。Atomic Designと言えば、いまや国内外含めてコンポーネント設計をする際に多くの人が参照する概念ですが、すべての環境に適切かと言えばそれはまだ疑問を残す余地があります。 「Atomic Designを採用してみたけどしっくりこなかったので自分たちに合った概念を考えてみた」という個人・組織がいるのはMediumの記事などを通じて知っていたので、そういった事例を集めてみたら面白いんじゃないかなと思ったのがこのテーマを選んだきっかけです。完全に趣味です。 Atomic Designへの疑問Atomic Designについて知り
これまでさまざまな組織のデザインシステム構築や運用を支援してきたグッドパッチ。本連載ではデザインシステムにフォーカスし、その概要や歴史、導入から運用、構築にいたるまで網羅的にお届けします。第1回のテーマは「デザインシステムとは」です。 こんにちは。グッドパッチのUIデザイナーの乗田です。グッドパッチはビジネス課題をデザインで解決するデザインカンパニーとして、これまでさまざまな組織に対してデザインシステムの構築や運用を支援してきました。これらの経験をもとに、本連載ではグッドパッチが大切にしている観点や姿勢を交えながら、「デザインシステムとは何か」「必要性」「はじめかた」「運用方法」などのテーマをお届けします。初回である今回は「デザインシステムとは」について紹介します。 デザインシステムのはじまり はじめに、デザインシステムとはどのようなものかを調べてみると、ソフトウェアにおける「一貫性を維持
LINE Design System
LINE Design System is an integrated set of guidelines for components, interaction methods, and other aspects that contribute to LINE's design and user experience.
Reinvent the experience, not the wheel Today, we’re launching U.S. Web Design System 2.0 (USWDS 2.0), a new foundation for the future of our design system. This new version was designed to make it easier for any project to integrate USWDS and use it to support your mission and the needs of your audience. USWDS is a library of code, tools, and guidance to help government teams design and build fast
Evergreen
Meet Evergreen,Segment’s design systemEvergreen is a React UI Framework for building ambitious products on the web. Brought to you by Segment. Get Started
Vercel Design
researchers.Vercel has brought together some of the most talented creatives on the web to craft world-class websites. HomeResourcesPeopleCareers Resources that we take care of and work with.We design systems and systemise designs. Imbuing our work with care and craft as stewards of the Vercel Brand and Geist Design System.
Design Guidelines & Atomic Design ー 社内勉強会を開催しました。 - CrowdWorks Designer Blog | クラウドワークス デザイナーブログ
こんにちは。デザイナーの上田です。来週はいよいよDesign Systems Virtual Summit 2018が始まりますね。今から楽しみです。 さて、皆さんの会社のデザイン組織には、デザインのカラーやタイポグラフィー、ナビゲーションや情報設計などの共通の方針はありますか？ クラウドワークスでは5年ほど前にTwitter BootstrapをベースにしたUIライブラリを作って運用を始めました。 しかし、私を含むデザイナーの知見不足や組織編成など、様々な事情が重なりプロダクト開発の中で運用されなくなってしまい、サービス全体で部分的に最適化されたスタイルやコンポーネントが乱立するプロダクトになってきてしまっています。 「絶妙なバランスでプロダクトが成り立っている」「ガイドラインなんて無くてもなんとかなってるじゃん！」という視点もある一方で、プロダクトやチームの課題として、ちぐはぐなデザイ
Atlassianがデザインに注力し始めた2012年、新しいデザインチーフとしてJürgen Spangl氏が雇われました。彼が始めた最初のプロジェクトの１つは、新しい会社内のデザインシステムであるAtlassianデザインガイドライン（ADG）の作成でした。 当時Atlassianは、デザイン手法を拡大する際に共通する、いくつかの困難に直面していました。 デザインのばらつき：当時は45種類の異なるドロップダウンがありました。 ツールの不足：複数の製品にまたがって仕事を拡大するために、チームはより強力なデザインツールを必要としていました。 余計な質問：Atlassianのデザイナーは、「どのボタンを使うべきか」などのよくある質問に答える時間を減らして、コアな問題により多くの時間を費やしたいと望んでいました。 かつてNathan Curtis氏は、「デザインシステムとは、製品を提供するための
@storybook/cli - Storybook
https://baseweb.design/
I’ve long referred to Color, Type and Icons as the “Big 3” of a system’s visual language. All UI components — from Buttons on up — are built with them. But I left something out. Space, our final frontier. Space Rivals ColorSpace is everywhere. CSS uses properties like padding, margin, and absolute positioning’s left, right, top and bottom to separate objects. Across five libraries (Bootstrap, Sale
以下はJeff Crossmanさんの同名の記事を翻訳（一部縮約）したものです。 GEのデザインシステムは2012年にGE社内の多数の利用者と多様なデザインパターン（UIコンポーネントとインタラクションパターン）を支援するために作成された。これは世界に散在している40,000人のソフトウェアエンジニアが一貫性のあるソフトウェアを作れることを目標に１０人のデザイナーで構成されたチームによって作られたものだった。dave croninの発表を見るとこのチームが直面した課題に関して知ることができる。 最初のデザインシステムは内部的には成功だったがそれには成長痛もあった。ボタンやテキストボックスなど、一般的なケースでは問題なかったけど、マッピングやデータヴィジュアライズなど、より複雑なニーズにも対応する必要があった。アプリケーション単位の修正や拡張の要求はデザインシステム本来の目的に反しており、非
Design Systems Database: Surf among top‑notch Design Systems
Best-in-class Design Systems with components and foundations references from top-tier tech companies and leading UI teams
A11y – Focus OrderQuickly annotate your design’s focus and tab order for a meaningful flow of interactive objects. A11y – Color Contrast CheckerEnsure your text is readable by adhering to Web Content Accessibility Guideline standards.
Examples
Examples (240) Real life pattern libraries, code standards documents and content style guides. Show All ACCESSIBILITY BACKEND BRAND BRANDING CODE CODING COMPONENTS CSS DESIGN DESIGNLANGUAGE FRONTEND GUIDES HTML INTERFACE JAVASCRIPT JEKYLL LIVINGSTYLEGUIDE PATTERNS PRINCIPLES REACT ROUNDUP RUBY SASS TEMPLATES TYPOGRAPHY UI VOICEANDTONE WEB WRITING Carbon Design System By IBM Carbon is the design sy
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. Download (v3.5.7) Docs
18F: Digital service delivery | Building a large-scale design system: How we created a design system for the U.S. government
Official websites use .gov A .gov website belongs to an official government organization in the United States. Secure .gov websites use HTTPS A lock ( A locked padlock ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites. Today, there are nearly 30,000 U.S federal websites with almost no consistency between them. Between the
GitHub - kufu/smarthr-ui: React components for creating SmartHR applications.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Tokens in Design Systems
In a recent code review, my passions stirred as I walked through a Pill component’s style with a designer teammate. I could hardly contain my excitement: “Look. Yes, it’s code, but look closely at those tokens. You know what this looks like? Like specs! So what? I can read this, as can you. And we can thread these everywhere: doc, designs, and convos too. Everywhere!“ My teammate’s reaction hinted
Style Dictionary - Style once, use everywhere. A build system for creating cross-platform styles.
Style once, use everywhere. A build system for creating cross-platform styles.
2018/04/20で発表したBonfire Design #3 の登壇資料です。
2022年現在、ユーザーインタフェースのデザインやその開発について語る上で「デザインシステム」はどのような組織においても話題に上がるトピックではないでしょうか。 かく言う私もデザインシステムに強い関心を持っており、業務にてデザインシステムの構築・維持に取り組んでいる他、過去には私が魅力的だと思うデザインシステムを紹介するブログ記事を執筆しました。 0. デザインシステムの導入における障壁昨今はデザインシステムを構築した事例や構築の方法論の共有も盛んとなっており、その強い話題性が起因して新たなデザインシステムが続々と誕生しています。話題になっているから・便利だから・品質を上げてくれるから・ユーザー体験が向上するからなど、導入の理由は組織・プロダクトに応じて多岐に渡ると思います。 上記の理由に加え、デザインシステムを構築する前に立ち止まって考えたいポイントが「投資対効果」です。 プロダクトに応
Inhouse - Pepabo Design
About Inhouseとは、GMOペパボ株式会社の共通基盤デザインシステムです。コンセプトや仕組み、プリンシプルを紹介します。 Flavors Color、Sizing、Icon、Typography、Elevationなどのブランドごとに置き換え可能なデザイントークンをFlavorと呼んでいます。
We’d like to use analytics cookies so we can understand how you use the Design System and make improvements. We also use essential cookies to remember if you’ve accepted analytics cookies.
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。ヤフーのデータソリューション事業に携わっている水野です。現在は、「DATA SOLUTION」というサービスと、その開発基盤となる「DS.Design System」の開発に関わっています。 近年、デザインシステムはプロダクト開発のホットワードとなり、多くの有名企業がオープンソースとしてデザインシステムを公開しています。例えば、Atrasian社のLightning、Adobe社のSpectrumは有名なデザインシステムで、アメリカでは200以上の政府サイトに導入されているUSWDSもあります。企業のみならず、政府単位でデザインシステムが導入され、驚くべき広がりを見せています。 DATA SOLUTIONでは、デザイン
Audi user interfaces are as varied as their uses – ranging from inspiring websites to applications for a particular service. The aim is to create varied solutions and a well-balanced, system-wide user experience – from the app to the vehicle. The basis for this is provided by a joint set of components, modules and animations. Layout The components and the layout offer wide-ranging options in the a
Contents x Get started Use Freehand Integrations Account administration Security Billing and plans Your New InVision Update hub Classic InVision Release notes Powered by Design System Manager (DSM) Dark LightContentsDesign System Manager (DSM) Dark LightIntro to DSM2 Articles in this category Building Design Systems3 Articles in this category Creating and Using DSM Design Systems14 Articles in thi
# ThinkAtomicDesign でお話した資料です。 https://thinkatomicdesign.connpass.com/event/115574/
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
Interface Inventory
Many are familiar with the concept of a content inventory. Content audits are usually performed in the early stages of a website redesign process to take stock of all a site’s content. It’s a tedious process involving spreadsheets and caffeine, but the hard work pays off. You end up all your content laid out on the table, which gives you a new perspective on what your content is and how to tackle
デザインシステム浸透に欠かせないサポートについて
使いこなすための前提を合わせる小さな組織では、デザインシステム を作る人と使う人が同じ場合がほとんどです。自分達の作り方を最適化することがゴールになるので、ガイドラインより UI コンポーネントを揃えたり、実装との連携を優先して進めるほうが効果的です。次第に関わる方が増えたとしても、考え方や作り方が合う有志を集めてボトムアップで少しずつ広げることも可能です。 こうしたアプローチは大きな組織になると次第に難しくなります。複数のプロダクトでデザインシステムが必要になるだけでなく、それぞれ作り方が異なります。外注していると、作り方がハッキリ分からない場合もあります。また、前線で活躍する方とスキルギャップがある方が、入社・異動することもあります。 デザインシステムのメリットのひとつに「効率化」が挙げられることがありますが、これは携わるメンバーに下記の知識やスキルが備わっているという前提に基づいてい
Design System Collection
A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team
We’re here to help you build experiences that inspire people to create the life they love
Design Systems Repo
Design Systems GalleryA comprehensive and curated list of design systems, style guides and pattern libraries that you can use for inspiration. Wonderflow Wanda Design SystemWanda is Wonderflow’s open-source design system built for digital products and experiences. Wanda aims to provide a solid guidance for designers and developers, to reduce the risks of divergence. Italian Public Administration.i
Mar 13rd, 2018Vue Design System is a set of organized tools, patterns, and practices that work as the foundation for Vue.js application development. What initially started as a quick-n-dirty prototyping tool for a client of mine, has grown into a fully capable systems tool that provides an environment where the pattern library and live application can be perfectly in sync. What initially started a
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Designing accessible color systems
Alternative Atomic Designをさがして｜Ryo Yoshitake | THE GUILD
［新連載］良いデザインシステムとは その基本と構造をグッドパッチが解説
Introducing USWDS 2.0
Atlassianはどのようにしてデザインシステムを作り上げたか
Space in Design Systems – EightShapes LLC – Medium
GE’s Predix Design System - Roy S. Kim - Medium
Microsoft Fluent Design System
Vue Design System
2018-bonfire-design-komerco-design-system
そのデザインシステムは投資対効果をもたらしますか？｜Kento Norita
Home – GOV.UK Design System
カオスなデザインシステムを生き返らせるためにやったこと
User Interface / UI Introduction
Sketch plugin | Brand.ai
デザインとエンジニアリングをつなぐコンポーネントの運用設計
Gestalt is Pinterest’s design system
Vue Design System