UXスケッチについて知っておくべきことすべて

公開: 2022-03-11

何か真面目なクリエイティブな仕事をしたことがあるなら、あなたはクリエイティブブロックに精通しすぎています。 レンガの壁にぶつかったような気がします。視覚化できるアイデアはどれも十分に優れていないか、実際には機能しません。

デザイナーにとって、その感覚はあまりにも馴染み深いものです。 ただし、明確な解決策がない複雑な問題と同様に、スマートなプロセスですべての違いを生むことができます。 これがUXスケッチの出番です。

UXスケッチは、ユーザーエクスペリエンスデザインの重要な側面ですが、見過ごされがちです。 スケッチは、設計者が多数のアイデアを試して、1つに落ち着く前にそれらを繰り返すことを可能にしながら、設計を伝達する非常に効率的な方法です。

この投稿では、次の点を含め、UXスケッチについて知っておく必要のあるすべてをカバーするつもりです。

  • UXスケッチとワイヤーフレームの紹介
  • UXスケッチの基本、ツール、テクニック
  • メモ、注釈、数字でスケッチを明確にする
  • UXスケッチのヒントとコツ
  • 品質と生産性を高めるために設計されたミニメソッド
  • ワイヤーフローについて知っておくべきことすべて
  • UXフロースケッチのクイックガイド

UXスケッチは2段階のプロセスです

設計では多くのオプションを考慮する必要があり、その結果、最適なオプションが選択されて実行されます。 設計者はオプションを検討してから詳細を検討し、UX設計を2段階のプロセスにします。

Uxスケッチ

  • アイデア創造

最初のステップでは、複数のアイデアが生成されますが、それらを完全に形作ることはできないため、一部の要素が不完全または欠落していることは珍しくありません。 主なことは、さまざまなアプローチを検討し、タスクとプロジェクトのさまざまな制約のコンテキストで最も効率的なアプローチを決定することです。

  • 詳細と改良の追加

ステップバイステップで、いくつかの有望なバリエーションを決定し、詳細を検討します。そのため、いくつかのアイデアは不適切になります。

UXスケッチとワイヤーフレーム:はじめにと分類

ワイヤーフレームは、必要な詳細レベル、色、スタイル、誰かに見せるかどうかなどの要因によって異なる場合があります。

UXスケッチとワイヤーフレーム
優れたスケッチは、より明確に考え、より良い解決策を見つけ、時間を節約するのに役立ちます。

次のスケッチタイプを選び出しました。

  • スケッチ:アイデアの生成

これらは最初のスケッチです。 下位レベルの詳細は単に注記されています。 限られた数の色が採用されています。

さまざまな角度から問題を検討し、さまざまな解決策を検討するために、多くの基本的なスケッチを描きます。 そのようなスケッチを描きながら、私はできるだけ多くのソリューションバリアントを生成するようにも努めています。

この特定のステップでは、不完全さが私の心を解放します。そのため、この段階で細目で行き詰まらないようにすることが非常に重要です。 私の目標は、できるだけ多くのアイデアを生み出し、最も有望なアイデアを選択することです。

  • ワイヤーフレーム:仕様、詳細フェーズ

私は通常、有望なスケッチを選び、詳細を確認します。その後、最適なバリアントを選択して、より詳細に作成します。

ただし、これはすべての詳細を意味するわけではありません。 明らかなことに注意する必要があります。 さらに、いくつかの側面は紙で説明するのが難しいでしょう。

このステップでは、すべての重要な詳細を描画しますが、Balsamiqではまだワイヤーフレームを描画していません。 紙にすべてが終わったら、Sketchで描き始めます。

デジタルツールは紙よりもはるかに創造的な自由を提供し、あなたは簡単に小さなことに注意を向けることができます。 たとえば、デザインではなく「ピクセル研磨」に焦点を当てることができます。

  • ビジュアルデザインドラフト

