Adobe XD CCでランディングページをデザインし、Adobe Photoshop CCのアセットを利用する方法を説明します。XDでワイヤーフレームを手早く作成し、XDでPhotoshopのコンテンツを取り込んで編集することの簡単さを体験します。また、完成したデザインを簡単に共有してフィードバックをすばやく得ることができます。

ランディングページのワイヤーフレームの作成

学習した内容:

  • XDは、ワイヤーフレーム、ラフなデザイン、高精度のデザインなどのUXデザインプロセスのためのアプリです。XDのスピードと柔軟性を活かし、ワイヤーフレームを作成してみましょう。無料のXD UIキットを使ってプロジェクトをスタートすることもできます。

モックアップをワイヤーフレームから高精度のデザインに変える

学習した内容:

  • XDにPhotoshopのデザインを取り込み、デザイン編集をすばやくおこなう
  • CCライブラリを使ってPhotoshopのアセットをXDに取り込む。Photoshopでおこなった変更はXDのデザインに反映される
  • アセットパネルでドキュメント全体のカラーとシンボルを変更する
  • リピートグリッドを使って写真などのデザイン要素を必要なだけ複製する
  • ナビゲーションバーなどの要素を固定し、デザイン内をスクロールしても位置を維持することで、デザインの精度を高める。XDでデザインをプレビューしてページのエクスペリエンスを確認する

プロトタイプを共有してすばやくフィードバックを得る

学習した内容:

  • XDのレスポンシブサイズ変更機能を使って、様々なサイズのデザインに変更する方法
  • プロトタイプを公開し、関係者と共有してフィードバックを受け取る。1か所でフィードバックを集め、フィードバックを解決して同じリンクを更新する
11/12/2018

プレゼンター:Howard Pinsky

このページは役に立ちましたか。