1/9 サイトの構成
ワイヤーフレーム
- ページをデザインする元となる設計図
- ナビゲーションや本文の基本的レイアウトをここで決めておく
- 好き嫌いが影響を与えないようにでデザインと切り離して設計
きょうのひとこと
あけましておめでとうございます！今年もよろしくお願いします！
今までXDになんとなく苦手意識がありましたが、思っていた以上に使いやすくてプレビューもスムーズで簡単だったので、食わず嫌いせずにちゃんと勉強しようと思いました！
1/16 サイトのデザイン
コンテンツの構成
- 要素の抽出
- 項目名をすべて挙げる
- カテゴライズ
- グループごとにまとめる
- インデックス付け
- グループにふさわしい見出しをつける
- 一般的なキーワード＝テーマ
デザインと実装の分離
webではデザインとコーディングが分離されていてデザイン完成後に実装に入る
- デザイン修正はコーディングもやり直しになる
- コーディングのしやすさにとらわれずデザインのバランスを保てる
- 実装できるかを考えながらデザインする
デザイン
デザインテスト
無意味な作り直しを避けるために、クライアントとどのようなテイストにするかを事前に決定しておく
複数案
A案(未完成)
メディアコースの新しい未来を創るデザインを学ぶことをイメージして制作しました。
若者の街、渋谷を使用して常に最先端を意識して学べるようにという気持ちで作りました。
B案(未完成)
雑貨・おもちゃコースの素朴な面白さをイメージして作成しました。
きょうのひとこと
時間が！！！！足りない！！！！！！！！！
1/23 デザイン
カラースキーム
カテゴリとごとのつがいがわかりやすいようにカラーを設計士、それをキーカラーにページを展開する
メニューとタイトルの関係性の整理
メニューをクリックしたところがリンク先だと分かる必要がある
- メニューとタイトルの位置関係
- 極力メニュー近くへ配置し関係性を明確に
- カラースキーム
- 統一を図り関係性を明快に
- 表記の統一
- 統一を図り関係性を明快に
デザインカンプ
デザイン完成状態のダミー
- クライアントへのデザインの承認
- 画像パーツはここから切り出しコーディングで再現
きょうのひとこと
なんかだんだん様になってきて嬉しいです。
実際のうちの学校のサイトもこんな感じで可愛くて見やすければいいのにな・・・と思います。
それにしてもXDが便利！！！！すごい！！！！！最高！！！！！