Vol.300
A guide to Motion Design principles Jump to heading
モーションデザインの原則 Jump to heading
モーションというのはデジタル製品のUXに大きな影響を与えるため、それが基本的なモーションデザインの原則に沿っていない場合、逆に使いやすさが損なわれてしまう。UIの文脈ではモーションは視覚的な装飾以上に重要となる。この記事では、デジタルプロダクトにおける12のモーションデザインの原則を紹介する。
- イージング
- オフセットと遅延
- ペアレンティング
- 変形
- 値の変化
- マスキング
- オーバーレイ
- 複製
- 隠蔽
- パララックス
- 次元性
- ドリーとズーム
AddyOsmani.com - The Import On Interaction Pattern Jump to heading
Import On Interactionパターンの紹介 Jump to heading
ページには、すぐには必要ないコンポーネントやリソースのコード、またはデータが含まれている場合がある。たとえば、ユーザーがページの一部をクリックまたはスクロールしない限り表示されないユーザーインターフェイスなどである。これらがコストがかかるものだった場合、メインスレッドがブロックされ、ユーザーがページのより重要な部分を操作できるまでの時間が長くなってしまう。この問題の対策として、重要でないリソースのロードを延期する、import-on-interactionパターンがある。この記事ではこの実装をどのように行えばよいか、具体的なソースコードを交えて紹介する。
No, engineers don’t suck at time estimates - Temporary heresy Jump to heading
エンジニアと見積もり Jump to heading
エンジニアであれば見積もりが間違っていた、ということは何度も起きたことがあるだろう。見積もりが大きく外れた場合は見積もりが間違っていたとなるが、また逆に見積もりが実際の数値と全く一緒であれば、不正を疑うだろう。この記事ではこの奇妙なエンジニアの見積もりについて深堀りをしていき、見積もりとは何なのか、どのようにすれば、この見積もりを上手く扱うことができるのか、一つの考えを紹介していく。
Design’s Unsexy Middle Bits. While Design Thinking gets all the… | by Christina Wodtke | Medium Jump to heading
デザイン思考をUXデジタルプロダクトデザインと同義としてしまう考えについて、その2つは異なるものであるということ、そしてデザイン思考とはどのようなものかを解説する。また、一般的なデザイン思考のプロセスの例を挙げならが、それを肉付けした例を紹介する
3 Frameworks For Making Complex Decisions | by Rushabh Doshi | The Startup | Medium Jump to heading
この記事では、さまざまな状況の中で意思決定をするための3つの実用的なフレームワークを紹介する。
- 次元を減らす
- MAP手法を用いる
- WRAP手法を用いる
In Brief Jump to heading
Composing the Uncomposable with CSS Variables – Adam Wathan: CSSにおいてmarginは他の一連のプロパティの省略形となる。そういった省略形を持たないtransformなどのプロパティをCSS Variablesを使用することでそれを擬似的に実現することを試みる
Inversion: The Crucial Thinking Skill Nobody Ever Taught You: 反転して考えることの重要さと有効性について
Old is Solid; New Gets Talked About | CSS-Tricks: 新しい技術は度々話題になるが、ほとんどのWeb開発者は古い技術を使った仕事をしており、それらは手堅く、予測可能であるという利点がある。古いものが悪いと自動思考をせずに、それに勝ちがあるということを忘れないでくださいと締めくくる
Thoughts About Hooks. TL;DR If you care about raw… | by Andrea Giammarchi | Dec, 2020 | Medium: Reactのhooksについてその良い点と悪い点を挙げながら、代替案を紹介する
What is the async disposer pattern in Javascript - Advanced Web Machinery: try…finallyとasync functionを使うことでクリーンアップ処理を簡略化するデザインパターンを紹介する