Picture Perfect: ビジュアルを使用して UX/UI デザイン ポートフォリオを向上させる方法 ケーススタディ

ビジュアルは、UX の最も重要かつエキサイティングな部分の 1 つです。UI デザインのケーススタディ – 作成してエンゲージメントを高めるのは楽しいものです。あなたの努力と独創的なデザインには時間がかかります センターステージ デザイナーとしての能力を発揮してください。しかし、脚光を浴びる可能性があるビジュアルは、最終的なデザインだけではありません。デザイン プロセス全体で作成するビジュアルなものはすべて、ポートフォリオを充実させ、デザイン スキルに対するより深い洞察をもたらします。 UX/UI デザインのケーススタディにどのようなビジュアルを含めることができるか、また覚えておくべき 4 つの貴重なヒント (いくつかの便利なツールも含まれます) を確認してください。

旅は重要: UX/UI ストーリーを伝えるショーケース ビジュアル

「それは目的地ではない、それは旅だ。」

— ラルフ・ワルド・エマーソン、エッセイスト、詩人、哲学者。

UX ケーススタディでビジュアルについて考えるとき、最終的なデザインの美しい画像にすぐに飛びつくかもしれません。しかし、そんなことをすると自分を売り飛ばすことになります。 UX ケーススタディでは、からの道のりのストーリーを伝える必要があります。 問題文 最終的なデザインへ。 最終製品だけでなく、さらに多くのビジュアルを含めることができます。

ケーススタディのビジュアルはポートフォリオのビジュアルアイデンティティと一致している必要があることに注意してください。このビデオでは、ソシエテ ジェネラル CIB のデザイン ディレクターであるモルガン ペン氏が、 ビジュアルデザイン あなたのポートフォリオの：

UX/UI デザインの成果物、ドキュメント、および進行中の作業

ビジュアルを通じてデザインプロセスを紹介します。このアプローチは、設計方法、プロセス、ワークフローを理解していることを証明します。進行中の作品の画像もストーリーを伝えるのに役立ちます。舞台裏のミニドキュメンタリーだと思ってください。

表示できる進行中の作品には次のようなものがあります。

• スケッチ あなたのデザインのアイデア、インスピレーション、紙の プロトタイプ、など。

• ビデオまたは写真 セッションの数。例えば、 ユーザーインタビュー または ユーザーテスト あなたが実施したセッション。

• メモの写真。 これらには、アイデア、インタビュー中に書き留めたユーザーからのフィードバック、同僚からの批評などが含まれます。

• ポストイットまたはホワイトボード ディスカッションで使用したものや、 アイデア出し セッション。これらの画像を使用すると、自分の努力を示すことができ、さらに単語数を抑えることができます。

• ワイヤーフレーム デザインの最初の数回の反復を示しています。

イラストと情報の視覚化

画像以外にも作成できます イラスト デザインプロセスのストーリーを伝えるために。たとえば、次のようにすることができます。

• 使用 チャートとグラフ の結果を視覚化する ユーザー調査、たとえば、オンラインの結果 調査 ユーザー数は 50 人です。 情報の可視化 は、重要なポイントを理解しやすい形式で要約する優れた方法です。

• 描く タイムラインとジャーニーマップ 設計プロセスの概要を説明したり、ユーザーについての理解を説明したりするために使用します。たとえば、ユーザーを使用できます 旅の地図 ユーザーの「人生の 1 日」を強調します。

• 使用 図とグラフ あなたの作品の影響を美的に魅力的な方法で実証します。どれだけ増えたかを視覚的に伝える コンバージョン率、アプリの評判など。

最終製品またはプロトタイプ

採用担当マネージャーはあなたのこれまでの道のりをすべて理解したので、グランドフィナーレの準備が整いました。 UX ケーススタディであなたの素晴らしい最終製品を紹介することを躊躇しないでください。 数枚の写真、ビデオ、またはプロトタイプの埋め込まれたインタラクティブ バージョンを見せて、採用担当者を驚かせましょう。注釈を使用して、設計上の決定事項とユーザーのニーズを満たす最終的な機能を明確に説明します。

