21 Apr 2012

”Crash Course: Design for Startups” メモ

no title を読んだメモ. 自分に必要なところだけメモっただけなので原文にあたるようにしていただけると.

Paul StamatiouNotifo, や Pic A Fight のデザイナ. 彼による Web デザインについてのスタートアップガイド.


  • Subtle is key! Except when it's not.
    • 覚えたてのテクニックを使いたくなりがち
      • text-shadow や border-radius やグラディエントや
    • 不必要に細部に凝りすぎるのは危険

  • Get Inspired and Stay Thirsty My Friends Organized
    • いいデザインはクリップしておく
    • LittleSnapper を使っている

  • Process (いつもデザインするときの流れ)
    • ターゲットオーディエンスの定義
    • 上記で定義したターゲットから, どのようにレイアウトするか考える
      • 近いサイトを幾つかピックアップ
    • レイアウトをスケッチする
    • スケッチを html にする
      • 20 分くらいでさっと
      • sass, chrome dev tool を活用
    • chrome dev tool でいろいろパラメータを変えて, スクリーンショットをとる
    • グレイスケールでレイアウトして, カラーを考える
    • 色調整, タイポグラフィの調整はいつも最後まで行う
    • ここまではだいたい "ホームページ" のための作業
      • ここまででできたなんとなく頭の中にあるコーディング規約に従って, 他のページの要素, サイドバーやセカンダリーナビゲーション, コンテンツページ, などの調整をする
    • フィードバックと改善


  • But Stammy, we launch in one week!!?!111
    • 良いアイコンセットを買う
    • クリックできるものはすべて hover や action の素材を準備する
      • フィードバック重要
      • LoVe HAte: link, visited, hover, active
    • とにかくアラインさせよ
    • テクスチャ
    • プレインなエッジではなくて, 1px のラインを入れる. "rgba(255,255,255, [value from 0-1])"
    • 個別の要素のスタイリングは UI-Patterns.com
    • より空白を
      • 要素間の空白は, だいたいフォントサイズくらいとればいい
    • たくさんのリストの要素はゼブラカラーに
    • form input には padding を. スタンダードでないフィールドには tooltip で説明を. ":focus" もスタイリングする
    • 一番大きな要素は, 一番重要な情報になってる?
    • スペースになんでもつめこもうとしないこと
    • 余裕があったら A/B テスト
    • その他いろいろ
  • Try New Things