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
#11WeeksOfAndroid 18 #Android12 1 #AndroidDevJourney 1 #androiddevsummit 5 #GoogleIO 19 #WeArePlay 3 12l 1 5 star apps 1 Ads 1 advertising 1 AGDE 1 AGDK 2 AGI 1 AI 3 AI Announcements beginner Explore Generative AI 1 AI Announcements beginner Explore Generative AI、 1 Android 106 Android 10 1 Android 11 1 Android 12 Beta 5 1 Android 12L 1 Android 13 3 Android 14 7 Android 14 Beta 4 1 Android 14 ベータ版
FAST
ADAPTIVE UI SYSTEM, UTILITIES, & TOOLSThe adaptive interface system for modern web experiencesInterfaces built with FAST adapt to your design system and can be used with any modern UI Framework by leveraging industry standard Web Components. Get started FLEXIBLE AND ADAPTABLEDynamic themes with Adaptive UIFAST provides an innovative theming system called Adaptive UI, which builds design system pro
エンジニアリングするデザイナーが領域を超えて見えたこと / designers-to-implement
UXA2023 Eva Plaisted, Klaus Paiva and Maria Christley - oing smaller, to go bigger: A design system evolution
Eva Design System
Eva Design AssetsDesign Assets easily adaptable to your brand. Available for Sketch and Figma component libraries, based on Eva Design System.
こんにちは、WEAR Webフロントエンドチームの吉田と大脇です。 現在WEARではNext.jsでのリプレイスが進行中です。今回はリプレイスのデザイン面における課題と解決に向けて行った取り組みを紹介します。 リプレイスの経緯や技術選定については、弊社の藤井の記事をご覧ください。 techblog.zozo.com 10年の歴史のあるアプリケーションと向き合う リプレイスにおける課題 他部署との連携 デザイナーとエンジニアの歩み寄り ミーティングで話し合ったこと ミーティングを行って得た気づき デザインツールの変遷 未来のこと、これからやっていきたいこと デザイントークンの定義 デザイン周りの負荷軽減 技術面でやりたいこと Tailwind CSS Storybook 終わりに 10年の歴史のあるアプリケーションと向き合う WEARは今年で10年目となります。Webサービスとしては長期間に
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
Photoshop's journey to the web Stay organized with collections Save and categorize content based on your preferences. The idea of running software as complex as Photoshop directly in the browser would have been hard to imagine just a few years ago. However, by using various new web technologies, Adobe has now brought a public beta of Photoshop to the web. Over the last three years, Chrome has been
Wise Design
Wise Design is the Wise design system. It helps our team create a distinct, accessible and consistent Wise experience that works for everyone, everywhere.
はじめにこんにちは。デザイナーのハセシュンです。 先日、待ちに待ったInVision Studio（Early access版）への招待が来ました。 個人的には、ティザームービーで見た「アニメーション機能」を特に楽しみにしていたのですが、本当にあそこまでできるの？と半信半疑だった方も多いのではないでしょうか。 ということで今回は、「AbemaTVのインタラクション」を題材にInVision Studioで実際にデザインしてみた感想を書いてみたいと思います。 ちなみにAbemaTVを選んだ理由は、以前UI観察をしていて、マイクロインタラクションの設計にこだわりが感じられる素敵なアプリだな、と思っていたからです。 実際に作ったモノこちらが今回InVision Studioを使って作成したUIアニメーションです。AbemaTVを横向きにして視聴している時の画面を再現しました。 チャンネル切り替え
DMMのエンジニアで『React開発 現場の教科書』の著者でもある石橋啓太さんにお声がけ頂いて『ReactとAtomicDesignからみるコンポーネント開発』でお話をさせて頂きました。 テーマは個人的に関心のあった「Atomic Designの代替」を選びました。Atomic Designと言えば、いまや国内外含めてコンポーネント設計をする際に多くの人が参照する概念ですが、すべての環境に適切かと言えばそれはまだ疑問を残す余地があります。 「Atomic Designを採用してみたけどしっくりこなかったので自分たちに合った概念を考えてみた」という個人・組織がいるのはMediumの記事などを通じて知っていたので、そういった事例を集めてみたら面白いんじゃないかなと思ったのがこのテーマを選んだきっかけです。完全に趣味です。 Atomic Designへの疑問Atomic Designについて知り
最近のHTMLメールで見かけるさまざまなレイアウトやコンポーネントが揃ったデザイン素材 -Email Design System
デスクトップ・スマホ対応のHTMLメールをデザインするのに役立つレイアウト、コンポーネント、シンボル、テンプレートが揃ったSketchのデザイン素材を紹介します。 HTMLメールのさまざまなデザインが収録されており、制作にも勉強にも役立つ素材です。
Designs | jQuery Mobile
The jQuery mobile design team is actively working on designing a unified UI system for mobile-optimized widgets and layouts, and architecting a new version of the ThemeRoller tool to support the new theme system. Follow our progress and join the conversation on the jQuery Mobile planning wiki Initial designs – August 11, 2010 The design team has developed an initial set of design concepts that exp
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
Atomic 2.0
Atomic Design is a great methodology for both design and development that was pioneered by Brad Frost. I’ve found that the hierarchy of elements is often interpreted differently from person to person so I’ve tried to solve that with a new approach, I call it Atomic 2.0. The Atomic 2.0 approachConcern #1 with Frost’s approachFrost describes atoms as elements that cease to be functional if broken do
Atomic Design Methodology | Atomic Design by Brad Frost
Chapter 2 Atomic Design Methodology Atoms, molecules, organisms, templates, and pages My search for a methodology to craft interface design systems led me to look for inspiration in other fields and industries. Given this amazingly complex world we’ve created, it seemed only natural that other fields would have tackled similar problems we could learn from and appropriate. As it turns out, loads of
デザイントークンを『デザインの決定を開発チーム全体に伝えるための「方法論」』と定義した｜amishiratori
サイボウズのkintone Designチームでkintone Design SystemチームのリーダーをしているAmi（@__amishiratori）です。 私たちkintone Design Systemチームでは、デザイントークンを『デザインの決定を開発チーム全体に伝えるための「方法論」』と定義しました。 kintone Design Systemの構築を始めて2年以上が経ちましたが、 デザインシステムやデザイントークンに馴染みのない人も開発チームにはまだいます。 開発チーム全員が共通した認識を持って効果的にデザイントークンを活かして開発ができる様に定義し説明するドキュメントを作成しました。 この記事ではその内容をご紹介します。 用語の定義トークン 色やサイズなどの値と名前の組です。 Global Tokens トークンのうち、特定の文脈によらないトークンです。 （例：gray-
Wilson Miner
I’m particularly interested in design systems, code as a design tool, and how we shape our world through design. I’m currently a product designer at Apple. Recently, I worked on a product design system at Stripe and helped The California Sunday Magazine bring ambitious storytelling and photography together online. As a product designer at Facebook, I helped create a unified system of interface des
（1）過去2年の集大成を目指す「Windows 10 Fall Creators Update」 マイヤーソン氏は、これまでRedstone 3（RS3）の開発コード名で呼ばれてきたWindows 10の次期大型アップデートの正式名称が「Fall Creators Update」であることを発表した。 Windows 10の大規模アップデートが「春（Spring）」と「秋（Fall）」の年2回制に固定されたことを反映しての命名だと思われるが、現行のRedstone 2（RS2）こと「Creators Update（1703）」が当初計画における完成途上版だとすれば、Fall Creators Update（RS3）はその集大成と言える。 例えば、1年前の「Build 2016」でお披露目された機能や新技術が、ようやく巡り巡ってFall Creators Updateの世代で本格実装が行われ
2019年10月7日にGoodpatchでUX Engineer Meetupというイベントがあり、主催のおすみさんに声をかけていただいて登壇することととなった。 一時期のUXデザイナーのように、UXエンジニアというのはにわかに広まりつつあるも、UX Designer以上に「何者」なのかが掴みづらい。正直ぼくもわからないというか「UXエンジニア」という肩書が適切なのかはわからない。しかし、このイベントをきっかけに「UXエンジニアは何者なのか」もとい「私は何者なのか」を考え、その内容をほぼそのまま発表した。 このイベントでは僕だけではなく、Cookpad、Goodpatchとより実践的にデザインとエンジニアリングの境界をもたずに事業を進めてきている会社のUXエンジニアも登壇するので、より実践的、事例を交えた話になるだろうとおもい、僕からはUXエンジニアと呼ばれる人々の概要と、僕自身のキャリア
どうもよしです。久しぶりの投稿になります。 元々、Material Design をベースとした UI コンポーネントライブラリである、Material UI の v5 が遂にリリースされました！ v4 からどう変わったのか自分でも試すなど、さらっと見てみたので、ここにまとめてみました。 ※2023/11/25 MUI の更新に伴い、MUI v5.0系のドキュメント参照したほうが良い部分はリンクを差し替えました。 Material UI とは？ 元々、Google の Material Design をベースに開発された、UI コンポーネントライブラリです。 Material UI の概要や v4 の機能に関しては、以前に記事を書いていますので、よろしければそちらをご参照ください。 ※今回の記事は、主に以下の公式ブログ記事をもとにしています。引用文の出典もそちらです。 そのため、すでにそち
Evolving the Firefox Brand
Say “Firefox” and most people think of a web browser on their laptop or phone, period. TL;DR, there’s more to the story now, and our branding needs to evolve. With the rapid evolution of the internet, people need new tools to make the most of it. So Firefox is creating new types of browsers and a range of new apps and services with the internet as the platform. From easy screen-shotting and file s
Debugging in CSS means figuring out what might be the problem when you have unexpected layout results. We’ll look at a few categories bugs often fit into, see how we can evaluate the situation, and explore techniques that help prevent these bugs. We’ve all been there, at the end of completing CSS for a layout and — what’s that? Ah! An extra scrollbar! Or maybe an element is an unexpected color. An
まだ完結していないシリーズの途中ではあるのですが、ちょっと早めに自分の備忘録としてまとめておきたかったので先にこちらを書いてしまいました。 相変わらずの文章量なのですが(ちゃんと読むのに15分は確実にかかります)、お時間ある方は読んでいただけると嬉しいです。そして、内容についてはまだ実験段階な部分が多いので、フィードバックを貰えると非常に助かります🙏 1.命名規則とコンポーネントの単位について命名規則とコンポーネントの単位はプロジェクトで使用される技術によって少し状況が変わってくるように思います。 そもそもコンポーネントという概念が開発にほぼ必要ない普通のWebサイトなどであれば、多少実装しにくいと思われるかもしれませんが、あまりデザイナー側が気にする事ではないかなとも思います。 ただ、今回はReact.jsやVue.jsなどのフレームワークを使ったWebアプリケーション/サービス、また
しばたです。 前の記事でNext.jsを試す環境を作ったので本記事ではCloudscapeを実際に試してみます。 Cloudscape Design Systemとは？ Cloudscape Design SystemはAWSが作成しオープンソースで公開しているWEBデザインシステムです。 もともとAWSが内部向けに作成し改善していたものが今年の7月に一般公開されました。 雑に言ってしまえば「マネジメントコンソール風のUIをつくれるやつ」なんですが、デザインシステムの名の通りUIコンポーネント以外にデザインパターンやデモも公開されています。 注意事項 本記事ではこちらの手順に従い最初の一歩を試してみようと思っていました。 Using Cloudscape components ただ、手順をよく読んでみると最後の最後に、 Bundling with Next.js (optional) Th
CSS :has Parent Selector
Have you ever thought about a CSS selector where you check if a specific element exists within a parent? For example, if a card component has a thumbnail, we need to add display: flex to it. This hasn’t been possible in CSS but now we will have a new selector, the CSS :has which will help us to select the parent of a specific element and many other things. In this article, I will explain the probl
A redesign powered by CSS Grid and optimized for performance and accessibility. In August, we released a major redesign of slack.com, and we want to give you a peek behind-the-scenes. Rebuilding our marketing website was a massive project that took careful coordination across a variety of teams, departments, and agencies. We implemented a redesign while overhauling all the under-the-hood code. Our
This is your complete guide to CSS cascade layers, a CSS feature that allows us to define explicit contained layers of specificity, so that we have full control over which styles take priority in a project without relying on specificity hacks or !important. This guide is intended to help you fully understand what cascade layers are for, how and why you might choose to use them, the current levels
Figma3.0リリースでFigmaがDOPEなデザインツールになった｜SketchでもAdobe XDでもない選択肢｜Nao Komura｜note
みなさんはFigmaというデザインツールをご存知でしょうか。 正直な所、Adobe XDやSketchなどと比べると知名度も低いし、それらのツールと比べても機能は充実しているのですが使い所が微妙。 (ちなみに、Figmaの公式サイトにもXD、Sketch、Invision Studio、Framerと比較したページはあるのですが全部同じ内容で肩透かしをくらいます。) という具合に個人的に推しているデザインツールではあるものの、惜しい部分が多くまだ布教できる段階では無いな、という印象も持っていました。 しかし...... バージョン3.0のリリースでその印象が大きく変わり、最強のデザインツールFigmaを布教するぞ、という気持ちになりました(謎の使命感) ということで、Figmaの機能の紹介をメインに主要なUIデザインツールであるSketchとAdobe XDとの比較なんかも合間合間していこ
Microsoftが「Microsoft Office」アプリの各アイコンデザインを一新すると発表しました。Officeのアイコンデザインの変更は2013年以来となります。 Say hello to Microsoft's new Office icons https://news.microsoft.com/europe/2018/11/29/say-hello-to-microsofts-new-office-icons/ Redesigning the Office App Icons to Embrace a New World of Work https://medium.com/microsoft-design/redesigning-the-office-app-icons-to-embrace-a-new-world-of-work-91d72608ee8f すでにクラウド
Adobe XD Templates, UI kits and Freebies - Top resources on XDGuru
Adobe XD Resources, UI kits & Templates The biggest collection of free & premium resources for Adobe XD Please have a look at this massive new premium XD UI kit carefully crafted by the amazing guys at KL-Webmedia. WunderUI is a collaborative, advanced XD UI kit and design system which is created to boost your performance and productivity. With a close look into scalability, accuracy and consisten
Janko Jovanovic – Design Management and Strategic Design
A seasoned design and product lead with nearly 30 years of experience across various fields. I bring together design management, product management, strategy, futures thinking, and systems thinking to help teams and organizations navigate an increasing uncertainty and design for the preferable future. More than 25 years of experience 8 years in building, managing, and scaling cross-functional team
新アイコンは、馴染みのあるアイコンを同社の「Fluent Design System」に基づいてデザインし直し、「ビジネスのアジャイルな未来を表現した」としている。 現在のアイコンになったのは2017年のIgniteからだ。それ以前は雲を模したものだった（米Neowinより）。 Microsoftは検索サービス「Bing」のロゴも昨年10月に名称を「Microsoft Bing」とした際、Fluent Designのものに変更している。 関連記事 Windows 10の「エクスプローラー」、「ごみ箱」などが正面を向くデザイン変更（Build 21343で） Microsoftは「Windows 10」のプレビュー版プログラム「Insider Preview」でリリースした「Build 21343」で、「エクスプローラー」の新しいアイコンを披露した。ごみ箱やデバイスが正面を向き、「ドキュメン
Stoyan (@stoyanstefanov) is a Facebook engineer, former Yahoo!, writer ("JavaScript Patterns", "React: Up and Running"), speaker (JSConf, Velocity, Fronteers), toolmaker (Smush.it, YSlow 2.0) and a guitar hero wannabe. Let’s talk a bit about keeping tabs on how much CPU is consumed by an application’s JavaScript. And let’s frame the discussion around components – the atomic building blocks of the
はじめに こんにちは！お会計チームの yamakazu (@yamarkz) です。 10Xでは4月から新しい期が始まるため、最近はバタバタしています。新しい組織や取り組みが始まってきていて、今年度はこれまでとはまた違った大きな変化が生まれそうで楽しみです。 さてそんな今回は期の変わり目ということもあり、 節目として「Stailerの開発を支える取り組み」を紹介します。 取り組みはプロダクトの規模や性質、組織構造、願望によって変わる唯一無二の存在で、各社様々な工夫を凝らして、より良い開発体験を追求していると思います。 自分たちもその時々の状況に合わせて、最適なやり方に変えて開発してきました。 今後も取り組み自体は変わっていくと思いますが、2023春時点での取り組み状況 (仕組み / ルール / 文化 / ツール) をスナップショットとして取り上げみようと思います。 はじめに 前提 取り組み
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のモバイルアプリでは既にこの機能が使えるよう
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Jetpack Compose を使ったデザインシステムの実装
10年続くWEARにおける、デザインシステム事始め - ZOZO TECH BLOG
Photoshop's journey to the web | Articles | web.dev
InVision StudioでAbemaTVのインタラクションを再現してみた。｜haseshun
Alternative Atomic Designをさがして｜Ryo Yoshitake | THE GUILD
Introducing USWDS 2.0
Windows 10本命アップデート「Fall Creators Update」の気になる中身
私はいかにしてUXエンジニアになったのか｜Hiroki Tani
こんにちはMUI！ 新しくなったMaterial UI v5
「Notepad++」が約5年ぶりのメジャーアップデート ～ARM64ビルドとダークモードを追加／OSで採用が進む「Fluent Design System」に合わせた新しいツールバーアイコンも同梱
A Guide To CSS Debugging — Smashing Magazine
Figmaにおけるコンポーネントとバージョンの管理について考える｜Nao Komura｜note
Next.jsでCloudscape Design Systemを試してみた | DevelopersIO
Rebuilding slack.com - Slack Engineering
A Complete Guide to CSS Cascade Layers | CSS-Tricks
Microsoft Officeのアイコンデザインが刷新される
Microsoft、「Azure」の新アイコン発表 「Fluent Design System」準拠
JavaScript component-level CPU costs
Stailerの開発を支える取り組み 2023春 - 10X Product Blog
Design systems at GitHub
Microsoft、Officeも「Fluent Design」に コンパクトなリボンやAI検索機能など