これはめったに使用されないアプローチですが、役立つ場合もあります。 プロジェクトの初期段階ではさまざまなビジュアルソリューションが検討されていますが、それらすべてのデジタルスケッチを作成するには長い時間がかかる場合があります。 そのため、私は最初に紙にデザインスケッチを描き、さまざまなオプションを検討し、視覚的なデザインの方向性を選択します。

  • コンポーネント/要素の内訳

この手法は、すでに一般的なアイデアがあり、特定のページ機能やインターフェイスコンポーネントの不可欠な部分について考えている場合に役立ちます。 さまざまなページ要素を描画し、詳細を調べてから、ページ要素のさまざまな可能な位置を描画します。

要素は、最も単純なものであっても、状態を持っている必要があります。 ボタンを押すことができ、空の場合と空でない場合のホバーテキストブロックがあります。 複雑になるほど、状態が多くなります。

UIのスケッチ

基本入門

  • ツールを準備します。 可能な限り最も便利な場所、十分なスペースのある大きなテーブルを見つけてください。 たくさんの紙を取り、いくつかのペンとマーカーを準備します。
  • 準備し始める。 準備のために、線、円、基本的なテンプレート、アイコンを描くことをお勧めします。
  • 目標を定義します。 描きたいものを決めます。 あなたの目標を設定し、あなたが伝えなければならない物語を決定します。 必要な詳細レベルを決定します。 たくさん描く準備ができているかどうかを判断します。
  • ターゲットオーディエンスを定義します。 自分でこれを行う場合は、スケッチの外観を気にする必要はありません。 ただし、図面をクライアントに表示する場合は、スケッチに詳細を追加するために少し時間を取ってください。
  • 時間枠を設定します。 スケッチに割り当てる準備ができている時間(たとえば30分)を決定すると、作業に集中するのに役立ちます。

これで、すべての設定が完了し、開始できます。

  • エッジを描画します。 フレーム、ブラウザまたは電話ウィンドウ、インターフェイスの一部などを描画します。

  • メニュー、フッター、メインコンテンツなど、最大または基本的な要素を追加します。

  • 詳細を追加します。 関連する詳細を追加しますが、この段階では単純にしてください。

米国を拠点とするフルタイムのフリーランスUXデザイナーが望んでいた

  • 注釈とメモを追加します。 これらは、スケッチを共有することを計画している場合にのみ必要です。 ただし、目だけで行う場合でも便利です。

  • 代替案をスケッチします。 ソリューションの簡単な代替案をいくつかスケッチします。

  • 最適なソリューションを選択してください。 最適なオプションを選択してください。

  • 影と斜角を追加します。 これは、共有の目的で特に重要です。 スケッチを視覚的に魅力的なものにするために影を追加します。これは、チームメンバーやクライアントと共有する場合に重要です。

  • スケッチを保存します。 写真を撮るか、フォルダに入れます。 スケッチ用の用紙トレイがテーブルにいくつかあります。

  • 共有。 私は通常、次の共有方法のいずれかを使用します。
    • Evernoteを介してスケッチをスキャンし、他のチームメンバーや利害関係者にパーマリンクを提供します。
    • 写真を撮り、InVisionにアップロードします。
    • 画像をRealtimeboardにアップロードしてマッピングします。
    • または、写真をメールで送信してください。
  • スケッチを確認し、メモを追加します。 休憩して、しばらくしてからスケッチに戻ってください。 それらをもう一度見てください。 スケッチはまだあなたにとって意味がありますか? 良いスケッチは簡単に理解できるものでなければなりません。

UIのUXスケッチ
設計者としてのあなたがスケッチにあるものを理解できない場合、解決策は成功しません。 スケッチではアイデアをうまく​​視覚化できないか、アイデアが複雑すぎます。

追加の要素でスケッチを明確にする

