「PayPayモールのAMP活用とデザインシステム」 ~ ワンランク上のお買い物体験の提供を目指して ~ I was on stage the tech conference of Yahoo Japan https://techconference.yahoo.co.jp/2019_shi…
PayPayモールのAMP活用とデザインシステム / AMP and design system in E-commerce
「PayPayモールのAMP活用とデザインシステム」 ~ ワンランク上のお買い物体験の提供を目指して ~ I was on stage the tech conference of Yahoo Japan https://techconference.yahoo.co.jp/2019_shi…
デザインは、デザイナーだけのものとは限りません。 プロダクトがどのようにあるべきかを考え、試行錯誤し、意思決定することは「デザイン」そのものだからです。 SmartHRのプロダクト作りには多くの人が関わり、これからも増えていきます。このような中で大切にしたいことを言語化し、デザイン原則としました。 このデザイン原則は、SmartHRを取り巻く環境の変化に合わせて定期的に見直し、更新しながら運用していくことを前提としています。 ユーザーの時間は有限だ私たちのプロダクトは、仕事の時間をよりよくするためのソフトウェアです。ユーザーの生産性を高めることによって対価を得ていることを忘れてはいけません。 私たちは、ユーザーの限りある業務時間をムダにしない、使い勝手のよいプロダクトを作ります。 道具であるはずのプロダクトの都合でユーザーを動かしていないか、ユーザーの時間を奪っていないかを意識します。 完
フロントエンドのテックリードのみゅーとん(@_mew_ton)です。 弊社では新しいプロジェクトを立ち上げの際に、Nuxt3を採用することにしました。 また、従来までのプロジェクトの反省点として、 Atomic Design を考慮して実装することにしました。 ただ、Atomic Design について調査していくと、Atomic Design の考え方をそのままディレクトリに落とし込んでいくのはどうやら悪手のようで、Google サジェストからも、いくつか失敗のケースが散見されました。 そこで、Nuxt3 のディレクトリ構成にマッチするような Atomic Design の構成を考えてみたので紹介します。 Atomic Design とは Atomic Design とは、パーツ単位でUIデザインを設計する手法です。 Atomic Design 自体は 5年以上前から提唱されている設計方
Top 10 UX Articles of 2021
The following user-experience articles published in 2021 were the ones our audience read the most: The 6 Levels of UX Maturity Our UX-maturity model has 6 stages that cover processes, design, research, leadership support, and longevity of UX. Use our quiz to get an idea of your organization’s UX maturity. Mapping User Stories in Agile User-story maps help Agile teams define what to build and maint
Spectrum Web Components Spectrum Web Components The Spectrum Web Components project is an implementation of Spectrum, Adobe’s design system. It's designed to work with any web framework — or even without one. Accessible by default # Developed with existing and emerging browser specifications in mind, our components deliver a high quality experience whether using a screen reader, keyboard navigatio
ヘルプページを書くうえでの基本的な考え方と表記ルールをまとめました。 ドラフトを自分でレビューする際は「チェックリスト」を活用してください。 また、このページで記載していない表記ルールは、プロダクトデザインにおけるライティングスタイル、用字用語、UIテキストに準拠します。 ユーザーが確実に目的を達成できる状態を目指しましょうヘルプページの役割は、ユーザーが目的を達成するサポートです。 情報を簡潔明瞭に伝えて、ユーザーが操作につまずかないようにしましょう。 不要な情報や曖昧な表現は目的達成の妨げとなるため、削除や言い換えを検討しましょう。 チェックリスト情報を取捨選択しましょう必要な情報を漏れなく記載する不要な情報を記載しない本文への追加情報に用いる囲み要素の多用を避ける情報を適切に配置しましょう先に知っておくべき情報から順番に配置する関連する情報は近くに配置する見出しや箇条書きを適切に使う
GitHub - hashicorp/design-system: Helios Design System
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 Design System Guide
All the essential resources for setting up the design system. For free. Forever.
20,000 Startup Ideas
20,000 Startup Ideas (This data comes from the O*NET web site.) This gives a kind of map of the territory of current economically important human activities. Therefore it represents a good source of startup ideas. It maybe is even the listing of approximately all startup ideas. Visit individuals in homes or attend group meetings to provide information on agency services, requirements, or procedure
UI Density
Interfaces are becoming less dense. I’m usually one to be skeptical of nostalgia and “we liked it that way” bias, but comparing websites and applications of 2024 to their 2000s-era counterparts, the spreading out of software is hard to ignore. To explain this trend, and suggest how we might regain density, I started by asking what, exactly, UI density is. It’s not just the way an interface looks a
How Spotify Organises Work in Figma to Improve Collaboration
Spotify Design recently migrated to Figma. We're excited to open up the music box and describe how we've shaped the tool to suit our needs and culture at Spotify. But in this article, we're not discussing why or how we moved. Instead, this is where we're going to geek out over file structures. Check out our Figma Ways of Working above, and have a read of this article to understand some of the rati
UXエンジニアを目指して 〜Refactoring UIを読む〜 | 丸ノ内テックブログ
フロントエンド front end バックエンド back end アプリ開発 app インフラ infra その他 other データドリブン data driven タグ一覧 Ajax（1） Android（20） Apache（2） AR（2） benchmark（1） BigQuery（2） browsersync（1） C4（1） CakePHP（1） CentOS7（1） CI（1） CMS（3） CoreNFC（1） CraftAR（1） CSS（1） DeepLab（2） Dmitry Stogov（1） ECMAScript（1） ECMAScript6（1） ElePHPant（1） Facebook（3） FFmpeg（1） firebase（1） fluentd（1） Framework（1） GD（2） gif（2） Git（1） GLSL（5） Google A
Fixelのデザインシステム作成・運用サービス
デザインシステムとは、デザインの原則やデザインガイドライン、 そしてそれらに沿ってデザインされたUIコンポーネントと その実装コードを体系的にまとめたものです。 アプリケーション開発の品質を高め効率化が図れます。
Odyssey is the design system for Okta Workforce Identity Cloud products. It empowers teams to build quality product experiences at speed and scale using a universal set of components and tools. | Design system documentation, made with ❤️ using Supernova
The best new Vue 3 UI libraries of 2021 - LogRocket Blog
This article is a follow-up to my previous article showcasing a list of nine superb Vue 3 UI frameworks. These frameworks enhance your Vue app’s development experience, maintainability, and final design. Today, I’ll be talking about five more brand new Vue 3 UI frameworks that ship with a panoply of awesome components (e.g., navbars, inputs, and checkboxes) that will help you effortlessly build in
立ち上げたデザインシステムを維持し進化させることの重要さ | アドビUX道場 #UXDojo | Adobe Blog
デザインシステムは近年デザインコミュニティで広く受け入れられるようになりました。実際、堅牢なデザインシステムを持つことは、デジタル製品の効率性と一貫性を長期にわたって確保するための鍵となります。 デザインシステムを適切に立ち上げるには、多くの事前準備が必要であることは間違いありません。しかし、それと同じくらい注力すべきことは、将来の組織の変化に耐えられるように、デザインシステムを維持し進化させることです。これは見過ごされることが多い点で、、時間、予算、リソースの浪費につながることがあります。きちんと保守されていないデザインシステムは、必要以上に早く新しいデザインシステムを必要とするようになるでしょう。プロジェクトを開始するときから適切なプランを持ては、こうした状況は避けられます。 デザインシステムの目的は何か? デザインシステムの利点は、プロセスを単純化して効率を高め、デザインチームと開発
Useful Front-End Boilerplates And Starter Kits — Smashing Magazine
We don’t need to write everything from scratch every single time. With boilerplates and starter kits, we can set up our projects faster, and get to work immediately. We’ve also just recently covered CSS auditing tools, CSS generators, accessible front-end components and VS code extensions — you might find them useful, too. Today, we’re shining the spotlight on boilerplates and starter kits for all
Toyota goes 2D and drops wordmark in rebrand by The&Partnership
Toyota has become the latest in a string of major car brands to overhaul its visual identity to better suit digital applications, in a rebrand by The&Partnership that sees the company drop its wordmark and use a 2D version of its logo across all European comms. It is the first update to the brand’s visual identity in 11 years and the first redesign of the logo since 2005; its intention, the agency
[レポート]LINEのデザインシステム：一貫性を損なうことなくLINEのサービスの速度を上げる #linedevday_report | DevelopersIO
CX事業本部の阿部です。 この記事はLINE Developer Day:Day2の「LINEのデザインシステム：一貫性を損なうことなくLINEのサービスの速度を上げる」のレポートです。 概要とスピーカー デザインの分野では、デザインシステムを採用することが主流になっています。 デザインシステムを採用すれば、一貫性とアラインされたUXレベルを同時に達成できるからです。 デザイナーは時間に余裕ができるため、デザインコンポーネントを用いてより重要なデザインの課題に集中することができます。 Jung Young Leeが、既存の製品から8年の歳月をかけてデザインシステムを作った経験談をお話しします。 LINE Plus Product Design 5 Lead Product Designer Jungyoung Lee (Jake)さん なぜこのセッションを聴こうと思ったか(期待値) そもそ
![[レポート]LINEのデザインシステム：一貫性を損なうことなくLINEのサービスの速度を上げる #linedevday_report | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/cce94c90ddc76c1ea7c6bf4be9e744090746ae41/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F11%2Flinedevday20191.png)
The ultimate UI kit and design system for Figma. 10,000+ components.
Generate Design Systems quickly - Figr Identity (FREE BETA) | Figma
Boost Your Figma Designs with Our Easy-to-Use Design System Generator: 🚀 Quick Design System Setup: Build design systems fast in Figma. Figr Identity helps you create and manage elements like styles and variables easily, making your design consistent and on-brand. 🔍 Seamless Figma Integration: ...
CSS Variables 101
CSS variables (AKA custom properties) have been supported in web browsers for almost four years. I like to use them depending on the project and the situation. They are very useful and easy to use, but oftentimes, a front-end developer might misuse or misunderstand them. The main purpose of this article is that I wanted to have a place where I can dump all the information I know about CSS variable
Creating Accessible UI Animations — Smashing Magazine
Animation and accessibility are often seen as two separate powers at odds with one another. How is it possible to strike a balance between elements that move and the possible negative effects they expose to users who are sensitive to motion? Oriana García explains how her team at Mercado Libre tackled the challenge by creating guiding principles for applying animation to user interfaces and incorp
メルカリDesign Systemの実装と責務
メルカリ Design System Web の実装と責務 2022-07-20 PWA Night vol.41 @nekobato
GitHub - Crayfisher-zari/digital-agency-design-system
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
Exploring GitHub with the redesigned navigation, now in public beta
ProductExploring GitHub with the redesigned navigation, now in public betaGitHub’s redesigned navigation is enabled for all users as a public beta. GitHub’s redesigned navigation is enabled for all users as a public beta. Millions of users build with GitHub every day, and we’re constantly working to make the platform user-friendly, more accessible, and an integral part of your workflow. To that en
Designing Better Error Messages UX — Smashing Magazine
Error messages need to be easy to spot, but they also need to be helpful. Let’s explore when error messages should live above input fields and why toast error messages are usually not a very good idea. When we design interfaces, we rarely think about error messages first. After all, how much is there to design anyway? We highlight the error, display a message, and nudge users toward the correct in
Decision Trees For UI Components — Smashing Magazine
Imagine finally resolving never-ending discussions about UI decisions for good. Here are some practical examples of decision trees for UI components and how to use them effectively. An upcoming part of Smart Interface Design Patterns. How do you know what UI component to choose? Decision trees offer a systematic approach for design teams to document their design decisions. Once we’ve decided what
Why I Don't Like Tailwind CSS | Aleksandr Hovhannisyan
You’re at a restaurant, and there’s an odd item on the menu that you’ve never heard of before, but it piques your interest. It sounds like it might be worth a try, though you’re not sure. When the waiter approaches your table, you inquire about the dish; he notes that while most people are initially repulsed by its appearance, they should still give it a try because the chef swears that it’s supre
Design Systems 101
Summary: A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels. As UI design has evolved over the years, the scale and speed at which UI screens must be created has also increased. Not only are there millions of applications and billions of websites (with more created each y
7.css
A design system for building faithful recreations of old UIs. Intro 7.css is a CSS framework for building interface components that look like Windows 7. It is built on top of the GUI backbone of XP.css, which is an extension of 98.css. This framework relies on the usage of semantic HTML. To make a button, you'll need to use a <button>. Input elements require labels. Tabs rely on the role="tab" att
「一語一句に手間ひまかける」SmartHRを支えるUXライティングユニットとは？ インタビュー Jul 14, 2021 3年連続シェアNo.1(※)のクラウド人事労務ソフトを提供するSmartHR。日本国内でも早くからUXライターの採用を行なってきたユニコーン企業です。今週のインタビューは、SmartHRでUXライターとして活躍されている高田邦明さんに、社内でのUXライティングのお取り組みについてお話を伺いました。 ※デロイト トーマツ ミック経済研究所調べ『HRTechクラウド市場の実態と展望 2020年度 労務管理クラウド部門』 高田さん、こんにちは。本日はどうぞよろしくお願いいたします。まずは読者の方へ自己紹介をお願いできますか？ はい、高田邦明と申します。2020年の12月にSmartHRに入社して、UXライターとして働いています。今日は折角ですので、SmartHRのチーム全体の
In JS code, we use the try-catch block to catch errors and handle them gracefully. Without them, our code will come crashing with some nasty error messages. In React, we often encounter UI errors where React will dismount the whole component tree to show error messages in the DOM. UI errors occur when we try to render the wrong type of data (for example, an object). class App extends React.Compone
SmartHRのプロダクトデザインシステム史上最大のアップデートがはじまります。 ー SmartHR Design Systemの現在地（2024年4月版）｜週刊プロデザ by SmartHR
開発組織も当然大きくなっていて、プロダクトデザイナーのプロダクト開発への関わり方もアップデートしつつあります。 「デザインシステムは、それを運用する組織の体制や構造に強く影響を受ける」ということで、現在2つの状況からデザインシステムは次のステップに進むフェーズにきています。 デザインシステムの進化を後押しする2つの状況 マルチプロダクト戦略SmartHRがマルチプロダクト戦略を打ち出したことで「ユーザーインターフェースの品質と一貫性がもたらす使いやすさ」がより重要になってきました。競合他社との機能のコモディティ化が進むなか、「使いやすさ」は商品価値として差別化要素の一つと位置づけられます。詳細はダイレクターのfumiya(@tyoys00)さんの前回の記事をぜひ読んでください。 プロダクトデザイン組織の拡大マルチプロダクト戦略を受けて、私たちは「プロダクトの使用性を担保する開発者である」
Monorepos are changing how teams build software - Vercel – Vercel
Developing, shipping, and iterating is faster in a monorepo The largest software companies in the world use monorepos. But historically, adopting a monorepo for anything other than at a Facebook or Google scale was difficult, time-consuming, and often filled with headaches. Since Turborepo joined Vercel, we’ve seen development teams of all sizes adopt Turborepo for faster builds and save over 200
Getting Started
Getting Started This page describes how to get started with React Aria. What is React Aria?# React Aria is a library of unstyled React components and hooks that helps you build accessible, high quality UI components for your application or design system. It provides components for common UI patterns, with accessibility, internationalization, interactions, and behavior built in, allowing you to foc
Learning React and being able to develop enterprise-class applications with React are two different things. There are two main reasons for that. First, there is a huge ecosystem of different modules you need to master. Second, this ecosystem changes every year. The last time I presented the enterprise React tech stack was two years ago. As you will see, there are not many modules from that tech st
Top 10 React component libraries for 2020 - LogRocket Blog
It’s 2020 and React is still one of the most loved frontend libraries around. The React community is also growing rapidly as more React packages are created to simplify various aspects of development with React. In this post, we’ll take a look at the fastest growing React libraries over the past year as well as some of of their use cases. N.B.: This post assumes you know or use React. If you want
One of the most exciting developments in design for me in the past few years was the launch of the GOV.UK design system. Of course, the real power of a design system comes from the community of designers who maintain it, but GOV.UK does so much right that it made me want to raise the bar on my own projects. I wanted to make something that was: easily reused in any website or app by installing it a
Presentational components like Avatar, Button, and Tooltip receive inputs exclusively via props and have no internal state. This makes it straightforward to isolate and write stories for them. However, components higher up in the application tree are trickier to build in isolation with Storybook. Connected components like Forms, List, and Cards track application state then pass behaviours down the
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイン原則 | プロダクト | SmartHR Design System
Nuxt3 向けに Atomic Design を拡張してみた - hacomono TECH BLOG
Spectrum Web Components - Spectrum Web Components
ヘルプページの書き方 | ヘルプセンター | SmartHR Design System
Welcome to Odyssey | Odyssey Design System
Untitled UI — Figma UI Kit and Design System
「一語一句に手間ひまかける」SmartHRを支えるUXライティングユニットとは？
React: Catching Errors using Error Boundaries
Enterprise React in 2022
Building a design system out of React components
How to build connected components in Storybook