あなたが最終デザインを作成したわけではないが、あなたの仕事が最終デザインに貢献した場合、 それでも自分の影響力を強調する必要があります。 おそらく、あなたが実施した一連のユーザーインタビューがアプリのレイアウトを形作ったのでしょう。これらを自慢することを恐れないでください 実績 そしてそれを視覚的に楽しい方法で行います。たとえば、自分の貢献を明らかにするホットスポットを含むアプリのインタラクティブな図を作成できます。

UX/UI デザインの効果を最大化するための 4 つの重要なヒント ケーススタディのビジュアル

UX ケーススタディにどのようなビジュアルを含めるべきかが明確になったので、次はそれらを作成して実装します。これらの 4 つのヒントを参考にしてください。

1. 適切なバランスを取る: ケーススタディ全体にビジュアルを配置する

UX ケーススタディは、最終製品に関するものであると同時に、プロセスに関するものでもあります。これはどれだけ強調しても足りません。あなたの旅の最初から最後までの全体をビジュアルで表現する必要があります。したがって、 UX ケーススタディ全体にビジュアルを展開する必要があります。

デザインプロセスの一部分だけで多くの写真を使用していることに気づくかもしれません。このような場合は、画像を分散して各セクションに十分な数を確保する方法を検討してください。他のセクション用に新しいビジュアルを作成したり、機会を逃した場合にプロジェクト ファイルを再検討したりする必要がある場合があります。

写真と文字のバランスを良くするには、 60% ～ 80% のテキストと 20% ～ 40% の画像を目指します。 この比率により、ユーザーを圧倒することなくプロセスを誇示することができます。ユーザーがより多くの写真を表示できるようにしたい場合は、レイアウトをすっきりと保つカルーセルとスライド ショーが最適なオプションです。

2. ビジュアルを使用してストーリーに命を吹き込む

ビジュアルには、デザイン プロジェクトのストーリーを伝えるという目的があることを忘れないでください。 純粋に画像、グラフ、ビデオを追加しないでください。 美的 理由。 各ビジュアルによってデザイン プロセスをどのように伝えることができるかを考え、そうでない場合は削除します。

たとえば、壁に貼られたポストイットの写真を含めて、強烈な印象を示すことができます。 ブレーンストーミング あなたが行ったセッション。このような写真は、ユーザーの問題に対する解決策を考え出す能力を証明します。

プロトタイプの手描きスケッチの複数の写真のコラージュを作成して、デザインの進捗状況を示すこともできます。プロトタイプは、調査、フィードバック、アイデアに基づいてデザインをどのように開発したかを示します。 重要なのは、追加するそれぞれのビジュアルが目的を果たす必要があるということです。

3. AI を活用してポートフォリオをポップにする

ビジュアル デザインの経験がない場合、UX ケーススタディ用のビジュアルを作成するということに怖気づくかもしれません。しかし、 採用担当者が期待する UX ケーススタディ 良く見えるように—たとえあなたがビジュアル以外の役割を担っているとしても、 UXリサーチャー。結局のところ、UX ケーススタディはそれ自体が設計された製品であり、可能な限りスムーズで快適なものでなければなりません。

の発展のおかげで、 人工知能 (AI) テクノロジーを活用するために、さまざまなツールを利用できます。ケーススタディで AI を活用するためのアイデアをいくつか紹介します。

• AI カラーパレット 発電機 無限のアイデアと選択肢を提供します。あなたのスタイルや個性に合った 1 つまたは 2 つの色を選択し、ジェネレーターに 色 周りのパレット。あるいは、好みの配色が見つかるまで全体の配色をランダム化することもできます。チャートやグラフ、インフォグラフィック、ポートフォリオ全体など、あらゆるものに新しいカラー パレットを使用します。

