学科 XD基礎

-本日のアジェンダ-

1限目
学科 XD基礎
XDについて

2限目
学科 XD基礎
XDの使い方について

3限目
学科 XD基礎
データ連携について

4限目
学科 XD基礎
課題制作

5限目
学科 XD基礎
課題制作

本日のテーマ

adobe XD です。

adobe XD とは?

Adobe XDは、アドビが販売しているベクターベースのプロトタイピング作成ツールである。 ウィキペディア

参考サイト

【資料】

Dropboxにある資料をダウンロードしましょう。
作品制作のポイントをまとめた資料です。

[保存場所]
Dropbox / DEAUアカデミー WEBデザイナー養成科 (短時間) / 資料 / 【STEP4】/Webページの制作/「AdobeXDの教科書.pdf」

ワンポイントアドバイス

XDはまだ求人票で必要なスキルと掲載は少ないですが、取り入れている企業と、取り入れているデザイナーさんは増えています。
まずは、基本操作と利点などをしっかりと確認しておきましょう。

XD データ連携について

Adobe XD では、Photoshop や Illustrator などの他のアドビアプリケーションからデザイン素材を読み込むことができます。XD では、これらのデザイン素材をさらに拡張することも、これらのデザイン素材を使用してインタラクティブプロトタイプを作成することもできます。

ワンポイントアドバイス

実際のお仕事では、お客様とのやり取りに合わせて連携方法が変わるでしょう。必要に応じて、ai(Illustrator)なのかpsd(Photoshop)がいいのか、XDがいいのか、お客様に合わせて判断していきましょう。

参考サイト

本日の課題

ワイヤーフレームを作成し、
5限目までにドロップボックスにUPしてください。

今日の時点できたところまでの成果を必ず上げるようにしてください。
※ファイル名は、work_xxxx_20230710.jpg
※ワイヤーフレームができたら、デザインカンプ制作に入っても良いです。

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

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎①
ワイヤーフレーム制作の準備

2限目
学科 レイアウトデザイン基礎①
ワイヤーフレーム制作のポイント

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

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

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

本日のテーマ

早速作ってみましょう。

制作のポイント

情報をしっかりまとめてからレイアウトを考えると良いでしょう。そのレイアウトが、HTMLとCSSというルールに変わるだけです。
まずは、PCサイズとして下記の例のような、コンテンツ部分が960pxでその外側部分を入れて、1280pxでワイヤーフレームを作成してみましょう。

ワンポイントアドバイス

ワイヤーフレームの段階では、お仕事の契約成立に至っていない場合が多いです。逆を言えば、しっかりとしたワイヤーフレームを作成できるという事は、「仕事を獲得できる力がある」という証明にもなります。お客様のご要望(相手の気持ち)をしっかり理解する事を心掛けて制作をしてみましょう。

本日の課題

白黒のワイヤーフレームを作成し、
5限目までにドロップボックスにUPしてください。
今日できたところまでで大丈夫です。
※ファイル名は、work_xxxx_20230708.jpg