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.
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.
デザインシステムを育てていく｜sakito
はじめに ここ最近はデザインシステムの構築や支援を行なっています。そこで、デザインシステムを作ることが目的になっていることを感じることがあります。私はデザインシステムは作ることよりも、育てていく考え方が重要だと思っているので、その考えについてお伝えします、どなたかの参考になれば幸いです。 デザインシステムとは？まずはデザインシステムそのものについてです。デザインシステムの事例から学んでみます。 GoogleのMaterial DesignGoogleのMaterial Designは「チームがより高品質なデジタル体験を各OS上で構築するためのもの」と表しています。 Material is a design system created by Google to help teams build high-quality digital experiences for Android, iO
Nested Symbols & Auto-Updating Styleguides | Jan Losert - Store
Nested Symbols & Auto-Updating StyleguidesLet me present the smartest template and your future starting point for every User Interfaces in Sketch. Stop wasting your time by crafting the same design systems and elements from scratch over and over and over again - and let the magic of this template’s nested symbols begin!
SaaSプロダクト開発には欠かせない。Takramと考える『デザインシステム』 ラクスル社内勉強会レポート｜RAKSUL DESIGN
SaaSプロダクト開発には欠かせない。Takramと考える『デザインシステム』 ラクスル社内勉強会レポート こんにちは、「RAKSUL DESIGN MAGAZINE」です。 近年、国内外のB2B、マーケットプレイス企業で導入されている「デザインシステム」。プロダクト開発には欠かせない考え方となっており、特に画面数の多いB2B向けのSaaSプロダクトにおいてはデザインシステムの作成はマストになりつつあります。 要はデザインシステムをしっかりと設計することが、ひいては事業成長につながるわけです。 今回Takramのメンバーをラクスルにお招きし、デザインシステムの考え方やメリットについての社内勉強会を開催しました。 押さえておきたいデザインシステムの基盤になる考え方冒頭では、Takram代表の田川さんがプレゼンを行い、なぜデザインシステムが必要になるのかについて説明しました。 新規プロダクトを
Redesigning Google: how Larry Page engineered a beautiful revolution
By Dieter Bohn and Ellis Hamburger Something strange and remarkable started happening at Google immediately after Larry Page took full control as CEO in 2011: it started designing good-looking apps. Great design is not something anybody has traditionally expected from Google. Infamously, the company used to focus on A/B testing tiny, incremental changes like 41 different shades of blue for links i
How Spotify’s Design System Goes Beyond Platforms | Figma Blog
Design Manager Juli Sombat sheds light on how a need for more cohesion led Spotify’s design systems team to take a cross-platform approach to components. In 2019, when our leadership at Spotify unveiled their ambition to make audio content available and consistent to anyone on any device, our design team faced a significant challenge: Spotify would now be available across 45 unique platforms, and
Design systems have become core to the way we design and build at GitHub. Since 2011 GitHub designers have documented UI patterns and shared common styles. In 2012, CSS and other assets were packaged up into a Ruby Gem for use in GitHub websites — this package was named Primer. Primer continued to be used internally for years before eventually having its CSS and accompanying documentation open-sou
GitHub - microsoft/fast: The adaptive interface system for modern web experiences.
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
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
こんにちは。Incrementsのデザイナーの綿貫です。 今回はIncrementsで運用しているデザインシステムの公開をお知らせします。 この記事は前編後編に分かれており、前編の内容は以下の通りです。 公開データについてデザインシステム公開の背景Incrementsのデザインシステムの構造トピック：Figmaの使用について公開データについて前編で公開するデータは以下の2つです。 詳細は後ほど説明しますが、プロダクトに関係なくIncrementsを横断して使用しているデータです。 デザインシステム公開の背景現在Incrementsではデザインにも力を入れています。 目に見える機能変更から社内の体制の改善まで、2020年から領域を問わず様々な再設計を実施してきました。 その一環で小規模なデザインシステムも作成しました。 作って終わりではなく、アップデートを重ねるうちに段々と軌道に乗っています
Design Guidelines & Atomic Design ー 社内勉強会を開催しました。 - CrowdWorks Designer Blog | クラウドワークス デザイナーブログ
こんにちは。デザイナーの上田です。来週はいよいよDesign Systems Virtual Summit 2018が始まりますね。今から楽しみです。 さて、皆さんの会社のデザイン組織には、デザインのカラーやタイポグラフィー、ナビゲーションや情報設計などの共通の方針はありますか？ クラウドワークスでは5年ほど前にTwitter BootstrapをベースにしたUIライブラリを作って運用を始めました。 しかし、私を含むデザイナーの知見不足や組織編成など、様々な事情が重なりプロダクト開発の中で運用されなくなってしまい、サービス全体で部分的に最適化されたスタイルやコンポーネントが乱立するプロダクトになってきてしまっています。 「絶妙なバランスでプロダクトが成り立っている」「ガイドラインなんて無くてもなんとかなってるじゃん！」という視点もある一方で、プロダクトやチームの課題として、ちぐはぐなデザイ
JerryはUXPinのコンテンツストラテジストです。過去に、Braftonでのクライアント向けのコンテンツ戦略、広告代理店のDBB San Franciscoでの経験があります。 デザインシステムの更新とリリース ―デザインシステムを更新するプロセスはどうなっているのでしょうか？ 社外に公開しているデザインシステムに関しては、オープンソースのプロジェクトページから機能リクエストができます。ただ、それは氷山の一角で、実際の社内デザインシステムでは若干異なるプロセスがあります。現時点でどれだけプロセスが整理されているかはわかりませんが、さまざまなチャネルからの要望を同じ人に集約するようにして、適切な人にタスクを割り振れるようにしています。 たとえば、プラットフォームを担当しているデザイナーからが50％、残りの50％は個別の機能開発チームからの小さい要望で、デザインシステムには含まれていないけ
Atlassianがデザインに注力し始めた2012年、新しいデザインチーフとしてJürgen Spangl氏が雇われました。彼が始めた最初のプロジェクトの１つは、新しい会社内のデザインシステムであるAtlassianデザインガイドライン（ADG）の作成でした。 当時Atlassianは、デザイン手法を拡大する際に共通する、いくつかの困難に直面していました。 デザインのばらつき：当時は45種類の異なるドロップダウンがありました。 ツールの不足：複数の製品にまたがって仕事を拡大するために、チームはより強力なデザインツールを必要としていました。 余計な質問：Atlassianのデザイナーは、「どのボタンを使うべきか」などのよくある質問に答える時間を減らして、コアな問題により多くの時間を費やしたいと望んでいました。 かつてNathan Curtis氏は、「デザインシステムとは、製品を提供するための
小さく始める Design System ~メドレー TechLunch~ | MEDLEY Developer Portal
2018-04-26小さく始める Design System ~メドレー TechLunch~こんにちは、開発本部の舘野です。 先日、メドレーで定期開催している社内勉強会「TechLunch」にて、Design System について発表しました。医療介護の求人サイト「ジョブメドレー」において、Design System を「小さく始める」手法で導入を進めているので、そのプロセスについて紹介させていただこうと思います。 Design System とは何かDesign System とは、Salesforce のLightning Design Systemや IBM のCarbon Design Systemなどが代表的な例として挙げられると思いますが、平たく言ってしまうとプロダクト独自のBootstrapとなるものです。 UI 開発の領域では、これまでスタイルガイドを作ることでデザイナ
@storybook/cli - Storybook
Tondemodesign.com
The domain tondemodesign.com may be for sale. Please click here to inquire Tondemodesign.com Related Searches: High Speed Internet Best Penny Stocks Anti Wrinkle Creams Migraine Pain Relief Best Mortgage Rates Trademark Free Notice Privacy Policy
「Atomic Design」と「Design Systems」〜デザイナーとエンジニアが二人三脚で開発する手法〜 - DMM inside
｜DMM inside
FT Product & Technology – Medium
How we combined qualitative and quantitative methods to understand Financial Times readers’ relationship with news comments sections.
こんにちは、freeeのUXチームというところでデザイナーとエンジニアの狭間の生活をしている id:ymrl です。このブログの編集長（自称）でもあります。 はやいもので2020年も終わりが近付いてきました。今年は感染症の流行、オリンピック延期、リモートワークやDXブームなど、振り返ってみれば激動の一年でした。そして年のおわりの12月ということで、今年もfreee Developers Advent Calendarとして、12月25日まで毎日いろいろなメンバーがブログを書いていきます。 あらためまして、ymrlです。昨年は デザインシステムをやるためにエンジニアからUXへ異動した話を書きました。今年はもうちょっと具体的にどんなことをやっているのか、去年からのアップデートを含めて書いてみようと思います。 内容は先日Webアクセシビリティの学校 オンライン特別授業 というイベントで発表したも
https://baseweb.design/
Spindle UIのつくりかた / Spindle UI: From Concept to Creation
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
デザイナーと開発者の連携を効率化するデザイントークンとは何か？ | アドビUX道場 #UXDojo 拡張性と一貫性を兼ね備えたデザインシステムを構築したければ、デザイントークンは欠かせないツールです。この記事は、デザイントークンが重要な理由とその活用方法を紹介します。 ほどんどのデザイナーはデザインをつくり終えた後の、実装のフェーズも重要であることを理解しています。特に、デザインを複数のOSやデバイスに展開する段階では多くの問題が起こりがちです。そうした潜在的な問題を最小化するために、デザインシステムに頼る開発チームが増えています。 そして、デザインシステムの一部として広く使われるようにになったのがデザイントークンです。この記事では、デザイントークンとは何で、どのように利用できるものなのかを紹介します。 デザイントークンとは何か？ デザインシステムにおけるトークンは、UI要素のスタイル、た
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の発表を見るとこのチームが直面した課題に関して知ることができる。 最初のデザインシステムは内部的には成功だったがそれには成長痛もあった。ボタンやテキストボックスなど、一般的なケースでは問題なかったけど、マッピングやデータヴィジュアライズなど、より複雑なニーズにも対応する必要があった。アプリケーション単位の修正や拡張の要求はデザインシステム本来の目的に反しており、非
Figmaのデザインシステム UI2 を分析してみる - DESIGN JOURNAL - 株式会社モンスターラボ
今回はコミュニティの中でFigma開発チームが公開しているデザインシステム「UI2」を分析してみました。さすがFigmaの開発チームが作っているFigmaデータだけあってとてもよく作られており、観察すればするほど面白い発見があります。 ファイルのページ構成 まず最初にファイルのページ構成を確認しておきましょう。構成はとてもシンプルでわずか3ページ。1ページ目の「Main」にガイドラインとコンポーネント集などほぼ全ての情報が集約されています。あとは2ページ目の「Templates & Extras」にコンポーネントを組み合わせた画面全体の構成例があり、3ページ目の「Cover」にFigmaファイルのカバー写真という形です。
デザイナーがデザインシステムに参加するための課題と対策
実装寄りの情報だけでは不十分 コンテンツだけでなくデザインも運用していきたいと考えたとき、デザインシステムを作ることが不可欠です。属人性を省きつつ、最低限の品質を担保することが可能なデザインシステムですが、作りさえすれば組織で広まるのかというと、そんなことはありません。 Salesforce の Lightning Design System、MailChimp の Design Patterns をはじめ、自社でデザインシステムを取り入れるためのインスピレーションは幾つか見つけることができますが、フロントエンド寄りになりがちです。早く Web サイトやアプリを実装するためのガイドラインなので当然ではあるものの、これだけではデザイナーがデザインシステムへの参加が難しくなる場合があります。多くの要因は「デザイン」と「コード」にある溝と大きく関わっています。 コードが分からないと参加が難しい
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.
Color in Design Systems
I’m no color expert. Far from, actually. Throughout my career, I’ve depended on visual designers better than myself to produce an engaging palette and apply it harmoniously across a UI. Yet, as a systems designer, I’m often in the position to provoke and validate color decisions as a system takes shape. Here’s a 16 lessons I’ve learned while stabilizing a primary palette, tint and shade choices, s
Francfrancのデザインシステムは、ブランドの価値を上げ、実務者の負担を軽減し、イノベーティブな取り組みを推奨する上での合意形成を的確にかつ迅速に行うためのものです。
GE’s Predix Design System
Our first design system at GE, created in 2012, was similar to many design systems you find on the Internet today. It was designed to appeal to and support a broad audience within GE and contained a large selection of common design patterns (a term I’ll be using to encompass both user interface components and interaction patterns) grouped by function. This was purposely done to drive adoption of d
Origami
Origami is a group of services, components, and tools used to help design & build digital products for FT brands. About Origami is a collaborative project by and for the FT which includes services, components, and tools used to help design & build digital products for FT brands. Origami Project Mission & Vision Statements Designers You can browse live demos and documentation for Origami components
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
We just created a design system for a huge organization and established a CSS architecture we’re quite pleased with. It’s one of the first times I’ve ever gotten to a project’s finish line without wishing I’d done at least a few things differently. So I thought it would be great to share how we went about creating our system’s CSS architecture. To give a bit of a context for the project, we were t
はじめにこのnoteで紹介するカラーシステム設計プロセスは、多くの人にとってはやりすぎで、役に立たない場合も多いです。 既存のカラーシステムやカラーシステムジェネレイターを利用するのが、最短かつ最適ルートだと思います。 デザインシステムやカラーシステムは「プロダクトのためのプロダクト」なので、とある事業における一つの解である、という前提で読んでください。 今もまだ多くの課題を抱えたものではありますが、イベントなど様々な場面でカラーパレットに興味を持っていただける機会が多かったため、自分が知らない誰かの知見に助けられたように、微力ながらコミュニティに貢献するべく、未完の状態で状態でお見せすることにしました。 Framework by Figma登壇資料 後でFigma Communityにも掲載します シチュエーションにおける最適解繰り返しますが、今回説明するような煩雑で、複雑で、面倒な、プ
Google, Apple, Audi ── デザインシステムのメニューを見比べれば、企業とデザインの関係がわかる | A.C.O. Journal | A.C.O. Inc.
Google, Apple, Audi ── デザインシステムのメニューを見比べれば、企業とデザインの関係がわかる なんのためにデザインシステムをつくるのか？メニューを見ればわかる こんにちは、デザイナーの石井です。最近、「デザインシステム」という言葉を耳にすることが多くなりました。デザインシステムとは、フォントやカラーなどのスタイルガイド、UIキット、ブランドガイドラインなどを組み合わせたものです。「目的達成のためのデザインの仕組み。また、そのデザインの考え方を構造化したもの」(※1)と定義してる人もいます。 デザインシステムは「UIデザインのクオリティを上げるため」「ブランディングの意思統一のため」「コーディングの効率化のため」……などなど、さまざまな目的のためにつくられます。とくに大人数のデザイナーやエンジニアが関わる大規模サイトやアプリにおいて、その重要性は多くの方が感じていると思
Proportio.app
Tool for creating proportional scales for typography, iconography, spacing, and components in design systems.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Atlaskit by Atlassian
https://vmware.github.io/clarity/
Design systems at GitHub
Incrementsのデザインシステム公開のお知らせ（前編） - Qiita Blog
Salesforceのデザインシステムはどのように作られているのか（後編）
Atlassianはどのようにしてデザインシステムを作り上げたか
デザインシステム “Vibes” の育てかた - freee Developers Hub
デザイナーと開発者の連携を効率化するデザイントークンとは何か？ | アドビUX道場 #UXDojo
Space in Design Systems – EightShapes LLC – Medium
GE’s Predix Design System - Roy S. Kim - Medium
Microsoft Fluent Design System
Brand Guidelines - Duolingo
Design System Guidelines - Francfranc Brand Identity
Vue Design System
CSS Architecture for Design Systems
IPの世界観に寄り添う、マルチブランドなカラーシステム設計論｜TORAJIRO