1月の授業日記

1/9 サイトの構成

ワイヤーフレーム

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

今日のひとこと

あけましておめでとうございます。一年あっという間でしたね。残り一年ですがよろしくお願いします。今日はXDを主にやっていきましたがやはりこちらの方がやりやすかったです。

(C)2019 yboku

1/16 サイトのデザイン

コンテンツの構成

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

デザインと実装の分離

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

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

デザイン

デザインテイスト

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

複数案

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

A案

・色とりどりの花火を取り入れて「色んな表現力を引き出せる」という強みを打ち出してみる

B案

 

今日のひとこと

Webデザイナーになるために最低限のHTMLとコーディングを覚えておかないといけないのは、今日の授業で学べたと思います。

1/23 デザイン 

カラースキーム

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

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

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

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

デザインカンプ

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

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

 

今日のひとこと

まだ途中なので家でできたらやろうと思います。