1/9 サイトの構成
ワイヤーフレーム
- ページをデザインする
- ナビゲーションや本文の基本レイアウトをここで決めておく
- 好き嫌いが影響を与えない様デザインと切り離して設計
1/16 サイトのデザイン
コンテンツ構成
- 要素の抽出
- 項目名を全てあげる
- カテゴライズ
- グループごとにまとめる
- インデックス付け
- グループにふさわしい見出しをつける
- 一般的なキーワード＝スキーマ
デザインと実装の分離
webではデザインとコーティングが分離されていてデザイン完成後実装に入る
- デザイン修正はコーティングもやり直しになる
- コーティングのしやすさにとらわれずデザインのバランスを保てる
- 実装できるかを考えながらデザインする
デザイン
デザインテイスト
無意味な作り直しを避けるためにクライアントとどのようなテイストにするかを事前に決定しておく
複数案
クライアントが介在する場合、複数案を与えて選ばせることで制作への連帯感と選択への責任感を共有してもらえる
A案
- 横浜をイメージしたモチーフで地域性を打ち出す
B案
- 授業や作品などで学生生活をカジュアルに表現
カラースキーム
カテゴリ毎の違いがわかりやすいようにカラーを設計し、それをキーカラーにページを展開する
メニューとタイトルの関係性の整理
メニューをクリックしたところがリンク先だとわかる必要がある- メニューとタイトルの位置関係
- 極力メニュー近くへ配置し関係性を明確に
- カラースキーム
- 統一を図り関連性を明確に
- 表記の統一
- 統一を図り関連性を明確に
1/24 デザイン
カラースキーム
カテゴリごとの違いがわかりやすいようにカラーを設計し、それをキーカラーページに展開する
メニューとタイトルの関係性の整理
メニューをクリックした所がリンク先だとわかる必要がある
- メニューとタイトルの位置関係
- 極力メニュー近くに配置し関係性を明確にkk
- カラースキーム
- 統一を図り関連性を明快に
- 表記の統一
- 統一を図り関連性を明快に
デザインカンプ
デザインの完成状態のダミー
- クライアントへのデザインの承認
- 画像パーツはここから切り出しコーティングで再現
スペシャルコンテンツ
タイトル：自分のタイトルを入れる
自分の解説を入れる