-本日のアジェンダ-
1限目
実技 ECサイトデザイン実習④
ワイヤーフレーム制作の準備
2限目
実技 ECサイトデザイン実習④
ワイヤーフレーム制作のポイント
3限目
実技 ECサイトデザイン実習④
課題制作
4限目
実技 ECサイトデザイン実習④
課題制作
5限目
実技 ECサイトデザイン実習④
課題制作
制作のポイント
情報をしっかりまとめてからレイアウトを考えると良いでしょう。そのレイアウトが、HTMLとCSSというルールに変わるだけです。
まずは、PCサイズとして下記の例のような、コンテンツ部分が960pxでその外側部分を入れて、1280pxでワイヤーフレームを作成してみましょう。
本日の課題
白黒のワイヤーフレームを作成し5限目までにWordPressにUP
ワイヤーフレーム製作の手順
１）アートボード（推奨）orワークスペースを作成
Photoshop〉新規ドキュメント〉カスタム
幅：1280〉高さ：2000（変更可能）〉ピクセル〉作成
２）〈コンテンツ部分のガイドを作成〉の為に〈長方形〉を作成
長方形ツール〉幅960px〉高さ：2000px〉OK
↓長方形ができました
３）長方形を整列させる
４）長方形がら〈ガイド〉を作成する
ガイド〉シェイプから新規ガイドを作成
↓ガイド線が引かれました
シェイプは不要なので消してOK
５）フッターとファーストビューのガイド線を引く
【フッター】ガイド〉新規ガイド〉70-100px
【ファーストビュー】ガイド〉新規ガイド〉600px
以降は基本自由！！
・高さはアートボードを増やして調整
【本日の課題】
デザインカンプ
次回制作時はデザインカンプを作っていく。
作成したワイヤーフレームに画像や文字を当て込む。
コメント