読者です 読者をやめる 読者になる 読者になる

以下斜め読んだ内容

pseudo translation of useful posts, book reviews, remarks,etc. twitter: feeddict

斜め読み

Other
//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を作って、各ページ、各状態が一覧できるようにする
      • 開発者が使うリファレンスになる。
    • 色見本を作成する。
      • 開発者が何度も何度もカラーピッカーを使う手間を割愛できる