Frontend Weekly Vol.55

Headlines

Product design — How we make complex tasks feel simple by GoSquared Blog

複雑なタスクをいかにシンプルに感じさせるか。ユーザ・インターフェースをデザインする上でもっとも重要なゴールを実際のUIを例にどうアプローチしたのかについて詳しく解説している貴重な記事。

How I Shrank my CSS by 84kb by Refactoring with ITCSS by Jordan Koschei

Harry Roberts氏が提唱したITCSSを使って、84kbあったCSSを27kbまで縮小したケーススタディ。ITCSSがどんな問題を解決しているのか、そして具体的にどんなディレクトリ構成にしたのかについて詳しく解説している。

Dissecting Motion Design with the “7 W’s” by yiming

動きをデザインする中で考慮するべき7つの『W』フレームワーク。Who, Where, When, Why, What, with What, in What wayの7つがモーション・デザインをする上でどう役に立つのかについて、iOSのロックスクリーンを例に解説。

JavaScript web apps considered valuable by molily

シングルページアプリケーションの存在は頭痛のタネであることは周知の事実。だからといって、JavaScriptを中心においたウェブアプリケーションの開発全体がそうであるとは限らない。 過去に抱えていた問題の多くが解決されてきた今だからこそ、クライアントサイドのウェブアプリケーションの設計についてもう1度考え直すべき。

Motion with Meaning: Semantic Animation in Interface Design by A List Apart

インターフェースのアニメーションをデザインする上で大切になってくるのが、動きそのものが持つ意味。どんなメッセージをユーザに伝えるのか。記事ではウェブサイトにおけるインターフェイスに限らずOSのアニメーションにも触れ、その意味について、動画の例付きで解説。

The Baseline Journey by Adaptive Path

ユーザがサービスに触れる場面はもちろん、そうでない場面でも続くのがUXデザイン。その文脈の中で重要な役割を担うユーザ・ジャーニーを作る上で、どうやって様々なタイプのユーザの旅路を定義するべきか。
プログレッシブ・エンハンスメントの概念をユーザ・ジャーニーにも活かすアプローチについて紹介。

What does Disney know about interface animation anyway? by Val Head

アニメーションに関わる以上、知っておくべきディズニーのアニメーション12の法則、果たしてその法則はインターフェースにおけるアニメーションにも適用できるのか?
アニメーションがユーザに伝えることとは何かを踏まえて、12の法則について改めて見直したい。

Announcement

フロントエンドエンジニアのための現在とこれからの必須知識 (PR)

フロントエンドを1、2年以上担当した人を対象に、「今知っておかないといけない情報」と、「今後役に立つ情報」をピックアップ。 Frontend Weeklyのキュレータの1人である谷と編集長の斉藤も著者の1人。

Slack for Frontend Weekly (PR)

Frontend Weeklyの『実験的』Slackコミュニティに興味がある方は、こちらから招待をリクエストしてください。 週次で50人くらいずつ招待をして行くつもりです。

In Brief