適切なスケッチを見つけるか描画してから、次の詳細を追加します。

  1. タイトル。 場合によっては、タイトルを追加することをお勧めします。 必要に応じて、スケッチの上部に説明と日付を記入します。 タイトルは、あなたが見ているものと、スケッチが関連しているかどうかを理解するのに役立ちます。 これは、スケッチがたくさんある場合や他の人に見せようとしている場合に特に便利です。

  2. 注釈。 注釈は、要素の内容やその他の属性を説明するために、要素の近くに配置される名前とメモです。 それらは他の要素を明確にする詳細を追加し、通常は描くのが困難です。 たとえば、ブロックの名前、インタラクションの詳細、画像の説明、将来のデザインバリエーションのアイデアなどが考えられます。 私の例の1つをチェックして、注釈スケッチがどのように見えるかを確認できます。

  3. 数字。 スケッチの要素、またはスケッチ自体に番号を付けます。 それらの順序を決定できます(たとえば、インタラクションフロー、作成した順序など)。 同僚やクライアントがフィードバックでスケッチ番号を指摘するだけで、コメントがどれを参照しているかがわかるため、ディスカッション(特にリモートディスカッション)でも役立つ場合があります。

  4. 矢印。 矢印を使用して、画面の遷移を示すことができます。 また、スケッチのさまざまな部分を接続したり、一連のアクションを示したりするためにも使用できます。 矢印の意味はさまざまであるため、矢印のすぐ上に、矢印の意味の説明または説明を追加できます。 これは、遷移といくつかの異なる状態を示す基本的なスケッチの例です。

  5. ノート。 注釈と同じように、メモは概念を説明するために使用されます。 ただし、メモは注釈とは配置が異なります。 この例のように、要素にアタッチされていないか、説明されている要素の近くに配置されていません。 メモはページの上部または下部に配置できます。 デザインに含まれていない要素、質問、一般的な説明、スケッチされていないアイデアなどを説明することもできます。

  6. ジェスチャー。 ジェスチャは、タッチデバイスの設計の場合に関連します。 手のジェスチャーを描くには練習が必要な場合があります。 さまざまな種類のアクションを示すために使用されるジェスチャにはいくつかのバリエーションがあるため、特定のアクションをどのように指定するかを事前に決定し(もちろん、明確でない場合)、それを描画する練習をすることをお勧めします。

  7. フィードバック。 スケッチを他の人に見せた後、または自分でもう一度見た後に、スケッチを修正または改善するための提案を受け取る場合があります。 フィードバックを元のスケッチと区別しやすくするために、このようなフィードバックを別の色でマークすると便利なことがよくあります。

さまざまな種類の要素にさまざまな色を使用できます。 時々、私は図面に黒、リンクに青、メモに濃い緑、タイトルとフィードバックに赤を使用します。 スケッチで異なる色を使用するようにしてください。ただし、色の選択が一貫していることを確認してください。

UX

より具体的なヒントとコツ

  1. 品質は気にしないでください。 Dribbbleのスケッチを見ないでください。 彼らは完全に異なる何かについてです。 スケッチの主な目的は、より明確に考え、より良い解決策を見つけ、時間を節約することです。

  2. 練習。 まず、いくつかのアプリを描いてみることができます。 Webまたはモバイルアプリを開き、メモの要素を説明して画面をコピーしてみてください。 自由な時間があるときはいつでも、デザインの基本的な構成要素を描く練習をしてください。 一般的に、練習は完璧になります。 しばらくすると、それはあなたのデザイナー自身の一部になるでしょう。

  3. フォルダを購入します。 私はオフィスではなく、カフェや自宅で仕事をすることがよくあります。 紙のスケッチは非常に損傷しやすいので、安全で健全な状態に保つためにシンプルなフォルダーを購入してください。

  4. どこへ行っても道具を持っていきましょう。 これにより、いつでもアイデアを紙に書き留めることができます。そうしないと、考えを失ったり、十分に詳細に思い出せなくなったりする可能性があります。 私はいつもメモ帳、数枚のA4シート、そしてペンを持っています。

  5. 他の人と共有します。 他の人と関わり、チームとコミュニケーションを取ることは非常に重要です。 特に早い段階で他の人を巻き込み、フィードバックを得ることが、長期的には時間とリソースを節約するのに役立ちます。 また、他の人にデザインを思い描く方法で描くように勧めることもできます。

  6. 用紙トレイ。 作業台に用紙トレイを置くことを考えてください。 たとえば、私はそれらのうちの3つを持っています:入ってくるタスクのために、スケッチのために、そしてきれいな紙のシートのために。

  7. 実験してカスタマイズします。 私の推奨事項は私の経験に基づいています。 やがて、あなたは自分に最も適したものを見つけるでしょう。 どの方法、どの一連のステップ、何があなたの創造的な可能性を正確に満たすか。 常に新しいことを試してみて初めてそこにたどり着きます。そのため、さまざまなフォーマットやスタイルを試し、新しいテンプレートを試すことが重要です。

  8. テンプレートを使用します。 テンプレートは時間を節約し、フォーマットの制限を暗黙的に考慮して、重要なことに集中するためにより多くの時間を解放します。

