Design

エンジニアがデザインの設計を学ぶのに良いサイトまとめ

More than 1 year has passed since last update.

デザインにもシステムと同じように設計と実装があると考えるなら、今回は設計に役立つツールばかりを集めた。

colourlovers

http://www.colourlovers.com/

  • 「[ベースカラー:メインカラー:アクセントカラー=7:2:1]の色が決められないんじゃボケぇ」って思ってたら出会った
  • 色も設定より規約(CoC)」ということで、色パターンパクる。デザインセンス皆無なのでテンプレを繰り返すのじゃ。
  • [地味な色:好きな色:目立つ色]って考えたら覚えやすかった

colourco.de

http://colourco.de/

  • 色々な色を試せる
  • 「和風」「中華風」「欧風」「フラット」みたいに自分でテーマを決めて色を並べるの楽しい。
  • とにかくたのしい

美的センスを養う

Pttrns

http://pttrns.com/

  • スマホデザインの宝庫
  • モーダルとか読み込み時とかちょっとした背景とか勉強になる
  • その画面を構成要素に分解すると、割と技術的には簡単だったりする。「モーダルウィンドウ+おしゃれフォント+ピントずらした写真」とか。

mobile patterns

http://www.mobile-patterns.com/

  • 同上
  • ひとつのアプリを徹底的に掘り下げているので一貫した狙いみたいなものが分かるし、こちらのほうが好き

dribbble

http://dribbble.com/

  • 有名ですけど、ロゴとかアイコンとかがたくさん
  • 単体でみると「わーすごい」で終わる
  • 「これはどのような技術で実現されているのか」という視点大事
  • 「これはどのようなケースに使えるか」という視点大事

プロトタイプを作る

Prototyper Pro

http://designup.jp/app-prototype-justinmind/

  • ウェブとモバイルのワイヤーフレームを作るためのテンプレが豊富
  • Xcodeのstoryboardより使いやすい

Pop

http://www.glpgs.com/d-blog/archives/600

  • iOS/Android両対応
  • 手書きワイヤーフレームを撮影して画像取り込み
  • 手書きワイヤーフレームにボタンをつけて使用感を速攻試せる
  • 手書きのほうがワイヤーフレーム作成スピードが速いので重宝
  • 実際の操作感をテストするルーチンが細かく回せるので、使用感を容易に煮詰められる点が優秀。失敗できるのは素敵。