サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
Webプロダクト開発をしていると様々な諸事情によりUI構成を変えたり機能を増やしたり減らしたりすることが多々あると思います。そんな時に避けられない事態として「UI変更に対するお怒りがユーザーからわんさか届いてしまう」ということがあります。今回はUI上の１要素の色を変えただけで虎の尾を盛大に踏んでしまった事件の話をしようと思います。差し当たりどういうUIをどう変えたのかを明示しておきます。変える前がこちら↓↓ beforeUIほんで変わった後がこちら↓↓ afterUIご覧の通り「作業カード」と呼ばれるコンポーネントの色を「緑＆黄」から「緑塗り＆緑枠線」に変更しました。「え、それだけ？」という声が聞こえてきそうですがそうなんです。それだけなのです。しかしここはレガシードメインのtoB SaaS。toB SaaSではUIの変更がユーザー業務への影響に直結するので軽微な変更を加えるのもハードルが
Graygray 1gray 2gray 3gray 4gray 5gray 6gray 7gray 8gray 9gray 10gray 11gray 12Mauvemauve 1mauve 2mauve 3mauve 4mauve 5mauve 6mauve 7mauve 8mauve 9mauve 10mauve 11mauve 12Slateslate 1slate 2slate 3slate 4slate 5slate 6slate 7slate 8slate 9slate 10slate 11slate 12Sagesage 1sage 2sage 3sage 4sage 5sage 6sage 7sage 8sage 9sage 10sage 11sage 12Oliveolive 1olive 2olive 3olive 4olive 5olive 6olive 7oliv
Stop using HSL for color systems! HSL is an alternative representation of the RGB color model.It’s the most common way to specify color in design tools, butit has an inherent fault — Lightness and Saturation don’t reflect human perception. Compareblue andgreen — while both have a Lightness of 50,blue looks much darker. This becomes a problem whenbuilding a color system with HSL, as lightness
Recently, I set out on a mission to reconstruct a color system in Postmark. This project addressed several problems with our design system, involved a lot of research, and even requiredbuilding a few custom tools. Now that this project is finished, I want to share the most important lessons I learned about color and present a new design and accessibility tool Accessible Palette born out of this w
Color accessibility: tools and resources to help you design inclusive products This content is 3 years old. Remember that the following content might be outdated. I wrote a quick tweet about teaching the basics of accessibility and colors to design students a few months ago thatgo quite some attention.It brought up some interesting discussions on color accessibility, inclusive design an interest
From the perspective of a colorblind person, some colors are impossible to distinguish.Sim Daltonism lets you visualize colors as they are perceived with various types of colorblindness. Move theSim Daltonism window over something on the screen and see whatit looks like with a colorblindness. With this app you can check the accessibility of websites and other user interfaces, make your visua
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
