1月の授業日記

1/9 サイトの構成

ワイヤーフレーム

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

今日のひとこと

🎍あけましておめでとうございます。今年もよろしくお願いします。🌅

XDを触るのが久しぶりだったので少し戸惑いました。コピーしたものを一回でペーストできるのが感動的でした。

XD って未知数ですね😊

1/16 サイトのデザイン

コンテンツの構成

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

デザインの実装を分離

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

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

デザイン

デザインテイスト

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

複数案

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

A案

明るい雰囲気で作りました

B案

素材を組み合わせる事で総合デザイン科の多様性を表現しました。

今日のひとこと

XDを使いこなすのが難しいですね😂

i1/23 デザイン

カラースキーム

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

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

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

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

デザインカンプ

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

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

今日のひとこと

自分でやってみるとサイトの構成を考えて制作するのは以外にも大変だなと感じました。

いいページを作るには努力をしなければいけないと思いました。