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
まずOffice 365のWordで一部ユーザーが利用できるようになる。全ユーザーに提供する前にフィードバックを集めるとしている。 新しい色調とアイコン 色やアイコンがFluent Designによる洗練されたものになる。その一環で、共同編集でのコメントが色別になり、誰のコメントだかが分かりやすくなる。 新しいデザインはまずオンライン版Wordに適用され、7月にはWindows版のOutlookに、8月にはMac版Outlookに登場する見込み。 AI採用の高度な検索機能 各アプリに「ゼロクエリ検索」機能を追加する。これは、検索枠に何も入れずにカーソルを置いただけで、そのときに表示されている内容をAI（人工知能）が解析し、関連性の高いクエリ候補を表示するというものだ。企業向けOffice.com、SharePoint Online、Outlookのモバイルアプリでは既にこの機能が使えるよう
Availability is in some sense a much wider concept than uptime, since the availability of a service can also be affected by, say, a network outage or the company owning the service going out of business (which would be a factor which is not really relevant to fault tolerance but would still influence the availability of the system). But without knowing every single specific aspect of the system, t
Consider the fox. It’s known for being quick, clever, and untamed — attributes easily applied to its mythical cousin, the “Firefox” of browser fame. Well, Firefox has another trait not found in earthly foxes: stretchiness. (Just look how it circumnavigates the globe.) That fabled flexibility now enables Firefox to adapt once again to a changing environment. The “Firefox” you’ve always known as a b
Type safe CSS design systems with @propertySeptember 1, 20238 min read CSS types are a worthy investment into type safety in your front-end work. We're still awaiting cross browser interop, but we'll get there 🙂 In case you've never seen one, here's a typed CSS variable with @property: @property --focal-size { syntax: '<length-percentage>'; initial-value: 100%; inherits: false; } Used that one so
A Virtual CSS language with enhanced syntax.Efficiently build your UI and design system with HTML only. <button class="btn ">
金森 由博 博士(情報理工学), 准教授 筑波大学 理工情報生命学術院 システム情報工学研究群 (旧: システム情報工学研究科) 情報理工学位プログラム (旧: コンピュータサイエンス専攻) (情報メディア創成学類) Google Scholar ※研究室の情報については「計算幾何学とグラフィックス研究室 (CGG)」(旧: 非数値アルゴリズム研究室) をご覧ください。 筑波大の住所: 〒305-8573 茨城県つくば市天王台 1-1-1 [map] [バス情報] 居室: 第三エリア F 棟 828 号室 (Phone/Fax: 029-853-5724) 研究室 1: 総合研究棟 B 棟 1125 号室 (Phone/Fax: 029-853-5600, 内線 8473) 研究室 2: 総合研究棟 B 棟 925 号室 (Phone/Fax: 029-853-5388) E-mail:
Material design in the 2014 Google I/O app
By Roman Nurik, lead designer for the Google I/O Android App Every year for Google I/O, we publish an Android app for the conference that serves two purposes. First, it serves as a companion for conference attendees and those tuning in from home, with a personalized schedule, a browsing interface for talks, and more. Second, and arguably more importantly, it serves as a reference demo for Android
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パーツの依存関係を
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.
GitHub - plasmicapp/plasmic: Visual builder for React. Build apps, websites, and content. Integrate with your codebase.
Plasmic combines some seemingly disparate genres: Webflow, Wordpress and other site builders Retool and other tool builders Glide and no-code app builders Contentful and other CMSes Today these are different tools to specialize in, but the line between, say, a website and an application is blurry (consider an ecommerce storefront with user logins). With the right foundations, we think these can be
こんにちは。Incrementsのデザイナーの綿貫です。 今回はIncrementsで運用しているデザインシステムの公開をお知らせします。 この記事は前編後編に分かれており、前編の内容は以下の通りです。 公開データについてデザインシステム公開の背景Incrementsのデザインシステムの構造トピック：Figmaの使用について公開データについて前編で公開するデータは以下の2つです。 詳細は後ほど説明しますが、プロダクトに関係なくIncrementsを横断して使用しているデータです。 デザインシステム公開の背景現在Incrementsではデザインにも力を入れています。 目に見える機能変更から社内の体制の改善まで、2020年から領域を問わず様々な再設計を実施してきました。 その一環で小規模なデザインシステムも作成しました。 作って終わりではなく、アップデートを重ねるうちに段々と軌道に乗っています
ep.30 「デザインシステムにおけるフロントエンド」公開AMA in DEV DAY Venue | UIT INSIDE
LINE DEVELOPER DAY 2019 スピーカーである okazou に、@potato4d, @kotarok, @myakura の三人で登壇内容についての質問・座談会を実施しました。 Guest @myakura @kotarok LINE DEVELOPER DAY 2019 Day 2 での @okazou の発表 https://linedevday.linecorp.com/jp/2019/sessions/A2-3 https://speakerdeck.com/line_devday2019/front-end-in-design-system LINE のデザインシステム LINE DEVELOPER DAY 2019 Day 2 でのもう一つの発表 https://linedevday.linecorp.com/jp/2019/sessions/A2-2 h
Windows 10の次期大型アップデート「Fall Creators Update」発表、作業記憶機能「Timeline」＆iOS・Androidとの連携強化など新機能まとめ
Microsoftがシアトルで開催中の開発者会議「Build 2017」で、Windows 10の次期大型アップデート「Fall Creators Update」(コードネーム：Redstone 3)を発表しました。過去の作業を再開できる「Timeline」やiOS・Android端末ともシームレスな同期が可能なMicrosoft Graphの改良など、新機能が盛りだくさんの内容になっています。 Coming soon starting with the Windows 10 Fall Creators Update https://www.microsoft.com/en-us/windows/upcoming-features Windows 10 Fall Creators Updateの新機能については、以下のダイジェストムービーで紹介されています。 Windows 10 Fall
Why we decided to rewrite our iOS & Android apps from scratch — in React Native
Our project name for the RN app rewrite, DenaliBackgroundHi, I am Naoya, a Senior Engineering Manager at Mercari. Along with my small but mighty team of frontend developers, I am responsible for delivering the Mercari app experience to our customers. Today, I’m here to explain why we’ve made the ambitious decision to completely rewrite our apps using React Native. Growth drives changeCurrently, we
はじめに メルカリでやったこと 1. GroundUp App プロジェクトへの参加 2. 登壇発表 3. 社内ハッカソンでの優勝 Cloudbaseへ 転職を決めるまで 入社後の感想 終わりに はじめに こんにちは。 @0meo です。 2022年12月でメルカリを退職し、2023年1月よりCloudbase株式会社に転職しました。 この記事はメルカリの退職・Cloudbaseの入社エントリになります。 メルカリでやったこと メルカリに入社するまでのお話はこちら。 meokz.hatenablog.com 1. GroundUp App プロジェクトへの参加 メルカリでの主な仕事は、メルカリアプリの0からフルスクラッチプロジェクトへの参加でした。 mercan.mercari.com 2年半に渡る大規模なプロジェクトのうちお手伝いさせて頂いたのは後半の半年ほどです。MAU2000万人規模
こんにちは。株式会社JMDCでヘルスケアプラットフォームサービス【Pep Up】 のフロントエンドエンジニアをしている新保です。 今年、JMDCではアドベントカレンダーに参加しています。 qiita.com 本記事は、JMDC Advent Calendar 2023 21日目の記事です。 現在、デザインシステムの導入に向けて動いている【Pep Up】。そのフロントエンジニアが他社のデザインシステムを隅々までリサーチし、「使いやすいデザインシステム」のポイントがどこにあるのか探り出そう！という企画です。 今回は全4回のラスト！最後は、スペーシングについて深掘りしていきます。 1～3回目の記事はこちらからご覧ください↓ techblog.jmdc.co.jp techblog.jmdc.co.jp techblog.jmdc.co.jp techblog.jmdc.co.jp 概要 あなた
小さく始める 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
ユーザーにとって取り返しのつかない操作を提供する際の基準を定義しています。 基本的な考え方一度実行するとやり直しや巻き戻しが効かない操作のことを「取り返しのつかない操作」としています。 サービス内でのデータ損失の原因の多くは人的ミスによるものです。 ユーザーの誤操作によって「取り返しのつかない操作」が実行されないよう、提供時に十分に配慮しましょう。 代表的な取り返しのつかない操作取り返しのつかない操作の代表的なものとして以下のような操作があります。 登録されたデータを削除する操作設定をリセットする操作復元方法がない、または復元に複雑な手順を要するステータスの変更操作取り返しのつかない操作ボタンの提供方法取り返しのつかない操作をボタンなどのコンポーネントで提供する際は、ユーザーの誤操作を防ぐために可能な限りメイン操作領域の遠くに置く（1）、または領域を変更して置くこと（2）を推奨します。 上
Yelp Design — Cookbook
Cookbook is Yelp's design system for digital experiences, and follows Brad Frost's Atomic Design methodology. Our system carries through with the food analogy by using ingredients for our styles, recipes for our components, and entrees for complex components.
Design Lint | Figma
Find and fix errors in your designs. Design Lint is a plugin that finds missing styles within your designs. It's perfect for fixing errors in your Design System or designs before handoff. Because Design Lint doesn't try and manage your library, there's no logging in or signing up for accounts. ...
2017年のBuildカンファレンスにおいて、マイクロソフトはフルーエントデザインシステムを発表しました。ネオンというコードネームで開発されていたこのデザインは、現行のWindows 10のデザインに半透明とアニメーションを加えるものです。一体どんなものなのか、ご紹介しましょう。 フルーエントは未来のデザインシステムとなるか マイクロソフトは、フルーエントをデザインランゲージではなく、デザインシステムと呼んでいます。これは見た目だけではなく、ユーザーとの双方向性を重視しているためです。 フルーエントは従来の画面と入力方法のみならず、これから登場する新しいインターフェースのことも想定しています。パソコン、スマートフォン、タブレットはもちろん、VR（仮想現実）やAR（拡張現実）、ウェアラブルなど多彩なフォームファクターに対応します。またタッチが前提となっていた以前のデザインとは異なり、モーショ
Mr. CreativeEdge - Learn Adobe XD | Adobe XD プロトタイピング実践ガイド〜ユーザーの要求に応えるUI/UXデザイン
Adobe XDは2018年12月のアップデートでCreative Syncテクノロジーベースの新しいネイティブファイルタイプ（クラウドドキュメント）を導入しました。この仕様変更によって「クラウド保存」がデフォルトとなり、従来のCreative Cloud Filesよりも速く、そして堅牢な共有システムに変わりました。 今後のアップデートで、バージョン管理や共有者との共同編集を可能にするライブコラボレーション機能などが搭載されていく予定で、大規模なデザインシステムを構築できるデザインプラットフォームに進化していくことになります。 Adobeは「Spectrum」と呼ばれる大規模デザインシステムを構築しており、Adobe製品・サービスを対象に取り組んでいます。Spectrumは、Adobe Design Brandチームによって管理され、6つのプラットフォーム（UWP、macOS、iOS、A
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
ABEMA iOS アプリがアクセシビリティ改善をリリースするまで | CyberAgent Developers Blog
こんにちは、メディア事業本部の @masuP9（ますぴー）こと桝田です。最近はメディア事業本部のサービス、特にABEMAとAmebaのアクセシビリティ向上に取り組んでいます。この記事では、ABEMAのiOSアプリにおいてアクセシビリティ改善をリリースしましたので、それに至る取り組みをお伝えします。 目次 個人から組織へ – ABEMA Accessibility Taskforceの立ち上げ 実際のABEMA iOS アプリの改善と技術的解説 改善したUIの検証 – ユーザーによる検証 品質の再現性を高める – conte 実装要件への追加 これから 個人から組織へ – ABEMA Accessibility Taskforceの立ち上げ ABEMAでは「個人の能力の限界がデザインの限界になっている」という課題を解決するために、デザインされてないものをデザインする仕組みとしてデザインシステ
はてなブックマークのブックマーク数が多い順に記事を紹介する「はてなブックマーク数ランキング」。2022年11月のトップ50です*1。 順位 タイトル 1位 お取り寄せ可能な「おいしすぎてたまげるもの」を教えてください - Togetter 2位 私が教わった「相手の話をうまく整理する技術」とは。 | Books&Apps 3位 大西哲也 on Twitter: "最速で失敗しない、邪道なステーキ調理法。こんなのステーキじゃない！肉のうまみが逃げる！と批判殺到。まあまあ一回試してみたら？ ①肉に塩をまぶす ②鍋に約3％の塩水を作り肉を入れて火にかける ③沸騰したら肉を取り出す ④両面に焼き色をつける 詳しくは動画で https://t.co/Nj6oLJwH5C https://t.co/PzzibXB55d" / Twitter 4位 【もっと早く知りたかった…】Excel作業を効率化する
この記事は、SmartHR Advent Calendar 2022 20日目のエントリーです。 SmartHRのUXライターとして働いている@8chariです。気づいたら、入社して1年半が経とうとしています。 この記事では、今年の9月〜11月に社内で開催したテクニカルライティング講座について紹介します。 開催の経緯SmartHRでは、「一語一句に手間ひまかける」というバリューがあり、UXライターだけでなく、さまざまな職種がユーザーに届く言葉に力を入れています。UXライターでなくても、誰もがユーザーにわかりやすく伝えられれば顧客の価値につながる、という認識が社内に浸透しています。また、SmartHRはフィーチャーチームでクロスファンクショナルに取り組んでおり、UXライター以外の職能がヘルプページの作成にチャレンジする機会が増えてきています。 しかし、そんなSmartHRでも、今までライティ
「Atomic Design」と「Design Systems」〜デザイナーとエンジニアが二人三脚で開発する手法〜 - DMM inside
｜DMM inside
Oli Lisher freelance website / graphic designer & illustrator based in the UK
Oli Lisher Designer & illustrator freelance website / graphic designer & illustrator based in the UK Fold Web design, 3d Illustration I've been working with Fold app to intergrate 3d illustration into their brand, marketing and app. Starting with the release of their bitcoin buying experience, where we introduced a 3d robot mascot and collection of imaginative machines to simplify complex concepts
Windows 11 で全面的に導入された Fluent Design System は個人的には結構好みなので、自作アプリでも同じようなデザインを実現したいのですが意外に難しいです。コントロールだけに限れば Windows App SDK を使うとある程度は対応は可能ですが、まだ使いやすく提供されていない機能もあります。 例えば以下は Microsoft Store アプリですが、タイトルバーからして大きく異なっています。全体的に Mica が適用されていて、完全にカスタマイズされたタイトルバーが実装されています。 Windows 11 におけるタイトルバーのデザインについては、以下のドキュメントに典型的なパターンが紹介されているので、こちらを参照するとイメージしやすいと思います。 このように紹介されているということは、Windows 11 向けのアプリではタイトルバー含めデザインを統一
Windows 10の最新情報を常にウォッチしている探偵・ヤナギヤが、Windows 10にまつわるギモンに答える本連載。 基本技から裏技・神技、最新ビルドのInsider Previewの情報まで、ドド～ンと紹介します。 10月17日から日本を含む全世界で順次、2017年で2度目となるWindows 10の大型アップデート「Windows 10 Fall Creators Update」がリリースされる。今回は、これまでInsider Previewで一足早く導入されてきた、Fall Creators Updateの新機能や改善点、削除された機能などをまとめて紹介する。 ※動作確認と画面キャプチャーはWindows 10 Insider Previewで作業しています。 変更ポイント１ Fluent Designがスタートメニューに導入された マイクロソフトの新デザインシステム「Flue
ウェルカムトゥ未来。Adobe Maxで発表された恐るべき新機能まとめ2020.10.22 21:0018,200 ヤマダユウス型 もはやクリエイティブはAIと共に。 さぁ、ありとあらゆるコンテンツの可能性が広がる知識と技術祭典、Adobe MAX 2020が今年も開催中です。今年は2020年10月20日（火）〜22日（木）の期間、オンラインにて視聴するかたちになりました。 コンテンツの大渋滞ってくらい面白いネタが飛び交うAdobe MAX。の中でもホッテストなネタといえば、先んじて紹介された｢空の置き換え｣のような、ツール類のアップデートでしょう。やはり近年のアプデはAIや機械学習の活用がすんごい。 公式サイトにて簡潔に紹介されていますが、改めて各アップデートを見ていきましょう。長文記事になると思いますが、それだけ技術てんこ盛り盛りアドビ盛りなのです。 Photoshopの新機能人の顔の
Alsacreations. Expertises, Solutions et Creations pour le Web a Strasbourg
Du logo à la charte graphique, en passant par une ergonomie bien pensée, nous mettons l'UX (User eXperience ou expérience utilisateur) au centre du processus de création. Un design esthétique et convaincant, multi-plateforme représente toujours un défi. Nous imaginons tout ce qui peut le rendre efficace et adapté à votre besoin. Ce que nous savons faire Logo et identité graphique, typographie Ergo
GitHub - mojoaxel/awesome-regression-testing: 🕶️ A curated list of resources around the topic: visual regression testing
Awesome Visual Regression Testing Curated list of awesome visual regression testing resources. Regression testing is a type of software testing which verifies that software which was previously developed and tested still performs the same way after it was changed or interfaced with other software. The purpose of regression testing is to ensure that changes to the software have not introduced new f
From Ruby to Node: Overhauling Shopify’s CLI for a Better Developer Experience
Opens in a new windowOpens an external siteOpens an external site in a new window The Shopify CLI (command line interface) is an essential tool for developers when building and deploying Themes, Apps, Hydrogen storefronts on the Shopify platform. It provides workflows to create new projects that follow best practices, integrate with the platform during development, and distribute the production ar
Cyrille Martraire is a passionate developer since 1999. He's the co-founder and CTO of Arolla, a company specializing in software development and nothing else. With a love-and-hate relationship with documentation, he has experimented over more than 10 years with multiple ways to get smarter documentation, from automation to self-discipline. Addicted to development at all scales, Cyrille still dedi
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Design systems at GitHub
Microsoft、Officeも「Fluent Design」に コンパクトなリボンやAI検索機能など
Distributed systems for fun and profit
Firefox: The Evolution Of A Brand – Mozilla Open Design
Type safe CSS design systems with @property · September 1, 2023
Master CSS - A Virtual CSS language with enhanced syntax.
Yoshihiro Kanamori's homepage
primer/primer: The design system that powers GitHub
The 12 Factor Design System - UGAP Engineer's Blog
Incrementsのデザインシステム公開のお知らせ（前編） - Qiita Blog
メルカリを退職してCloudbase株式会社に転職しました - めおしーえす
デザインシステムめっちゃ見る④ スペーシング編 - JMDC TECH BLOG
Windows版「Word」、「Excel」、「PowerPoint」のアクセス権管理機能が改良へ／Fluent Design Systemに準拠、わかりやすく、使いやすく
GitHub - kufu/smarthr-design-system
取り返しのつかない操作 | デザインパターン（共通） | SmartHR Design System
NEW「フルーエントデザイン」はWindows 10のプレビュービルドで試そう！
月間はてなブックマーク数ランキング（2022年11月） - はてなブックマーク開発ブログ
鬼の赤ペン先生つき📝 SmartHR流 テクニカルライティング講座を開催した話｜8chari / はっちゃり
Windows App SDK を使ってモダンなタイトルバーを持つアプリケーションを作る - しばやん雑記
いよいよ10月17日「Windows 10」秋の大型アップデートで何が変わる？ (1/4)
ウェルカムトゥ未来。Adobe Maxで発表された恐るべき新機能まとめ
Living Documentation by design, with Domain-Driven Design