Eva Design System: Deep learning color generator
Generate color pallets using deep learning powered algorithm
Generate color pallets using deep learning powered algorithm
こんにちは、クックパッド株式会社 デザイン戦略部のふじけん(@kenshir0f)です。 デザイン戦略部に異動してからは全社横断のデザイン品質の向上の仕組みづくりを担当していますが、今回はレシピサービス「クックパッド」のデザインシステムの整備で取り組んでいることを紹介したいと思います。 大規模サービスにおけるデザインガイドラインの世代交代クックパッドでは約10年前にクックパッドらしいUIを簡単に実現することができる Sara という CSS ベースのUIフレームワークが生まれました。 Sara は Web のデザインと実装がパッケージ化されているため少ない実装で機能提供が可能となり、その分開発者はユーザーと向き合ったサービス開発にフォーカスすることができます。 CSS Framework の Sara モバイルアプリ(iOS, Android)でも同様に Sara のデザインを取り入れて開
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
Eva Design System
Eva Design AssetsDesign Assets easily adaptable to your brand. Available for Sketch and Figma component libraries, based on Eva Design System.
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.
最近のHTMLメールで見かけるさまざまなレイアウトやコンポーネントが揃ったデザイン素材 -Email Design System
デスクトップ・スマホ対応のHTMLメールをデザインするのに役立つレイアウト、コンポーネント、シンボル、テンプレートが揃ったSketchのデザイン素材を紹介します。 HTMLメールのさまざまなデザインが収録されており、制作にも勉強にも役立つ素材です。
しばたです。 前の記事でNext.jsを試す環境を作ったので本記事ではCloudscapeを実際に試してみます。 Cloudscape Design Systemとは？ Cloudscape Design SystemはAWSが作成しオープンソースで公開しているWEBデザインシステムです。 もともとAWSが内部向けに作成し改善していたものが今年の7月に一般公開されました。 雑に言ってしまえば「マネジメントコンソール風のUIをつくれるやつ」なんですが、デザインシステムの名の通りUIコンポーネント以外にデザインパターンやデモも公開されています。 注意事項 本記事ではこちらの手順に従い最初の一歩を試してみようと思っていました。 Using Cloudscape components ただ、手順をよく読んでみると最後の最後に、 Bundling with Next.js (optional) Th
新アイコンは、馴染みのあるアイコンを同社の「Fluent Design System」に基づいてデザインし直し、「ビジネスのアジャイルな未来を表現した」としている。 現在のアイコンになったのは2017年のIgniteからだ。それ以前は雲を模したものだった（米Neowinより）。 Microsoftは検索サービス「Bing」のロゴも昨年10月に名称を「Microsoft Bing」とした際、Fluent Designのものに変更している。 関連記事 Windows 10の「エクスプローラー」、「ごみ箱」などが正面を向くデザイン変更（Build 21343で） Microsoftは「Windows 10」のプレビュー版プログラム「Insider Preview」でリリースした「Build 21343」で、「エクスプローラー」の新しいアイコンを披露した。ごみ箱やデバイスが正面を向き、「ドキュメン
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
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
デザインシステムについての知見が溜まってきたので、The 12 Factor App のパロディで The 12 Factor Design System というものを考えてみました。 元ネタのThe 12 Factor AppはモダンなWebアプリケーションとしてあるべき姿を12のベストプラクティスにまとめた方法論です。 それを真似て、自身の経験からデザインシステムとしてあるべき姿を12個にまとめてみました。 無理やりなところやコンテキストによるところがあると思いますが、半分ネタ半分本気で作りました。 文章の構成などもあえて真似て書いています。 何かの参考になればと思います。 はじめに デザインシステムは次のようなWebサービスやアプリを作り上げるための方法論です。 宣言的なフォーマットを使い、プロジェクトに新しく加わったメンバーが要する時間とコストを最小化する。 UIパーツの依存関係を
小さく始める 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 開発の領域では、これまでスタイルガイドを作ることでデザイナ
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
ユーザーにとって取り返しのつかない操作を提供する際の基準を定義しています。
Microsft、新デザイン言語「Microsoft Fluent Design System」を発表 | スラド デベロッパー
MicrosoftがFluent Designを発表した(TechCrunch Japanの記事)。 クロスプラットフォームで2D及び3D環境にも適合したUIのデザインポリシーらしい。Fluentを直訳すれば流暢だろうし、説明にあるeloquentは雄弁である、ちょっと影ついてる、くらいしか分からん。誰かエラい人にご教示頂ければ幸いである。GoogleのMaterial Design、AppleのHuman Interface Guidelinesに匹敵するものらしいが。 Microsoft Fluent Design SystemはこれまでProject Neonと呼ばれていたもので、Windows 10の次期大型アップデート(コードネーム: Redstone 3)に導入されるMetro後継のデザイン言語だ。半透明のすりガラスのような効果が用いられることで、Aero Glass復活とも報
以下はJeff Crossmanさんの同名の記事を翻訳（一部縮約）したものです。 GEのデザインシステムは2012年にGE社内の多数の利用者と多様なデザインパターン（UIコンポーネントとインタラクションパターン）を支援するために作成された。これは世界に散在している40,000人のソフトウェアエンジニアが一貫性のあるソフトウェアを作れることを目標に１０人のデザイナーで構成されたチームによって作られたものだった。dave croninの発表を見るとこのチームが直面した課題に関して知ることができる。 最初のデザインシステムは内部的には成功だったがそれには成長痛もあった。ボタンやテキストボックスなど、一般的なケースでは問題なかったけど、マッピングやデータヴィジュアライズなど、より複雑なニーズにも対応する必要があった。アプリケーション単位の修正や拡張の要求はデザインシステム本来の目的に反しており、非
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.
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
GitHub - sakofchit/system.css: A design system for building retro Apple interfaces
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
GitHub - digital-go-jp/design-system-example-components: デジタル庁デザインシステムのサンプルコンポーネント
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
マイクロソフトの開発者向けカンファレンス「Build 2017」では、新しいデザインシステム*「Fluent Design System」*が発表されました。 このデザインシステムは以前「Project Neon」というコードネームで呼ばれていましたが、今年の秋以降に登場する「Windows 10 Fall Creators Update」に搭載されると言われています。 かつては「Metro」と呼ばれるデザインを採用したMicrosoftですが、実際にこのデザインシステムはそれほど人気がありませんでした。 フラットデザインにも似た「Metro」スタイルに対して、Googleは個性的な*「Material Design」(マテリアルデザイン)*の普及に努め、今ではマテリアルデザインシステムは多くのデザインで活用されています。 しかしながら、Microsoftは今回、*「Fluent」*をデザ
Figma Community file - デジタル庁サービスデザインユニットでは、一貫したデザインや操作性でウェブサイトやアプリを提供するための仕組み「デザインシステム」の構築に取り組んでいます。どなたでも構築中のデザインシステムのデザインデータを閲覧することができます。 デザインシステム構築の目的の詳細はデジタル庁ウェブサイトをご覧ください。 更新履歴 2023.5.31 入力フォーム構築時の指針となるテンプレートを追加しましたカラー、タイポグラフィ、テキスト入力などを更新しました 2022.12.28 リンクテキスト、テキストエリアのガイドを更新しました 2022.11.14 軽微な修正を行いましたアイコンを一部修正...
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
Welcome to the W3C design system - W3C Design System
This design system documents the styles, components and templates available to use on your website. Find out how to get started. How the front end assets (CSS and JavaScript) are organised and compiled is discussed below. ¶CSS The design system uses Sass - specifically the SCSS syntax) - which is compiled into CSS files. The CSS approach is heavily influenced by Andy Bell's CUBE CSS. This has some
Microsoft、新デザイン言語｢Fluent Design System｣を発表。Vistaのような水々しいデザインでアプリ開発できるぞ
Microsoft、新デザイン言語｢Fluent Design System｣を発表。Vistaのような水々しいデザインでアプリ開発できるぞ2017.05.15 18:177,439 塚本直樹 半透明デザイン復活か…？ Microsoft（マイクロソフト）は開発者向け会議のBuild 2017にて、新デザイン言語｢Fluent Design System｣を発表しました。以前には｢Project Neon｣として知られていた本デザイン言語は、今年後半に登場する｢Windows 10 Fall Creators Update｣に組み込まれる予定です。 こちらはWindowsが公開した、Fluent Design Systemのプロモーション映像。 そしてこちらは、Build 2017 2日目のキーノートの映像です。Fluent Design Systemの紹介は24分36秒ごろから。 Mic
Plushie:An Interactive Design System for Plush Toys
手書きスケッチを利用したモデリング操作によって， ぬいぐるみの形状を対話的にデザインしていくシステムを提案する． ユーザからの入力ストロークと物理的制約を元に 常にぬいぐるみになるような3次元モデルをモデリングしていく． 対応する型紙はユーザがモデリングするたびにインタラクティブに更新される． このようにオリジナルなぬいぐるみ作成に必要な 型紙生成の工程をコンピュータで支援することによって， 素人にも手軽にオリジナルなぬいぐるみをデザインすることが可能となる． 実際にぬいぐるみ作成やバルーンに適用した例を紹介する． 本システムはシミュレーションとモデリングを同時に行うことにより， 物理的に実現可能である3次元モデルを作成することができる． 現実的な制約をデザインプロセスに組み込むことで効率よくモデリングすることが可能になる． Demonstrations movi
Francfrancのデザインシステムの目的は、ブランドの価値を上げ、実務者の負担を軽減し、イノベーティブな取り組みを推奨する上での合意形成を的確かつ迅速に行えるようになることです。2017年9月にその第1版を公開しました。 その大きな特徴は、情報発信における機能的な価値とブランドイメージの訴求という異なる目的に対して、誰もが認識できる基準を提示したことで、実務者の確認業務の軽減を促進し、スピーディーにクオリティの均一化を実現します。 Francfrancのデザインシステムは、変化する市場や時代の流れに沿って、柔軟性を持ちながら拡張し進化を遂げるものです。そして、ブランドの発祥や企業理念を広く振興するときに必ず参照されるものでなければなりません。 実務者および関係者はガイドラインを尊重し、的確な判断を下し、ブランドにふさわしい、そして創造性に富んだデザインを提供するように心がけてください。
デザインシステムが加速させるプロダクト開発 / Design System and Scalable Product Development
クリエータと創作支援研究者を中心に年一度集まる会「第8回名状しがたいお茶会」での発表資料です。 https://junkato.jp/ja/teaparty/ Wantedly で1年間取り組んできたデザインシステムについて紹介しました。
Francfrancのデザインシステムは、ブランドの価値を上げ、実務者の負担を軽減し、イノベーティブな取り組みを推奨する上での合意形成を的確にかつ迅速に行うためのものです。
UI Kitten - React Native UI Library based on Eva Design System
If you use UI Kitten for business, we'd like to offer you: A custom template development; Developers, designers, analytics, QAs, PMs & marketing specialists to join your team; UI Kitten customization services; The review of your project. UI Kitten is a React Native implementation of the Eva Design System. The framework contains a set of general-purpose UI components styled in a similar way. The mo
GitHub - geist-org/geist-ui: A design system for building modern websites and 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
CACON 11/2 14:00–17:30Airbnbデザインシステムを総括しているデザイナーハン・ユジンさんのコンファレンスに参加しました。 ハンさんは19年目UI・UXデザイナーで、ustwo、Google、Spotifyを経て現状Airbnbでデザインシステムを総括をしています。 コンファレンスは３つのセッションに構成されて行われました。 なぜ、デザインシステムであるべきか。Airbnbデザインシステムケーススタディー海外でデザイナーとして生きることQnA 1. なぜ、デザインシステムであるべきか。主に、プロダクトデザインは４つのプロセスで構成されます。 DiscoverデザインリサーチインタビューDefineデータ分析カルチャー理解やデザインアイデアコンセプト定義・レビューDevelopデザインFIXプロトタイピング・開発Deliverプロダクト共有ユーザー検証テスト・フィードバ
Tailwind Starter Kit by Creative Tim | Free & Open Source Design System
A beautiful extension for TailwindCSS.Tailwind Starter Kit is Free and Open Source. It does not change or add any CSS to the already one from TailwindCSS. It features multiple HTML elements and it comes with dynamic components for ReactJS, Vue and Angular. Great for your awesome projectPutting together a page has never been easier than matching together pre-made components. From landing pages pres
2018/04/20で発表したBonfire Design #3 の登壇資料です。
Premium Pixels is an ever-expanding design system and UI kit for Figma. Save 1000s of design hours, earn more money, and be a better designer.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
クックパッドのデザイン品質を支える Apron Design System の構築｜ふじけん / kenshir0f
Next.jsでCloudscape Design Systemを試してみた | DevelopersIO
「Notepad++」が約5年ぶりのメジャーアップデート ～ARM64ビルドとダークモードを追加／OSで採用が進む「Fluent Design System」に合わせた新しいツールバーアイコンも同梱
Microsoft、「Azure」の新アイコン発表 「Fluent Design System」準拠
primer/primer: The design system that powers GitHub
The 12 Factor Design System - UGAP Engineer's Blog
Windows版「Word」、「Excel」、「PowerPoint」のアクセス権管理機能が改良へ／Fluent Design Systemに準拠、わかりやすく、使いやすく
GitHub - kufu/smarthr-design-system
取り返しのつかない操作 | デザインパターン（共通） | SmartHR Design System
GE’s Predix Design System - Roy S. Kim - Medium
Microsoft Fluent Design System
Design System Guidelines - Francfranc Brand Identity
フラット、マテリアルの次？Microsoftが提唱する「Fluent Design System」とは？
Design System 1.2.2 | Figma Community
Vue Design System
Microsoft、新しい「メモ帳」と「メディアプレイヤー」の一般提供を開始／Windows 11の「Fluent Design System」に準拠したデザインへ。機能も充実
Design System - Francfranc Brand Identity
Design System Guidelines - Francfranc Brand Identity
Airbnb Design System – heru – Medium
2018-bonfire-design-komerco-design-system
Premium Pixels: Figma Design System & UI Kit