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.
デザインシステムが加速させるプロダクト開発 / Design System and Scalable Product Development
クリエータと創作支援研究者を中心に年一度集まる会「第8回名状しがたいお茶会」での発表資料です。 https://junkato.jp/ja/teaparty/ Wantedly で1年間取り組んできたデザインシステムについて紹介しました。
JerryはUXPinのコンテンツストラテジストです。過去に、Braftonでのクライアント向けのコンテンツ戦略、広告代理店のDBB San Franciscoでの経験があります。 Kaelig Deloumeau-Prigent氏は、SalesforceのLightning Design Systemチームのシニアデザイナーです。 フロントエンド開発とデザインにおいて長年の経験を持つKaelig氏から、デザインシステム構築のアドバイスについて教えてもらいました。デザインシステムのメリットやプロセスの詳細については、無料の電子書籍『Why Build a Design System?』をダウンロードしてください。 Salesforceのデザインシステムチームへの参加 ― どのようにしてSalesforceのデザインシステムチームに参加したのですか？ これには面白い経緯があります。私の妻はA
A web application has become an inevitable part of every business. With the huge rise in smartphone users, web apps have been providing great opportunities. But how to build a web application? This is a question many business people raise. Even though there are developers and web designing companies to do the job, it is good if you know some basics. Here are ten steps that will help you to create
Modern product development is hard. The number of individual roles and titles that go into building a successful digital product at scale is mind-boggling. On the flip side, while we have more distinct specialties than ever, these lines are blurring and most individuals will usually straddle at least a couple of these. Seen as a continuous spectrum of skills, it’s clear that to succeed in today’s
The organization of space is key to every great design. Spatial systems, grids, and layouts provide rules that give your designs a consistent rhythm, constrain decision making, and help teams stay aligned. This foundational scaffolding is a requirement for all design systems. In this guide, we’ll walk through the basics of defining spatial base units, creating relationship rules with grids, and br
Francfrancのデザインシステムは、ブランドの価値を上げ、実務者の負担を軽減し、イノベーティブな取り組みを推奨する上での合意形成を的確にかつ迅速に行うためのものです。
最近なにかと話題になっているデザインシステムについて、実際に取り組んだ際の学びを記していこうと思う。 始めに述べておくが、デザインシステムを構築することは想像以上に泥臭いことの積み重ねであった。 デザインシステムとはデザインシステムとは、その名の通り、デザインの仕組みである。 デザインシステムとして、代表的でよく取り上げられているAtlassian Design Guidelines。また、ガイドラインとして知名度の高いHuman Interface GuidelinesやMaterial Designも当てはまるだろう。 何が揃っていれば、デザインシステムと成り得るのか、未だ定義されていない。 むしろ、私は定義する必要はないと思っている。システムというのは概念に近く、そのときの組織やプロダクトの状況に合わせてつくりあげていくものだからである。 ただし、デザインシステムをつくる目的だけはハ
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.
CACON 11/2 14:00–17:30Airbnbデザインシステムを総括しているデザイナーハン・ユジンさんのコンファレンスに参加しました。 ハンさんは19年目UI・UXデザイナーで、ustwo、Google、Spotifyを経て現状Airbnbでデザインシステムを総括をしています。 コンファレンスは３つのセッションに構成されて行われました。 なぜ、デザインシステムであるべきか。Airbnbデザインシステムケーススタディー海外でデザイナーとして生きることQnA 1. なぜ、デザインシステムであるべきか。主に、プロダクトデザインは４つのプロセスで構成されます。 DiscoverデザインリサーチインタビューDefineデータ分析カルチャー理解やデザインアイデアコンセプト定義・レビューDevelopデザインFIXプロトタイピング・開発Deliverプロダクト共有ユーザー検証テスト・フィードバ
2018/04/20で発表したBonfire Design #3 の登壇資料です。
2022年現在、ユーザーインタフェースのデザインやその開発について語る上で「デザインシステム」はどのような組織においても話題に上がるトピックではないでしょうか。 かく言う私もデザインシステムに強い関心を持っており、業務にてデザインシステムの構築・維持に取り組んでいる他、過去には私が魅力的だと思うデザインシステムを紹介するブログ記事を執筆しました。 0. デザインシステムの導入における障壁昨今はデザインシステムを構築した事例や構築の方法論の共有も盛んとなっており、その強い話題性が起因して新たなデザインシステムが続々と誕生しています。話題になっているから・便利だから・品質を上げてくれるから・ユーザー体験が向上するからなど、導入の理由は組織・プロダクトに応じて多岐に渡ると思います。 上記の理由に加え、デザインシステムを構築する前に立ち止まって考えたいポイントが「投資対効果」です。 プロダクトに応
Lexington Themes Free and premium multipage themes & UI Kits For freelancers, developers, businesses, and personal use. Beautifully crafted with Astro.js, and Tailwind CSS — Simple & easy to customise.
search#resize" data-search-filters-value="" data-search-show-recommendations-value="true" data-search-recommendations-heading-value="Popular Searches" data-search-show-inline-recommendations-value="false" data-search-index-name-value="prod_extensions" data-search-show-headings-value="false" data-search-limit-results-value="5" data-search-dropdown-position-value="absolute" data-search-keep-results-
GitHub - getflourish/Sketch-Style-Inventory: Review, import & export styles in Sketch.
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
Inhouse - Pepabo Design
About Inhouseとは、GMOペパボ株式会社の共通基盤デザインシステムです。コンセプトや仕組み、プリンシプルを紹介します。 Flavors Color、Sizing、Icon、Typography、Elevationなどのブランドごとに置き換え可能なデザイントークンをFlavorと呼んでいます。
Front End FrameworkSome aspects to consider: When we work with a big team of designers at the same time in the same project it is difficult to be aligned, and even more so when the project is an ecosystem of applications that must follow an aesthetic line and comply with certain guidelines that specify behaviors and interactions. Feel free to download the sketch file https://dribbble.com/shots/288
Animation illustrating how changes to Diez source code trigger visual updates to web, iOS, and Android apps. The Design Token Framework Diez radically reduces the cost of delivering a consistent visual identity across your company’s apps & websites. Get Started What is Diez? Diez is a free & open-source developer toolkit for expressing visual styles that can be shared across codebases, native plat
by Colm Tuite How to construct a design systemTips for designing and building a consistent design system.Without doubt, I get asked about design systems more than anything else. So, having spent the majority of the past few years thinking about how to design, build and present design systems for products like Marvel, Bantam and Modulz, I figured I’d share some of what I’ve learned along the way. W
Read it now on the O’Reilly learning platform with a 10-day free trial. O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers. Imagine what a large-scale web project would look like if frontend development were not treated as an add-on, but as an equal partner with backend development and content strategy. Thi
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.
http://www.yasuhisa.com/could/article/design-system-language/ Webサイトは公開してから本番という言葉を耳にします。これは、コンテンツ運用だけの話だけではなく、デザインにも同様のことが言えます。制作者が関わる運用にはコンテンツとデザインの 2 種類あり、どちらかが欠けていると Web サイトがうまく前へ進まないことになります。運用しやすくするために CMS を実装したり、拡張性が高いHTML/CSS を設計するように、ビジュアルデザインにも個に頼り切らないシステムが必要です。 本セッションではデザインシステムとは何か。なぜ必要なのか。どのように作っていくのかを解説します。自社サービスを運用している企業はもちろん、納品で一旦仕事が終わるプロジェクトでもデザインシステムは強い味方になります。公開後 Web サイトやアプリの見た目が崩
freee Developers Advent Calendar 2019 の17日目です。 デザインシステムチームの @toofu__ です。夜はニートゥーチェストをしており、1988年生まれ4268人中3位です（12月16日現在）。腹筋が喜んでいます。 freee のデザインシステムの現状 freee にはデザインシステムチームが存在し、下記の運用を行っています。 UIコンポーネントライブラリ Vibes デザインガイドライン Groove アクセシビリティガイドライン Groove と Vibes が生まれた経緯とかについてはチームメンバーの @ymrl が1日目に色々書いてくれているので、よろしければご覧ください。 developers.freee.co.jp この記事では、Groove と Vibes に関するもうちょっと細かいブツの雑多な話を書きます。 Vibes の詳細 Vi
How we built our multi-platform design system at Booking.com
Building a design system that works is a challenge at any scale. Building a design system for 150+ product teams, used by 200+ designers and 800+ developers, and serving 4 different platforms? That’s a challenge requiring lots of special considerations. When building a design system for such a large scale, many questions come to mind: How can we make it strong and scalable to multiple themes and b
UXの5段階モデル分解編 vol.1 サービス/プロダクトの原点となる戦略段階での具体的なデザイン手法【2019年版】｜Goodpatch Blog グッドパッチブログ
UXの5段階（5階層）モデルはサービスやプロダクトがもたらすUXを5つの段階的要素で表したものです。戦略段階から一貫性を持ったサービス/プロダクトの開発を行うためには、このUXの5段階モデルの概念を意識しながら開発することが重要です。 このUXの5段階モデルの全ての段階の土台となるのが戦略段階です。UXの5段階モデルの概念や各段階で行う一連のデザイン手法は理解できているが、戦略段階の目的やデザイン手法をより詳しく知りたいという方もいらっしゃると思います。 そこで、今回はUXの5段階モデルの戦略段階における目的と必要なインプットとアウトプットの説明、そのための具体的なデザイン手法の紹介を行いたいと思います。 各段階の詳細は、こちらをご覧ください。 ◼︎UXの5段階モデル分解編 vol.2 サービス/プロダクトの開発指針を定める要件段階での具体的なデザイン手法 ◼︎UXの5段階モデル分解編 v
An open-source checklist to help you plan, build and grow your design system.
はじめに 新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay14です！ 昨日は「WebARの本質的な価値について考えてみる」のお話でした。 WebARの本質的価値を考えてみる 本記事ではAdobeのデザインシステム、spectrumから学べるデザインの基礎についてご紹介します。 今年の10月後半にAdobeのデザインシステム、Spectrumの公式サイトが発表され、話題を呼びました。 spectrumに関する記事はAdobeのブログでも発表されていますが、細かい内容を日本語で解説している記事がないため、今回は私が読んで使えると思った部分を抜粋しご紹介いたします。 注意点としては、今回の記事はあくまで私の解釈で書かせていただいております。 元のspectrumの内容を忠実に再現というよりかは、自分が読んで解釈した結果、こういうところで実践的に使えそうだと思った、というところ
InVisionがBrand.aiを買収、デザイン管理ツール「InVision Design System Manager」を発表。
InVisionがBrand.aiを買収、デザイン管理ツール「InVision Design System Manager」を発表。 寝ようとしていたらまたInVision先輩が…。今度はなんですか？え？買収？また買収したの？ InVisionがBrand.aiというデザイン管理ツールを買収したことを発表しました。 さらに、Brand.aiを元にInVision Design System Manger（DSM）を開発中であることを発表。今年の12月にリリース予定とのことです！
Heavyweight teams up with startups to rethink and design interfaces that drive value. We fuse expertise in CX, UX, and UI design to create seamless experiences across apps, devices, and (physical) touchpoints. Making complex applications seem simple is what we do best. On Medium, we write about our experiences designing great products for start-ups. Learn how you can grow your product. Component B
# ThinkAtomicDesign でお話した資料です。 https://thinkatomicdesign.connpass.com/event/115574/
Icons are a crucial part of any design system or product experience. Icons help us quickly navigate. They are language-independent. And best of all: they're real tiny, so they don't take up very much real estate. Icons are a fundamental part of a good design system and are very helpful for marketing materials. They’re the foundational building block of illustrated content, but they are also highly
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
The 2019 Design Systems Survey by Sparkbox
The 2019 Design Systems Survey is intended to illuminate how design systems are created, used, and maintained. Design systems have the ability to solve real-life problems by establishing consistency in design and code, promoting efficiency when creating products, communicating usage guidance, encouraging reuse instead of rework, increasing the accessibility and usability of digital properties, and
This describes what “AbemaTV”, the Internet TV service in Japan, has been practicing and building as a design system at each phase of its development history.Read less
2024年のfreee技術の日の登壇で使用したスライドです。 配信動画は以下です。 https://www.youtube.com/live/Vih4vuNxPT4?si=43vKDWrZOFF_0rau&t=2072 合わせて「マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム」もぜひご覧ください。 https://speakerdeck.com/fkady/marutipurodakutonojia-zhi-tokai-fa-wosukerusaseru-patanreberunodezainsisutemu
2018年6月6日、DMM.comが主催するイベント「DMM meetup」が開催されました。今回のテーマは「ReactとAtomicDesignからみるコンポーネント開発」。フロントエンド開発において重要性が増しつつあるコンポーネント開発手法について、「React」と「Atomic Design」の2つをキーワードに、各分野のプロフェッショナルたちが自身の知見を語ります。プレゼンテーション「Alternative Atomic Designをさがして」では、よりデザインの吉竹遼氏が登場。 Atomic Designをどう使うか 吉竹遼氏（以下、吉竹）：では、LT2人目の吉竹です。よろしくお願いいたします。 今日来てる方で、エンジニアの方はどれくらいいらっしゃいますか？ （会場挙手） やっぱりさすが、多いですね。デザイナーは……？ （会場挙手） ディレクターさんは？ （会場挙手） ちょっと
Design is more important than ever, and design systems have become a huge piece of what makes a company or product successful, especially in the hyper-competitive global software market. These companies have historically relied only on user experience as a key differentiator. This demand for better experiences puts immense pressure on designers across the globe. They are compelled to take up more
私のキャリアのはじめはWebデザイナーだった。Webデザイナーと言っても簡単なHTML/CSSコーディングもするデザイナーだった。というわけで、自分が作ったUIカンプを自分でコーディングするのだが、どうしてもデザインしているときに後々のコーディング工程を意識してしまうので、できるかぎり角丸は避けたり（当時はCSSのborder-radiusなどなかった）していた。でも世の中的にはWeb 2.0の丸っこいアクアボタンが流行ってたときだ。こうゆうのはよくないなと思いつつも、納期との兼ね合いだったり、いろいろ妥協せざるを得なかった。 時が経ちフロントエンドエンジニアになった私は、ここで初めてUIデザイナーと分業に入るわけだが、デザイナーからあがってくる無限に増殖するボタンであったり、無限に増殖するカラバリに苦悩する。当時はコーディング都合でUIのクリエイティビティも阻害してはいけないと思っていた
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Salesforceのデザインシステムはどのように作られているのか（前編）
Predix UI – Learn From Scratch
DesignOps at Airbnb – Airbnb Design
Spacing, grids, and layouts
Design System Guidelines - Francfranc Brand Identity
みんなに使ってもらえるデザインシステムづくり｜Tajima Kaho
Airbnb Design System – heru – Medium
2018-bonfire-design-komerco-design-system
そのデザインシステムは投資対効果をもたらしますか？｜Kento Norita
Colors & fonts - Home
Customize Sketch with plugins & software extensions
How to create a FRONT END FRAMEWORK with Sketch/Figma
Diez — The Design Token Framework
How to construct a design system
Frontend Architecture for Design Systems
Home – GOV.UK Design System
作って終わりから卒業しよう - デザインシステム入門編
デザインシステム運用の雑多な細かいはなし - freee Developers Hub
Design System Checklist
Adobeのデザインシステム、spectrumから学べるデザインの基礎 - bagelee（ベーグリー）
How we’re using Component Based Design
デザインとエンジニアリングをつなぐコンポーネントの運用設計
A complete guide to iconography
フェーズに応じて育てるデザインシステム
デザインプリンシプルのつくりかた（freee技術の日）
Atomic Designから派生した、“オルタネイティヴ”な5つのデザインシステム
Design Systems: Step-by-Step Guide to Creating Your Own
Design Systems - MOL