1/9サイトの構成
ワイヤーフレーム
- ページをデザインする元となる設計図
- ナビゲーションや本文の基本的レイアウトをここで決めておく
- 好き嫌いが影響を与えないようデザイン切り離して設計
きょうのひとこと
あけおめ!
1/16 サイトのデザイン
コンテンツの構成
- 要素の抽出
- 項目名を全てあげる
- カテゴライズ
- グループ毎にまとめる
- インデックス付け
- グループにふさわしい見出しをつける
- 一般的なキーワード=スキーマ
- グループにふさわしい見出しをつける
デザインと実装の分離
webではデザインとコーディングが分離されていてデザイン完成後実装に入る
- デザイン修正はコーディングもやり直しになる
- コーディングのしやすさにとらえられずデザインのバランスを保てる
- 実装できるかを考えながらデザインする
デザインテイスト
無意味な作り直しを避けるためにクライアントとどのようなテイストにするかを事前に決定しておく
複数案
A案
- メディアコースは様々なことを学べるのでごちゃごちゃしたイメージをしている
B案
- 手作りで作られたおもちゃをモチーフにした
きょうのひとこと
次時間がある時はもう少し出来のいいのを作りたい
1/23 デザイン
カラースキーム
カテゴリ毎の違いが分かりやすいようにカラーを設計し、それをキーカラーにページを展開する
メニューとタイトルの関係性の整理
メニューをクリックしたところがリンク先だとわかる必要がある
- メニューとタイトルの位置関係
- 極力メニューの近くへ配置し関係性を明確
- カラースキーム
- 統一を図り関係性を明快に
- 表記の統一
- 統一を図り関連性を明快に
デザインカンプ
デザインの完成状態のダミー
- クライアントへのデザインの承認
- 画像パーツはここから切り出しコーディングの承認
きょうのひとこと
XDは使いやすいけど、やりにくい点もあるからややこしい