スケッチを改善するための追加のミニメソッド

これらは必ずしもヒントやコツではありませんが、生産性を高めたりスケッチの品質を向上させたりするための方法、ツール、提案のコレクションです。

UXのためのスケッチ

  1. スケッチボードを作成します。 デジタルスケッチツールの代わりにペンと紙を使用する最大の利点の1つは、実際に壁に貼り付けることができることです。 チームの全員がそれを見て参加できます(ただし、レビューセッションを設定することをお勧めします)。
    • 自分でスケッチを見ることができます。これにより、思考が刺激され、孤立した部分ではなく、システム全体の全体像を見ることができます。 パーツ間の相互作用と、パーツが互いにフィットする方法がわかります。
    • スケッチボードを作成します-ホワイトボードスケッチを添付します。 オフィスにホワイトボードがない場合は、2倍のサイズの粘着テープまたは付箋紙を使用してスケッチを壁に貼り付けることができます。 壁にくっつきたくない場合は、代わりに大きな段ボール紙を見つけることができます。 スケッチボードは最高のデザインツールの1つなので、使用することを強くお勧めします。
  2. ホワイトボードを使用します。 ホワイトボードは優れた描画ツールです。 これにはいくつかの利点があります。
    • 共同作業であり、他のチームメンバーをディスカッションや図面に参加させるのも簡単です。 彼らの考えがうまく合わなくても、あなたは彼らの考え方を理解するでしょう、そしてそれはあなたが同じページにいるのを助けるでしょう。
    • マーカーを使用すると、詳細に集中できなくなります。一般的なことを考える必要があります。 スケッチは自由に解釈できます。
    • ホワイトボードは、掃除や修正が簡単です。
    • スペースがたくさんあり、システム全体の流れを簡単に考えることができます。
    • 磁石を使ってスケッチ、プリントアウト、参考資料を添付することができます。
  3. プロトタイプ。 クリック可能なプロトタイプを作成して、デザインを評価します。 いくつかの要素についてのフィードバックを得るようにしてください。 これは、テンプレートを使用している場合に特に効果的です。スケッチは同じサイズです。 明らかに、テンプレートを使用している場合は、同じサイズのスケッチを描く方がはるかに簡単です。 ダウンロードして使用できるいくつかのテンプレート(モバイル、ブラウザーマルチウィンドウ、ブラウザースクロール、ペルソナ)を提供することで、さらに簡単にしようと思います。

  4. プリンターとスキャナーを使用します。 フレームワークを手で描画し(定規を使用してより正確に描画できます)、スキャナーまたはモバイルアプリを使用してフレームワークをスキャンして印刷します。 印刷する前に、画像編集ツールでテンプレートを編集できます。 不要な詳細を削除したり、一部の要素を複製したりできます。 既製のサイトページ、写真、その他の説明要素を印刷することもできます。 切り抜きをスケッチに貼り付けることができます。

  5. スキャンにはEvernoteを使用してください。 Evernoteは素晴らしいデザインツールです。 スケッチを保持して共有したり、テーマを作成したり、タグを使用してスケッチを整理したりできます。 「スキャナー」モードの能力は特に印象的です。 スケッチをその前に置くと、スケッチが「スキャン」されるので、スケッチのコピーを取得できます。 次に、同僚をEvernoteに招待して、メモのリンクを提供します。 タブレットや携帯電話用のモバイルアプリがあるので、いつでもスケッチを手元に置いておくことができます。

  6. ハイブリッドスケッチ。 スケッチに生命感とリアリズムを加えるために、それらを写真と組み合わせることができます。 つまり、写真を撮ってから、インターフェイス要素を含むストーリーを描く必要があります。 これは、相互作用の問題や詳細に気付くのにも役立ちます。

  7. 実世界をトレースします。 ストーリーボードを作成し、特定のコンテキストでの体験を説明する必要がある場合(たとえば、バス停でスマートフォンを使用している人)、人、場所、およびさまざまな現実のオブジェクトの描写を含める必要があります。 これらは、特に描画スキルを習得していない場合は描画が難しい場合がありますが、簡単なヒントを次に示します。オブジェクトまたは状況の写真を撮り、画像エディタを使用して主要なオブジェクトの輪郭を取得します。 結果の輪郭は、後でスケッチで使用できます。 もちろん、タブレットとスタイラスをお持ちの場合は、さらに簡単になります。

