斜め読み
- //24ways.org/2008/easing-the-path-from-design-to-development">Easing The Path from Design to Development:24 waysの今年版のエントリより。定番の開発者とデザイナの協業がお題。以下斜め読んだこと
技術的観点から検討されたデザインは、進捗・予算面でプロジェクトが破綻させないようにしてくれる・・・、ということでページカンプ作る人が意識すると大変有益なポイントを列挙してる。ウィンドウサイズは可変、ズームできること、JSがいつもオンとは限らない、ログイン/ログアウトがある、ユーザのアクションにフィードバックがあるか、以下斜め読んだ限りでのまとめ。
- レイアウト
- 固定?リキッド?
- ウィンドウサイズが変わるとき/変えるときに表示がどう変わるか
- テキストサイズとコンテンツの分量
- ブラウザのテキストズームに対して柔軟か?
- グラフィックがウィンドウサイズなどの可変に対して柔軟か?
- JSを使った/使わないインタラクション
- ページ内のインタラクティブな要素は、jsオン環境/jsオフ環境を想定した振る舞いか?
- ログイン/ログアウト
- ログインユーザ/ログアウトユーザに応じたページ表示があるか?
- ログインユーザのみが見れるコンテンツ
- jsオン環境/jsオフ環境どちらでもログインできるように設計されてるか?
- ログインユーザ/ログアウトユーザに応じたページ表示があるか?
- フォント
- タイプフェイスの選択には控えめであるべき
- OSにバンドルされてるフォントを把握
- sIFRやcanvas要素を使うと使えるtypefaceの幅は広がるが、トレードオフを意識してどうするか決める
- メッセージング
- インタラクティブ要素がエラー/successメッセージをユーザに返す設計になってるか?
- フォーム要素
- 各フィールドがラベルを持ってるか?
- sugmitがフォームごとにあるか
- 実践的tips
- カンプ(psd、png)は、レイヤーをグループ化しておく。グループやレイヤーには名前をつける
- jsオフ/オン、ログイン/ログアウトの各状態に応じたデザインが把握しやすくしておく
- 閲覧用にpdfを作って、各ページ、各状態が一覧できるようにする
- 開発者が使うリファレンスになる。
- 色見本を作成する。
- 開発者が何度も何度もカラーピッカーを使う手間を割愛できる
- カンプ(psd、png)は、レイヤーをグループ化しておく。グループやレイヤーには名前をつける