1月の授業日記

1/9サイトの構成

ワイヤーフレーム

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

    • 今日の一言

    問題なく終えられた。

    1/16サイトのデザイン

    コンテンツの構成

    1. 要素の抽出

      2. ・順目名を全てあげる

    2. カテゴライズ

      3. ・グループごとにまとめる

    3. インデックス付け

      4. ・グループにふさわしい見出しをつける

      ・一般的なキーワード＝スキーマ

    デザインと実装の分離

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

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

    •  

    デザイン

    デザインテイスト

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

    複数案

    クライアントがする場合、複数案を与えて選ばせることで制作へのと選択へのと責任感を共有してもらえる

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

    • 1/24 デザイン

    　

    カラースキーム

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

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

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

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

      • デザインカンプ

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

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

    今日の一言

    スムーズに終えられた。