ワイヤーフロー:システムフローと分岐の概要

ワイヤーフローは、基本的にシステムフローのシーケンスであり、画面ごとに分岐と決定ポイントがあります。 ユーザーがタスクにどのように対処するか、画面間を移動する方法、および時間の経過に伴う製品の全体的なエクスペリエンスを検討する必要があります。

UXスケッチ

ワイヤーフロー、または描画しているものとその接続方法は、次のアプローチに従って編成できます。

  • 順序。 シーケンスは、画面ごとにまっすぐな旅です。 それはまた、決定点のある物語である可能性があります。 旅程だけでなく、ユーザーが選択できる決定ポイントやさまざまなパスも表示します。 画面の相互作用の構造を表示できます。
  • 状態が変化します。 一部の要素のさまざまな画面状態と、これらの状態間の遷移を引き起こす条件またはアクションを示します。
  • 画面と画面要素。 画面全体を描画したり、マイクロインタラクションやインタラクションを検討したりできます。
  • プラットフォーム。 1つのプラットフォームエクスペリエンスまたは複数のプラットフォームを検討できます。
  • 範囲。 ユーザージャーニーの一部またはジャーニー全体を描写しますか? システムとの1人のユーザーの相互作用、または複数のユーザーの相互作用?

私は通常、組織と実際の使用法に応じて、次のワイヤーフロータイプを定義しようとします。

スケッチの状態

  1. 全体的なフローと高レベルのフローのマッピング。 すぐに画面の変化をスケッチし、製品の使用法の一般的な道のりを描きます。 ここでは、コンテキストを含めることができ、オプションでユーザーの操作を表示することもできます。 たとえば、eコマースショッピングサービスは非常に長い道のりであり、ユーザーがショップを見つけた方法、商品を注文するために行った手順、支払い方法など、多くの手順が含まれる場合があります。

  2. 画面の流れ。 これは、システムを介した特定の機能フローに焦点を当てています。 それは、画面の小さな連続したシーケンスまたは分岐を伴う旅である可能性があります。 たとえば、ユーザーが写真やビデオをアップロードしているとします。

  3. ナビゲーションスキーム。 画面とそれに含まれるオプションを描画します。 これは、旅をマッピングすることを想定していません。 このステップには、ユーザーが選択できるオプション、ユーザーの方向性、さまざまなアプリパーツを示す情報が含まれています。 私は通常、プロジェクトの開始時にナビゲーションスキームを作成します。 これは、ナビゲーションをどのように構成する必要があるか(どのポイントを含める必要があるか、いくつのレベルが必要か)を理解するのに役立ちます。

  4. 画面の状態。 画面または要素の状態を描画します(例として、ファイルのアップロードダイアログがあります)。 この場合、たとえば、画面の状態は次のようになります。

    • 空欄
    • ユーザーがアクティブエリアでファイルをプルします
    • ファイルをアップロードしています
    • ファイルがアップロードされます
    • エラーがあります

