1月の授業日記

ワイヤーフレーム

• ページをデザインする元となる設計図
• ナビゲーションや本文の基本的レイアウトをここで決めておく
• 好き嫌いが影響を与えないようデザインと切り離して設計

きょうのひとこと

今年もよろしく

コンテンツの構成

1. 要素の抽出
   • 項目名を全てあげる
2. カテゴライズ
   • グループ毎にまとめる
3. インデックス付け
   • グループにふさわしい見出しをつける
     • 一般的なキーワード＝スキーマ

デザインと実装の分離

web ではデザインとコーディングが分離されていてデザイン完成後実装に入る

• デザイン修正はコーディングのやり直しにつながる
• コーディングのしやすさにとらわれずデザインのバランスを保てる
• 実装できるかを考えながらデザインする

デザイン

デザインテイスト

無意味な作り直しを避けるためにクライアントとどのようなテイストにするのかを事前に決定しておく

複数案

A案

• 横浜をイメージしたモチーフで地域性を打ち出す

B案

• 授業や作品などで学生生活をカジュアルに表現

きょうのひとこと

次回は全体のデザインを完成させます

カラースキーム

カテゴリ毎の違いが分かりやすいようにカラーを設計し、それをキーカラーにページを展開する

メニューとタイトルの関係性の整理

メニューをクリックしたところがリンク先だとわかる必要がある

• メニューとタイトルの位置関係
  • 極力メニューの近くへ配置し関係性を明確に
• カラースキーム
  • 統一を図り関係性を明快に
• 表記の統一
  • 統一を図り関連性を明快に

デザインカンプ

デザインの完成状態のダミー

• クライアントへのデザインの承認
• 画像パーツはここから切り出しコーディングで再現

きょうのひとこと

次週からコーディング