21 Apr 2012

”Crash Course: Design for Startups” メモ

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

Paul Stamatiou は Notifo, や 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 (いつもデザインするときの流れ)
- ターゲットオーディエンスの定義
  - The Five W’s of UX - 52 Weeks of UX
- 上記で定義したターゲットから, どのようにレイアウトするか考える
  - 近いサイトを幾つかピックアップ
- レイアウトをスケッチする
  - 手書き
    - UI Stencils - Goods for Interaction designers, UX designers, Visual Designers & Product designers.
  - または photothop など
  - とにかく変更しやすい方法で
- スケッチを html にする
  - 20 分くらいでさっと
  - sass, chrome dev tool を活用
- chrome dev tool でいろいろパラメータを変えて, スクリーンショットをとる
- グレイスケールでレイアウトして, カラーを考える
  - no title
- 色調整, タイポグラフィの調整はいつも最後まで行う
- ここまではだいたい "ホームページ" のための作業
  - ここまででできたなんとなく頭の中にあるコーディング規約に従って, 他のページの要素, サイドバーやセカンダリーナビゲーション, コンテンツページ, などの調整をする
- フィードバックと改善

Required Reading
- Universal Principles of Design や The Design of Everyday Things のデザインの名著でもいいけども, ここでは web グラフィックデザインにフォーカスする
- Non-Designer’s Design Book
  - 色の理論の基礎と C.R.A.P (コントラスト, 繰り返し, アラインメント, 近接) を学ぶ
- Five Simple Steps - A Practical Guide to Designing for the Web
  - だいたい網羅されていておすすめ
  - 自分は作者を応援するために買ったけど, 無料でも読める
- The Elements of Typographic Style Applied to the Web
  - Web デザインにおけるタイポグラフィならこれ

More Homework
- Typekit のアカウントをとって font をブラウズ, 構造を見たり, font stack について学ぶ
- 実際にサイトで使ってみる. フォントのフォールバックを忘れずに
- Lettering.js を学ぶ
- Web デザイナはタイポグラフィを見落としがち. 良いデザイナはテキストを UI として扱う
- Principles of grouping - Wikipedia, the free encyclopedia
- Particletree » Visualizing Fitts’s Law
- The Meaning of User Experience | User Intelligence

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

Try New Things

UX
- 52 Weeks of UX

More books..