学科 UI/UXデザインツール概論【オンライン】

-本日のアジェンダ-

1限目
学科 UI/UXデザインツール概論
adobe XDについて

2限目
学科 UI/UXデザインツール概論
adobe expressについて

3限目
学科 UI/UXデザインツール概論
canvaについて

4限目
学科 UI/UXデザインツール概論
LP(ランディングページ)を作るポイント

5限目
学科 UI/UXデザインツール概論
Figmaについて


本日のテーマ

あくまでも、IllustratorとPhotoshopが扱える前提で試してみましょう。

【注意点として】
基本的に商業デザインをビジネスとしている企業がフリーソフトを使って商売をするのはいかがでしょうか?
教室で、有料のソフト(アプリケーション)IllustratorとPhotoshopを扱っているという事を前提に
「やむを得なく使っている」という意識はお忘れなく!
そして、企業が欲しいのはあくまで「作品の質」と「作品の内容」と「作品の目的」である事をアピールできるように進めていきましょう。

参考サイト

【資料】

カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/

下記のファイルをダウンロードしましょう。
1.AdobeXDの教科書.pdf」 
2.より幅を広げる為に.pdf」 

ワンポイントアドバイス

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

XD データ連携について

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

ワンポイントアドバイス

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

参考サイト

【動画】

参考サイト

  • ご紹介③・adobe XD
    【お知らせと注意点】
    以前は無料で利用できるプラン(スタータープラン)がありましたが、現在は公式サイトから見当たらなくなっています。Adobe XDは、2023年1月に単体販売が終了になりました。 現在はスタータープランはダウンロードできなくなっており、無料で利用する場合は7日間の無料体験版 のみになっています。
    ※こちらは教室でお試しください。別動画へ案内
  • ご紹介④ Figma
    ・コラボレーションインターフェースデザインツール –Figmahttps://www.figma.com/ja/

本日の課題

提出課題はありません。
ワイヤーフレームからデザインラフの作成にあたり、情報収集しながらレイアウトやキャッチコピー、文書を推敲しましょう。

第4回成績考査について

課題はバナーのバリエーション展開と、今できているところまでのワイヤーフレーム(進んでいる人はデザインラフ)です。

実技 ECサイトデザイン実習⑤

-本日のアジェンダ-

1限目
実技 ECサイトデザイン実習⑤
Web用画像について

2限目
実技 ECサイトデザイン実習⑤
Web画像の解像度について

3限目
実技 ECサイトデザイン実習⑤
課題制作

4限目
実技 ECサイトデザイン実習⑤
課題制作

5限目
実技 ECサイトデザイン実習⑤
課題制作


本日のテーマ

コーディングの準備をしましょう。

制作のポイント

実務ではデザインラフの制作はお客様と、多くのやり取りが必要になるでしょう。
デザインは必ず複数パターンの提案(最低2パターン)をして、お客様とのイメージの共有を具現化して行けるよう進めましょう。

参考サイト

Web用画像とは?

Web用画像には、 主に「jpg」「gif」「png」「svg」が昨今のWebサイトで使われます。 その特徴と違いを確認しておきましょう。

制作のポイント

ファイル名の命名規則は管理しやすいようにしっかりと考えて付けましょう。

ワンポイントアドバイス

「jpg」「gif」「png」「svg」について、まず悩んだら「jpg」透過表現を必要とすなら「png」、「gif」はアニメーションが必要な時ぐらい、「svg」複雑な画像は重たくなるので、条件次第で使う。と良い出よう。

参考サイト

本日の課題

デザインラフを製作しましょう。
できたところまでのデザインラフをポートフォリオサイトに投稿しましょう。