UXフローのスケッチ:クイックハウツーガイド

ワイヤーフローの設計プロセスは、ワイヤーフレームの設計プロセスと似ています。 多くの手順は類似または同一ですが、いくつかの重要な違いがあります。

描画する必要があるものを定義します。 描きたいものを正確に決定します(たとえば、一般的な歴史やデザインの断片)。 さまざまなオプションを生成しますか、それとも1つの旅の詳細を検討しますか? スケッチを他の人に見せるかどうかを決めます。

図面に含める必要のあるキーフレームとトランジションを定義します。 すべての画面とシフトを追加すると、ワイヤフローは非常に長く複雑になります。 タスクの達成に役立つインタラクションの本質を伝えるために、どのキー画面を表示する必要があるかを検討してください。 画面シフトについても同じことが言えます。 自分の考えを表現するのにどのシフトがより役立つかを選択する必要があります。 この例を参考にしてください。

開始点を定義します。 あなたの旅の出発点は何ですか? エントリポイント、つまり、ユーザーがアプリにログインしたときに表示されるものなど、旅の始まりから始めることができます。 または、中間点から開始することも、最も興味深い/難しい/重要な画面またはプロセスステップから開始することもできます。 または、ユーザーが最終結果を達成して最後から開始し、ユーザーがこの時点に到達するまでに行った手順を説明することもできます。

ユーザーフローのUXスケッチ
アプローチを定義し、一般的な紙のスケッチを作成します。

次に来るものを決定します。 開始手順を描いた後、次の質問に答えて、次に何をするかを決定します。

  • このステップはどのようにユーザーを導きますか?
  • どちらに行きたいですか?
  • 彼らはそこに着くために何をしなければなりませんか?

代替ルート、エントリをスケッチします。 ユーザーが各ステップに到達できる別の方法を考えてください。

  • ユーザーのインターネット接続に障害が発生した場合はどうなりますか?
  • 他にどのようなオプションがありますか?
  • ユーザーまたはアプリのエラーの場合、何がうまくいかない可能性がありますか?
  • このステップでユーザーがアプリを閉じるとどうなりますか?
  • ユーザーが次にアプリを起動したとき、ユーザーはどこから開始しますか?

代替フローについて考えてください。 履歴を分析し、代替フローを設計して、スケッチします。

注釈、メモ、詳細を追加します。 非自明な詳細を明確にする説明要素を追加します。

保存。 スケッチのデジタルコピーを作成します。

共有。 スケッチを共有します(たとえば、EvernoteまたはInVisionを介して)。

重要なUXフロースケッチのヒントとコツ

最初にワイヤーフローをドラフトします。 かなり長い道のりを考える場合は、必要なスペースを理解し、重要な手順や詳細を見逃さないように、簡単なスケッチを作成することをお勧めします。 後でそれらを紙のスケッチに追加するのは難しいでしょう。

詳細が多すぎる巨大な地図を作成しないでください。 紙のスケッチには元に戻すボタンがないため、変更を加えるのは困難です。 詳細を正確に描くと、さまざまな高レベルのバリアントの生成から想像力が失われる可能性があります。 システム全体を説明する巨大なスキームを作成する代わりに、主要なスクリプトに焦点を合わせ、スクリプトごとに個別のページを割り当てるようにしてください。

