Hatena::ブログ(Diary)

AI戦記 Twitter

2014-07-05

ウェブデザインをはじめるあなたへ

ウェブデザインについてまったくわからない頃によく見て勉強してた資料群です。+いくつかの自分で作った資料

SlideShare

色彩センスのいらない配色講座
  • 色相、明度、彩度で色を説明できるようになる。
  • ベースカラー、メインカラー、アクセントカラーで配色を説明できるようになる。
  • その上で、あまり間違いのない色の選び方がわかるようになる。

ノンデザイナーのための配色理論
  • 最後に紹介されているこのツールがベースカラー、メインカラー、アクセントカラーを決める上で便利。

ウェブサービスの企画とデザイン
かんたんキレイなウェブデザイン

書籍

インタフェースデザインの心理学―ウェブやアプリに新たな視点をもたらす100の指針
  • ウェブデザインについて科学的に考える。
  • たぶんセオリーが身につきます。

レスポンシブ・ウェブデザイン標準ガイド あらゆるデバイスに対応するウェブデザインの手法

ウェブサイト

Twitter Bootstrap
  • コンポーネントが充実している
  • そのまま使うと "Bootstrap 臭" がすごいので、LESS(か SASS)でカスタマイズするのがおすすめ。

頭のなかにある言葉

  • Design ≠ Art. Design は問題解決
  • ワイヤフレームで示すのは情報の優先順位

普段趣味でかんたんなウェブページを開発するときによくやる作業の流れ

  1. 何をつくるか考える。ペルソナ、シナリオ、ユースケースを明確にする。(Evernote でのメモ書き作業)
  2. ウェブページで見せる内容を考えて、優先順位をつける。(Evernote でのメモ書き作業)
  3. 優先順位に沿って、ワイヤフレームに素材を配置する。(A4 紙+鉛筆での作業)
  4. ウェブページのコンセプトを考えて、配色を考える。(COLOURloversとか使う)
  5. 余裕があれば、カンプをつくる。(Illustrator での作業)
  6. レスポンシブデザインにするときは、Mobile, Tablet, Desktop の 3 パターンくらいでワイヤ、カンプを書いて DOM をどう配置するか考える。
  7. Twitter Bootstrap を LESS の状態で落としてくる。
  8. variables.less に色設定があるので、予め作った配色を反映させる。
  9. Twitter Bootstrap のマニュアルを見ながら、開発を進める。

ウェブページを作る際の参考になれば幸いです。

lunapiglunapig 2014/08/21 16:12 仕事がほちぃ

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/tushuhei/20140705/1404530891