学科 レイアウトデザイン基礎①

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎①
デザインラフ作成

2限目
学科 レイアウトデザイン基礎①
デザインラフ作成

3限目
学科 レイアウトデザイン基礎①
ワイヤーフレームについて

4限目
学科 レイアウトデザイン基礎①
課題制作

5限目
学科 レイアウトデザイン基礎①
課題制作

本日のテーマ

ワイヤーフレームを作成しましょう

サイト制作課題

期日を意識して、制作を進めてみましょう。

10月9日(金)までに提出・「デザインカンプ」★
10月16日(金)までに提出・「WebサイトPC版(途中報告) 」
10月23日(金)までに提出・「Webサイトスマホ版(途中報告)」
10月27日(火)第4回成績考査・「Webサイト(出来たところまで!)」

ワイヤーフレームの作り方

ワイヤーフレームの作り方完全ガイド
1カラム?2カラム?3カラム?サイトの目的に合ったデザイン構成とは
(「ワイヤーフレーム」等で検索)

ワイヤーフレームの前に…
一度、ラフの手書を試してみましょう。
ディレクター必見!WEBサイトのラフを超簡単に・フレキシブルに作る方法
(「Web ラフ」等で画像検索)


ワイヤーフレーム作成(PSD)

制作課題のカンプサイズ( PC版 )は、幅1,280px、コンテンツは960pxに収めるよう作成する。

  1. 新規作成(Web)時、幅1,280pxで作成する。アートボード外しておく、高さは適宜調整する。
  2. 表示メニュー→新規ガイド作成:垂直・50%
  3. シェイプで幅960pxの長方形を作成し、カンバス中央に整列
  4. 長方形の左右にガイドを引く
  5. ガイドをロックする