不要な詳細を切り取り、さまざまな詳細レベルを組み合わせます。 すべてのインタラクションの説明を描く必要はないので、旅の重要な要素のみを使用するようにしてください。 巨大なインタラクションマップを描画している間、すべての画面を詳細に処理する必要はありません。 一部の画面はいくつかの正方形で表すことができ、その他の主要な画面は詳細に作成できます。

さまざまな用紙サイズを試してください。 A3またはA5のさまざまな用紙フォーマットを試してください。 紙のシートサイズはあなたを制限し、さまざまな方法であなたのプロセスに影響を与えます。 小さな紙のシートでは、多くの画面や詳細を追加することはできませんが、主要なアイデアに集中するのに役立ちます。 大きな紙のシートを使用して、1つの大きな旅、多くの詳細、および追加のメモを描くことができます。 または、そこにいくつかの小さな旅をすることができます。

付箋も役立ちます。 付箋を使用することもできます。 別々の画面またはそれらにいくつかの脚注を描くことができます。あるいは、スケッチの要素の追加の状態を描くことができます。 それらの利点は、簡単に交換できることです。また、メモを別の場所に移動することもできます。 たとえば、フローが変更された場合は、付箋の順序を変更するだけです。

テンプレートを使用します。 テンプレートを使用してみてください。 それらは時間を節約し、よりクリックしやすい高品質のプロトタイプを作成できるようになります。

ホワイトボードを使用してみてください。 ホワイトボードには多くの利点があります。 たくさんの枝で巨大な旅を描くことができるので、ますます人気が高まっています。 紙にたくさんのアプリケーションコンポーネントを描いてから、磁石を使ってホワイトボードに取り付けて、旅に追加することができます。

影をスケッチします。 影は重要な要素をマークするのに役立ち、スケッチに視覚的な魅力を追加します。 私は3つの異なるタイプの影を使用します:

  • 光の方向に沿った線-これは必ずしも美しく見えるとは限りませんが、目盛りを使用して、さまざまな「高さ」までオブジェクトをピックアップすることができます。
  • 一部の部分を暗い色で輪郭を描きます(下部または下部と右側のみ)
  • プロマーカー(または描画に使用するアプリでの同等のマーカー)の使用

コンポーネントの描画。 「うまく描けない」などの反対意見は、あなたのイニシアチブを阻害する可能性があります。 実際には思ったより簡単です。 最も複雑なスケッチでさえ、この例のように、一般的にいくつかの基本ブロックで構成されています。 点、線、三角形、正方形、円を描くことができれば、スケッチのために何かを描くために必要な基本的な構成要素があります。

すべてを一緒に入れて。 基本要素、ボタン、ラジオボタン、およびドロップダウンは、基本要素で構成されています。 これらの要素の描画を学習した後、それらを組み合わせて、複雑なブロックやコンポーネントを描画できます。

要約

この投稿の目的は、UXスケッチ、または一般的なスケッチの究極の万能ガイドを作成することではありませんでした。デザイナーにはさまざまなニーズと個人的な好みがあるためです。

ご覧のとおり、これはカバーすることがたくさんあります。 デザイナーは無数のツール、テクニック、アプローチを使用してUXスケッチを作成しますが、それはかなり主観的なものです。 特定の手法は、さまざまなプロジェクトに取り組んでいるさまざまな人々に対して機能する場合と機能しない場合があります。 始めたばかりの場合は、必ず実験する必要があります。 絶え間ない練習と実験は、あなたがあなたのために働くものを見つけるのを助けるでしょう。

プロジェクトと設計へのアプローチに最適なヒントとテクニックを選択するのはあなた次第です。 仲間のUXerのための追加のスケッチのヒントはありますか? コメント欄でお気軽に共有してください。

•••

Toptal Designブログでさらに読む:

  • eコマースUX–ベストプラクティスの概要(インフォグラフィック付き)
  • 製品設計における人間中心の設計の重要性
  • 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例
  • モバイルインターフェースのヒューリスティック原則
  • 予測的デザイン:魔法のユーザーエクスペリエンスを作成する方法