145
149

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-04-04

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

#色

colourlovers

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

colourco.de

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

美的センスを養う

Pttrns

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

mobile patterns

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

dribbble

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

プロトタイプを作る

Prototyper Pro

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

Pop

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
145
149

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?