Crash Course: Design for Startups — PaulStamatiou.com を読んだメモ. 翻訳ではなく自分に必要なところだけメモっただけ.

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
  • 上記で定義したターゲットから, どのようにレイアウトするか考える
  • 近いサイトを幾つかピックアップ
  • レイアウトをスケッチする
  • 手書き
    • Stencils, Sketch Pads & Accessories for User Interface Design — UI Stencils
  • または photothop など
  • とにかく変更しやすい方法で
  • スケッチを html にする
  • 20 分くらいでさっと
  • sass, chrome dev tool を活用
  • chrome dev tool でいろいろパラメータを変えて, スクリーンショットをとる
  • グレイスケールでレイアウトして, カラーを考える
  • Review: Iconfactory xScope — PaulStamatiou.com
  • 色調整, タイポグラフィの調整はいつも最後まで行う
  • ここまではだいたい “ホームページ” のための作業
  • なんとなく頭の中にあるコーディング規約に従って, サイドバーやセカンダリーナビゲーション, コンテンツページ, などの調整をする
  • フィードバックと改善

• 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

  • 良いアイコンセットを買う
  • Picons | Vector Icons and Pictograms
  • Pictos
  • Helveticons
  • クリックできるものはすべて hover や action の素材を準備する
  • フィードバック重要
  • LoVe HAte: link, visited, hover, active
  • とにかくアラインさせよ
  • 色
  • Color Trends + Palettes :: COLOURlovers や 0to255 でピックアップ
  • テクスチャ
  • 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..

  • Envisioning Information
  • The Elements of User Experience
  • Don’t Make Me Think
  • Rocket Surgery Made Easy
  • User Interface Design for Programmers
  • Designing Interfaces: Patterns for Effective Interaction Design
  • The Nature & Aesthetics of Design
  • Designing for the Digital Age: How to Create Human-Centered Products and Services
  • The Humane Interface: New Directions for Designing Interactive Systems
  • The Inmates Are Running the Asylum: Why High Tech Products Drive Us Crazy and How to Restore the Sanity
  • About Face 3: The Essentials of Interaction Design
  • The Smashing Book
  • The Web Designer’s Idea Book #2
  • Designing Interactions
  • The Information Design Handbook
  • Change by Design: How Design Thinking Transforms Organizations and Inspires Innovation
  • The Art of Innovation Lessons in Creativity from IDEO, America’s Leading Design Firm
  • Thoughtless Acts?: Observations on Intuitive Design