• AI デザイン ジェネレーター 画像やテキストなどの入力を受け取り、カスタム グラフィックを作成します。たとえば、カラー パレットを使用してケース スタディ用のバナーやポスターを作成できます。

• AIビデオエディター 画像とビデオを組み合わせて魅力的なコンテンツを作成します。たとえば、プロトタイピングまたはユーザー テスト セッションの概要を説明する短いビデオを作成できます。

• AI情報可視化ジェネレーター 数値を魅力的なチャートやグラフなどに変換します。ジェネレーターの速度とオプションを使用すると、以前は想像もできなかったデータを表現する方法が見つかるかもしれません。

4. すぐにアクセスできるように画像を最適化する

私たちデザイナーが UX ケーススタディのビジュアルに関して忘れがちな考慮事項が 1 つあるとすれば、それはファイル サイズの最適化です。 使用する画像が十分に高品質でありながら、データ量が少ないことを確認する必要があります。 採用担当者のエクスペリエンスを損ない、各画像が読み込まれるまでに数秒待たされることは望ましくありません。

画像を最適化するには、次の 3 つのオプションをお勧めします。

• イメージオプティム は、高度なアルゴリズムを使用して画像を最適化する Web および Mac アプリです。この Web アプリには美しいインターフェイスはありませんが、強力な画像圧縮アルゴリズムにより、ファイル サイズを大幅に削減できます。

• タイニーPNG は、よりユーザーフレンドリーですが、PNG に重点を置いた同様の Web アプリです。透明な PNG 画像を圧縮するのに優れています。 JPEG 画像を最適化するには ImageOptim を使用し、PNG 画像を最適化するには TinyPNG を使用することをお勧めします。

• WebP Google によって開発され、Web 用に最適化された画像形式です。低いファイルサイズでも高品質を巧みに維持します。 WebP は画像圧縮プログラムよりも使用が難しいと感じるかもしれませんが、より良い結果が得られる可能性があります。

一般に、各画像を 100 KB 未満に抑えることをお勧めします。ただし、画像の最適化は、画質とファイル サイズのバランスがすべてです。画像を軽量化するために最適化すればするほど、より多くの詳細が失われます。管理可能なファイル サイズを維持しながら許容できる品質レベルを自分の判断で選択してください。

テイクアウェイ

UX ケーススタディにはビジュアルが不可欠です—ビジュアル以外の UX の役割を担っている場合でも。画像は、からの進捗状況を示す必要があります。 スタート地点からゴールラインまで 本当にインパクトのあるものになるように。したがって、最終的なデザインだけでなく、進行中の作品のビジュアルも含める必要があります。また、 ビジュアルを使用してデータをより理解しやすくする—たとえば、あなたが実施したアンケートの結果など。

UX ケーススタディのビジュアルを作成するための 4 つのヒントがあります。

1. 自分のプロセスに集中する最終的なデザインだけではありません。

2. 含めるすべてのビジュアルが役に立つことを確認してください 話をする あなたのプロジェクトの。

3. AIの活用 スキルがない場合はビジュアルを作成します。さらに、時間も節約できます。

4. 画像の最適化を使用して、 ロード時間を最小限に抑える。

視覚化を楽しんでください!

参考文献と詳細情報の入手先

私たちのコースを受講して、その方法を学びましょう 優れた UX/UI ポートフォリオを構築し、夢の仕事を獲得しましょう。

ポートフォリオのスケッチについて詳しくは、Mike Rohde のマスター クラスをご覧ください。 ポートフォリオを向上させる方法: デザインプロセスをスケッチする。

UX Planet を読む UX 成果物の完全なリスト ケーススタディのビジュアルにインスピレーションを与えるために。

私たちの記事、 成功する UX/UI ポートフォリオの作成: AI による最適化では、ポートフォリオで AI を活用する方法に関するアイデアをさらに紹介します。

発見する WebP 形式に関する Google のヘルプ ガイド 画像を簡単に変換する方法を学びましょう。

画像

ヒーロー画像：© インタラクションデザイン 財団、CC BY-SA 4.0