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

ラフなデザインから開始

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

アプリのフローを計画

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

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

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

高精度のデザインの作成

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

07/30/2019
このページは役に立ちましたか。