Adobe XDでデザインのラフを作成し、アプリまたはwebサイトの構造を定義します。その後、デザインの精度を高め、精密なプロトタイプに仕上げます。

ラフなデザインから開始

アプリの構造とフローを決めてから、詳細なデザインの仕上げに移行します。アートボード、プレースホルダーテキスト、基本的なシェイプを追加してデザインを計画し、リピートグリッドを使用して、テキストとオブジェクトのコピーを縦横に配置します。デザイン内でアイテムを繰り返し利用するために、シンボルを設定します。XD用のワイヤーフレームおよびUIキットのテンプレートを活用することで、作業をすぐに開始できます。

アプリのフローを計画

ペーストボードを使って様々なデザイン案を検討し、アートボードで利用する方法を説明します。様々な方向に、リピートグリッドを使い、デザインプロセスを高速化します。リピートグリッドのいずれかのデザイン要素を変更すると、他のセルにもまとめて反映されます。UIキットとワイヤーフレームキットを開き、デザイン要素をドキュメントにコピー&ペーストします。アセットパネルを使い、カラー、文字スタイルなどのドキュメントのアセットを効率的に管理します。

アイコンの描画とグラフィックの操作

長方形、楕円形、線、ペンツールを使用して、シンプルなアイコンを作成します。形状モードによるシェイプの合体、型抜き、交差、中マドを使用してアプリのグラフィックを調整します。Adobe Photoshop CCとIllustrator CCで作成したアイコンとイラストの読み込み、シンボルとリピートグリッドを活用して、デザインを発展させます。

高精度のデザインの作成

アートボードとリピートグリッドに最終画像とテキストを追加し、アプリまたはwebサイトのデザインを仕上げます。シンボルの追加や上書きをおこない、Creative Cloudライブラリから画像を配置し、アセットパネルではカラー、文字スタイルを利用します。

05/10/2018
このページは役に立ちましたか。