課題を受け入れ、UXデザインインターンシップで卓越するためのガイド

公開: 2022-03-10

簡単なまとめ↬HRから投資銀行まで、考えられるすべての業界にインターンシップがありますが、UXデザインのインターンシップはどのように見えるでしょうか。この記事では、エリカはグラナダの代理店でのインターンシップ、彼女の仕事は何か、彼女が直面したすべての課題、そして単に何か新しいことを試みることへの恐怖をどのように克服したかについて話します。

これは私のユーザーデザインインターンシップについての話です。あなたのインターンシップが私のようなものになると言っているのではありません。実際、あなたの期待を形作るために私が言えることが1つあるとすれば、それはこれでしょう。それらをすべて脇に置く準備ができているということです。何よりも、学ぶためのスペースと時間を自分に与えることを忘れないでください。私の話は、私がどれだけ苦労したか、そして私の困難にもかかわらずすべてがどれほどうまくいったかを思い出させるものとして共有します。

それはすべて、2018年5月にスペインのグラナダで飛行機を降りたときに始まりました。荷物を片手に、ラップトップを背負って、非常に錆びたスペイン語を頭に抱えていました。ヨーロッパに来たのは初めてで、今後3か月間、BadgerMapsでUXデザインのインターンシップを行う予定でした。私はまだUXでかなり環境に配慮しており、この時点でわずか1年間それについて学んでいましたが、プロの環境で経験を積む準備ができていて、熱心に感じました。

技術的な知識を適用して、自分に割り当てられた実用的な設計タスクを完了する方法を学びました。

Sketchを使用してiOSアプリのデザインシステムを作成します。
データのインポートで発生するエラーを表示する新機能を設計します。
私のデザインを実装するための基本的なHTML、CSS、およびFlexboxを学びます。
AdobeIllustratorとAfterEffectsを使用してアニメーションを作成します。

この記事は私のような初心者を対象としています。この分野を探求しようとしているUXデザインに不慣れな場合は、UXデザインのインターンシップがあなたにとって正しいことであるかどうかを学ぶために読んでください！私にとって、私が完成させた仕事は私の予想をはるかに超えていました。システムを設計する方法、ユーザーのニーズに合わせて設計を妥協する方法、新しい設計を実装する際の課題、および「喜びの瞬間」を作成する方法を学びました。インターンシップでの毎日は、何か新しくて予測不可能なものを提示しました。インターンシップの終わりに、私は自分が何か現実的で具体的なものを作成したことに気づきました。それは、私が苦労していたすべてのものが突然決まったようでした。

おすすめの読み物：一流のグラフィックデザインインターンシップを上陸させる方法

ジャンプした後もっと！以下を読み続けてください↓

第1章：レゴ

私の最初のタスクは、既存のiOSアプリのデザインシステムを作成することでした。私は過去に自分のプロジェクトやアプリケーション用にデザインシステムを作成したことがありますが、それらを遡及的に作成したことはなく、自分のものではないデザイン用に作成したこともありません。割り当てを完了するには、Sketchでモックアップをリバースエンジニアリングする必要がありました。デザインシステムを作成するには、最初にファイルを更新して最適化する必要があります。

プログラムSketchでデザインファイルを整理するスクリーンショット。 — スケッチファイルを整理して、デザインシステムを作成します。（大プレビュー）

また、コンピューターのSketchプログラムが約1年半古くなっていることを知ったのもこの好機でした。新しいバージョンのシンボル、オーバーライド、その他の機能については知りませんでした。教訓：ソフトウェアを最新の状態に保ちます。

プログラムSketchのフッターシンボルとオーバーライド。 — Sketchでフッターを作成してオーバーライドを操作します。（大プレビュー）

シンボルページについて心配する前に、アートボードごとにモックアップアートボードを調べ、それらが更新され、アプリケーションの現在リリースされているバージョンに忠実であることを確認しました。それが完了したら、さまざまな要素のシンボルとオーバーライドの作成を開始しました。ヘッダーとフッターから始めて、そこから先に進みました。

経験則として、要素が複数のページに表示される場合は、それをシンボルにします。ライブラリを構築しながら、デザインシステムにさまざまなアイコンを追加しました。しかし、設計システムは、私が整理しようとするよりも速く進化し、変化していることがすぐに明らかになりました。途中で、シンボルを整理するのをやめ、代わりに、各ページの再作成が完了したら、戻って再編成することを選択しました。モックアップとシンボルの間を行き来するのをやめ、両方の構成について心配するのをやめたとき、私はより効率的に作業することができました。

Sketchのオーバーライドとシンボルを理解するのは簡単でした。これらの機能により、プログラムは私が慣れていたものよりもはるかに強力になり、将来の設計のためにファイルの作業性が向上しました。設計システム自体を作成する作業は、プログラムを深く掘り下げ、アプリケーションの設計のすべての詳細を理解することを私に要求しました。作業中に修正できた間隔、アイコンサイズ、またはフォントサイズの小さな不一致に気づき始めました。

代替テキストの画像が示す内容の説明 — 画像の下に表示されるキャプション。（大プレビュー）

最後のステップは、シンボルページに戻り、すべてを整理することでした。私はすべてのシンボルを取り除き、使用されていないシンボルとレプリカを削除しました。少し退屈ですが、これはプロセスの非常に貴重なステップでした。ドキュメントを読み終えた後、記号を確認することで、各ページの記号をどのように作成したかを再評価する機会が得られました。それらをグループ化することで、アプリ全体でそれらがどのように関連しているかを検討する必要がありました。

この思考過程を経て、ネーミングシステムを作るのがいかに難しいかを実感しました。私は、十分な要素を網羅するのに十分な広さで、曖昧にならないように十分に具体的で、別の設計者が簡単に理解できるシステムを作成する必要がありました。満足のいく実行可能なシステムにたどり着くまでに、数回の試行が必要でした。最終的には、アプリケーションで使用された場所に応じて要素を整理し、リストなどの要素をグループ化しました。これは、アプリのさまざまな機能に対して異なるデザインを持つBadgerのようなアプリケーションでうまく機能しました。最終的な製品は、より整理されたファイルであり、将来の設計の反復での作業がはるかに簡単になります。

ネイティブのアップルアプリに触発された、より大きなヘッダーを備えた新しいデザイン。 — 新しいヘッダーデザインでデザインを最新化。（大プレビュー）

このプロジェクトの要として、私はデザインの近代化を試みました。インスピレーションを得るためにネイティブのアップルアプリを利用して、アプリ全体のヘッダーを再設計しました。幸いなことに、チームはそれにも興奮しており、アプリの将来のアップデートで変更を実装することを検討しています。

全体として、Sketchファイルをそのような詳細に作業することは、予想外に有益な経験でした。すべてのページをやり直すことで、フォントサイズ、色、間隔などの基本的な理解を深めることができました。既存のデザインをコピーするためには、細部に細心の注意を払う必要があり、非常に満足のいくものでした。それはレゴモデルを組み立てるようなものでした。私はすべての部品を持っていて、最終製品がどのように見える必要があるかを知っていました。すべてを整理し、それらを組み合わせて完成品を作成する必要がありました。これが、私がUXデザインを楽しんでいる理由の1つです。それは、問題を解決し、パズルをつなぎ合わせて、誰もが楽しめるものを作成することです。

アナグママップWebアプリケーションの新機能の最終設計。 — BadgerWebアプリケーションのダッシュボードデザイン。（大プレビュー）

第2章：デザイン

インターンシップの次の部分では、いくつかの設計作業で雑草に入ることができました。タスク：BadgerWebアプリケーションの新しいインポートページを設計する。

チームは、アナグマとCRMの統合を再設計して、ユーザーがデータ同期を表示し、自分のアカウントを自分で管理できるシステムを作成することに取り組んでいました。現在の接続には、アナグマのCSAおよびAEによるセットアップと保守のための多くの実践的な作業が含まれます。 ユーザーがデータのインポートを直接操作するためのインターフェイスを提供することで、CRM統合のユーザーエクスペリエンスを向上させたいと考えました。

インポートプロセスの現在の設計。 — **既存のプロセス：**現在BadgerをSalesforceアカウントと統合しているユーザーは、2つの間の情報の流れを管理できません。 Badgerにインポートされているデータのエラーを表示したり、インポートのステータスを簡単に確認したりすることはできません。右側は、スプレッドシートを介してインポートするユーザーの既存のエラービューです。このユーザーエクスペリエンスを改善し、Salesforceに統合されたユーザーも利用できるようにしたいと考えています。（大プレビュー）

私の目標は、データのインポートで発生するエラーを表示し、データに必要な変更を加える方法と場所をユーザーに通知するページを設計することでした。 1回のインポートに関連するエラーがさらにあった場合、またはユーザーがすべてのエラーを一度に表示したい場合は、そのすべての情報のExcelファイルをダウンロードできるはずです。

目的

処理中のインポートのステータスをユーザーに通知するインポートページを作成します。
BadgerとCRMの間のアカウント同期の履歴記録と、各インポートに関連する詳細なエラーを提供します。
Badgerでインポートエラーが発生したアカウントごとにCRMへのリンクを提供します。
ユーザーがすべての未解決のエラーのExcelファイルをダウンロードできるようにします。

ユーザーストーリー

CRMアカウントを持つアナグマの顧客：
CRMを使用している顧客として、CRMをアナグマに接続し、すべてのデータ同期を視覚化して、プロセスのすべてのエラーを認識し、必要に応じて変更できるようにしたいと考えています。

アナグマ：
アナグマとして、ユーザーがCRM統合のステータスを管理および表示できるようにして、ユーザーがアナグマをCRMアカウントに同期するのを支援およびトラブルシューティングする時間と手作業を節約できるようにしたいと考えています。

デザインを実際に掘り下げる前に、表示する情報とその方法を決定するために、いくつかの考えを検討する必要がありました。

一括輸入と継続輸入
ユーザーのタイプに応じて、Badgerにデータをインポートする方法は2つあります。スプレッドシートを介して行われた場合、インポートはバッチ処理され、グループでインポートを視覚化できるようになります。ただし、CRMと統合されたユーザーは、CRM内で変更を加えたときに、アナグマのデータを常に更新する必要があります。設計では、両方のユースケースを処理できる必要がありました。
レコードのインポート
これは新機能であるため、ユーザーの行動については完全にはわかりませんでした。したがって、情報をどのように整理するかを決定することは困難でした。ユーザーが履歴のリストで無限スクロールに移動できるようにする必要がありますか？彼らはどのようにして特定の輸入品を検索しますか？彼らはできるべきですか？アクティビティを日ごとに表示する必要がありますか、それとも月ごとに表示する必要がありますか？

最終的には、これらの問題のそれぞれについて最善の推測を行うことしかできませんでした。ユーザーがこの機能を使い始めたら、将来的に適切な調整を行うことができることを知っていました。これらの問題を考えた後、私はワイヤーフレーミングに移りました。まったく違うものをデザインする機会があり、それは解放的でやりがいのあるものでした。最終的なデザインは、途中で作成されたさまざまなデザインからの個々の要素の集大成でした。

設計プロセス

このプロセスの最も難しい部分は、最初からやり直すことを学ぶことでした。私は最終的に、美的目的のためだけにデザインに何かを強制することは理想的ではないことを学びました。これを理解し、私のアイデアを手放すことは、より良いデザインに到達するための鍵でした。さまざまなアイデアを探求するために、何度も何度もやり直す方法を学ぶ必要がありました。

3つの設計調査。 — **最初の数回の反復：**ヘッダー、ボタン、およびリストのデザインの配置を試します。この時点と今後数日間のフィードバックは、一貫して次のようになりました。「他に何ができるか見てみましょう。」しかし、首なし鶏のように走ることの利点は、最終的なデザインで使用した金のトウモロコシの果実に時々遭遇したことです。（大プレビュー）

青をテーマにしたデザインの探求。 — アナグマアプリケーションから少し離れすぎた1つの設計調査。この後、少し振り返りましたが、最終的なデザインは、そのようなさまざまなアイデアを検討することで本当に恩恵を受けました。（大プレビュー）

課題

1.空白を使用する

すぐに、ページに表示したい情報を調べる必要がありました。私たちが含めることができる多くの詳細がありました—そして間違いなくそれをする余地がありました。

多くの過剰な情報を表示するダッシュボードのデザイン。 — 当初、私は多くの余白とミニマルなデザインを期待して非常に恐れていたので、ユーザーが実際には必要としないフィラー情報を考え出すために一生懸命努力しました。それから私はそれをすべて私のデザインに詰め込み、最小限の呼吸の余地を与えました。サンフランシスコの都市計画家にとって非常に良い態度です。ユーザー中心設計を作成するためにそれほど多くはありません。（大プレビュー）

すべての不要な情報は、認知的負荷を大きくしすぎて、ユーザーが実際に心配していたことを取り除いてしまいました。すべての空白を取り除くのではなく、それを使用する必要がありました。これを念頭に置いて、私は最終的にすべての無関係な情報を取り出して、ユーザーが最も懸念していると予想されるもの、つまりデータのインポートに関連するエラーのみを示しました。

これが最終バージョンでした：

月ごとに整理されたアクティビティを備えた合理化されたテーブルデザインを特徴とする最終的なデザイン。 — 日と月ごとに整理された輸入品。これは、特にCRMとBadgerの間の同期がオンデマンドだけでなく継続的であったため、私たちの目的にとってより論理的な組織でした。（大プレビュー）

2.ナビゲーション

次の課題は、情報を表示するためのサイドバーとヘッダーのどちらを使用するかを決定することでした。サイドバーの利点は、ユーザーがスクロールしても情報が一貫して表示されることです。ただし、サイドバーに含まれる情報が、ページの残りの部分で行われていることと論理的に関連していることも確認する必要がありました。

ヘッダーには、すっきりとした単一カラム設計の利点があります。欠点は、ヘッダーに含まれる情報の量によっては、多くの垂直方向の領域を占有することでした。また、ユーザーにとってヘッダーの内容をその下にあるものよりも視覚的に優先しました。

トップナビゲーションを使用して探索を設計します。 — トップナビゲーションを探索する反復。 **短所：**ユーザーはインポートのリストをスクロールしてエラーを表示し、上にスクロールして要約を表示する必要があります。右側の2つのセルの内容と場所も混乱を招きました。 2つのセルは左側にあるすべての情報の要約であるため、ページの残りの部分と一緒にスクロールしても意味がありませんでした。ただし、スクロールしないと、ユーザーエクスペリエンスが混乱します。全体として、ページ上の情報の構成はデザインと一致していませんでした。（大プレビュー）

どの情報をどこに表示するかを考えたら、サイドバーのナビゲーションがより論理的な決定になりました。ユーザーは、インポートと大きなヘッダーに関連するエラーに主に関心を持っていると予想されます。その情報の多くは、フォールドを下回ります。サイドバーは、ユーザーがスクロールしたときに表示されるインポートとアクティビティの概要のコンテナになる可能性があります。

サイドバーのデザイン：サイドバーを使用することを決定した後、含める情報とその表示方法を決定することになりました。

5つの異なるサイドバーデザインの調査。 — さまざまなサイドバーの設計調査。ユーザーが見たい情報を絞り込んでいくうちに、デザインはどんどんシンプルになっていきました。（大プレビュー）

表示する情報が少ないため、視覚的に面白いデザインを作るのに苦労しました。このため、ユーザーを優先したかったのですが、スペースを埋めるために不要な要素を追加していることに気づきました。デザインと使いやすさの妥協点を見つけようと、さまざまなコンテンツと色の組み合わせを試しました。作業を重ねるほど、デザインを骨まで解析することができました。有用な情報とフィラーを区別しやすくなりました。最終的な製品は、いくつかの要約統計量を備えた合理化された設計です。また、将来、より多くの情報を含めるための優れた柔軟性も提供します。

インポートプロセス：インポート進行状況ページは、インポートページのデザインが完成した後に作成されました。ここでの最大の設計上の課題は、進行中のインポート同期を表示する方法を決定することでした。ポップアップやオーバーレイとは異なる解決策を試しましたが、最終的にはサイドバーに進行状況を表示することで解決しました。このようにして、ユーザーは引き続きエラーを解決し、インポートの進行中にアカウントデータの履歴レコードを確認できます。インポートの中断を防ぐために、[データの同期]ボタンと[アナグマに戻る]ボタンが無効になっているため、ユーザーはページを離れることができません。

同期データとアナグマボタンに戻るを無効にした最終設計。 — ユーザーが同期を中断してアプリケーションに戻るのを防ぐために、[データの同期]ボタンと[アナグマに戻る]ボタンを無効にします。（大プレビュー）

デザインが完了したら、HTMLとCSSに移りました。

スケッチプログラムとビジュアルスタジオコードのスクリーンショットとデザインのコード。 — 私のデザインのコーディングを始めました。（大プレビュー）

第3章：HTML / CSS

このプロジェクトは、あらゆるタイプのコーディングに関する私の最初の経験でした。私は以前にHTMLとCSSを学ぼうとしましたが、どのレベルの習熟度にも到達したことはありませんでした。そして、自分のデザインのモックアップから始めるよりも良い方法はありますか？

HTMLドキュメントを整理するロジックを理解すると、Sketchドキュメントをシンボルとオーバーライドで整理することを思い出しました。しかし、類似点はそこで終わりました。コーディングは、私が一貫して頭を包み込もうとしていた非常に異質なもののように感じました。私のメンターが言うように、「プログラミングでは、デザインとはまったく異なる筋肉を曲げています。」最終製品が手元にあるので、コーディングを学ぶことは、トイレトレーニングを受けて以来、私が学んだ中で最もクールなことであると完全に確信しています。

ドキュメントを設定して基本を理解した後の最初の課題は、Flexboxを使用することでした。私が作成したデザインには、2つの列を並べたものが含まれていました。右側の部分は、左側が静止したままスクロールするためのものでした。 Flexboxを機能させることができれば、Flexboxはこの目的のためのクリーンなソリューションのように見えました。

Flexboxの実装は、さまざまなWebサイトをスクランブルし、チュートリアルを読み、コードを検査する間、多くの試行錯誤とコードのブラインドコピーで構成されていました。このプロセス全体を通して私のメンターからの指導を受けて、私たちは最終的にそれを機能させることができました。 flex-direction: columnを使用すると、すべての要素が1つの列になり、 flex-direction: rowがそれらを1つの行に配置するのに役立つことを最終的に理解した瞬間を決して忘れません。

私の最初の理解は正反対でしたが、今では非常に理にかなっています（ flex-direction: columnは要素を列に並べて配置すると思いました）。驚いたことに、コードが機能するまで、私はこのことに気づきませんでした。コードを確認していて、まったく理解していないことに気づきました。何が私をひっくり返したのですか？私のCSSでは、 flex-direction: rowをcolumnという名前のクラスにコーディングしました。このシナリオは、私の最初のコーディング経験の残りがどのように進んだかをかなり示していました。私のメンタルモデルがコードのロジックと一致することはめったになく、それらはしばしば衝突し、別々の方法で進みました。これが起こったとき、私は戻って、私の誤解を見つけて、コードを修正しなければなりませんでした。

Flexboxを設定した後、右側の部分がスクロールしている間、左側の列を固定したままにする方法を理解する必要がありました。私が望んでいたように、これは1行のコードでは達成できなかったことがわかりました。しかし、これを実行することで、残りのプロセスで非常に役立つ親子関係を理解することができました。

タイムラインとカレンダーのアイコンを示す輸入デザインの表 — カレンダーアイコン付きの垂直タイムライン。（大プレビュー）

垂直タイムラインとダイヤルのコーディングもプロセスでした。タイムラインは私が当初予想していたよりも単純でした。細い長方形を作成し、それに内側の影とグラデーションの塗りつぶしを設定して、各アクティビティログの幅に割り当てることができました。

ダイヤルはトリッキーでした。純粋なCSSで実装してみましたが、ほとんど成功しませんでした。デザインをもっとシンプルなもの（プログレスバーなど）に変更することを検討したことが何度かありましたが、それを使い続けてとてもうれしく思います。

元の文字盤と最終的な文字盤のデザインを示す画像。 — オリジナルと最終的な文字盤のデザイン。（大プレビュー）

主な苦労は、境界に沿って背景の円と重なるようにプログレスダイヤルの外側を取得することでした。ここでデザインを少し変更しました。プログレスダイヤルのアンロードされた部分を切り取る代わりに、全体に重なっています。それは私のデザインとコードの間の妥協点であり、最初は作りたくありませんでした。しかし、結局のところ、私は最終結果に満足しており、これに気づいたら、その妥協を喜んで行いました。最終的なダイヤルはJavaScriptを介して実装されました。

コーディングプロセスの中で、これまでに作成したコードのすべての行をすべてのクラスにスローして、それを機能させようとした瞬間がありました。この後知恵の欠如を補うために、私はかなりの時間をかけてすべての要素を調べ、無駄なコードを削除する必要がありました。家主が家賃を払っていないテナントを追い出しているような気がしました。それは間違いなく、ハウスキーピングのレベルを維持し、コードに対して賢明で思慮深いことから学んだ教訓でした。

経験の大部分は、ブラインドトラバースと回顧的学習のように感じました。しかし、完成品を見ることほど満足のいくものはありませんでした。プロセスを経ることで、これまでにない方法で自分の仕事と対話し、デザインがどのように実装されているかについての洞察を得ることができました。インターンシップへの期待のすべてにおいて、私は自分のデザインの1つをコーディングして作成できるとは思っていませんでした。初日にできると言われても、このページが完成するのを見て初めて信じられませんでした。

第4章：赤ちゃんアナグマとの協力

BadgerユーザーをCRMアカウントと統合するプロセスの一環として、ユーザーがCRMにサインインする必要がありました。つまり、BadgerからネイティブCRMWebサイトにリダイレクトする必要がありました。あるWebサイトから別のWebサイトへの突然の不快な切り替えを防ぐために、中間読み込みページを設計する必要がありました。

アナグママップのロゴと「じゃあまたね！」が付いたリダイレクトページのオリジナルデザインメッセージ。 — サンプルの静的リダイレクトページの最初のモックアップの1つ。それはシンプルでその目的を果たしましたが、他にはほとんど何もしませんでした。（大プレビュー）

私はあなたのありふれた静的リダイレクトページから始めました。それらはシンプルで確実に目的を果たしましたが、私たちはそれらにあまり満足していませんでした。

課題は、ウェブサイトが表示された数秒でユーザーに通知する、シンプルで興味深いものを作成することでした。デザインはそれ自体を紹介し、なぜそこにあったのかを説明し、誰もがそれを見るのに飽きる前に去る必要があります。それは本質的にスピードデートの練習でした。そのことを念頭に置いて、私はアニメーションを試してみることにしました。具体的には、既存のロゴに触発された生意気な小さなアナグマのアニメーションです。

アナグマデザインの7回の反復と、それがどのように変化したかを示す画像。 — 「赤ちゃんアナグマ」の進化。（大プレビュー）

アナグマのロゴを出発点として、AdobeIllustratorでさまざまなアナグマのキャラクターを作成しました。元のロゴは、アニメーションを読み込むには少し厳しすぎると感じたので、少しかわいいものを選びました。一貫性を保つために、元のロゴから赤い胸と顔の特徴を維持し、これらの要素の周りに体と頭を作成することに取り組みました。頭と縞模様は、私が満足している形にマッサージするのに少し時間がかかりました。体の形は少し楽になりましたが、頭と体の大きさの適切な比率を見つけるのに少し時間がかかりました。それを突き止めたら、アニメーションに移る準備ができました。

赤ちゃんアナグマをアニメーション化するアニメーションフレームを停止します。 — アニメーションを停止する私の試み。（大プレビュー）

私の最初の本能は、ストップモーションアニメーションを試すことでした。私はそれが素晴らしいものになるだろうと思った—ラウォレスとグロミット。しかし、最初の試み、次に2回目の試み、そしてその後のすべての試みの後、子供の頃にそのショーを見ると、ストップモーションアニメーションを行うために必要なスキルが十分に身に付いていないことが明らかになりました。

必要な滑らかさを実現できなかっただけで、非常に短い読み込みアニメーションには不快感を感じる小さな不整合がありました。アニメーションは通常、毎秒23フレームで実行され、私のアナグマアニメーションは毎秒約15フレームしかありませんでした。フレームを追加することを検討しましたが、メンターからの提案により、代わりにキャラクターアニメーションを試すことにしました。

5つ以上の可動部分であるものをアニメートするのはこれが初めてであり、視覚的に満足のいく方法で2次元キャラクターをアニメートする方法を理解するための学習曲線が確かにありました。モーションを信頼できるものにするために、個々の要素をアニメーション化して、全体から独立して独自に移動する必要がありました。アニメーションに取り組むにつれて、インポートしたレイヤーはますます細かくなりました。プログラムの動作とアナグマを動かす方法を学ぶと、頭は1層から5層になりました。

私は体の各手足を固定し、体の各部分を子として体の親レイヤーに設定しました。それに応じて、太ももと肩の上部にアンカーポイントを設定して、適切に動くことを確認してから、回転とイージングを使用して、体の部分の動きをシミュレートしました。頭は少しトリッキーで、体とは無関係に垂直方向の動きが必要でした。ジャンプをよりリアルに見せるために、体の残りの部分に押し上げられる前に頭を少しスペースにぶら下げ、残りの部分の少し後に頭を下げたいと思いました。また、彼が鼻でリードしているように、ジャンプ中に上を向いて、走っている間はまっすぐに見えるようにしようとした角度を調整しました。

過度に擬人化された足は、元のデザインから放棄されました。それらは、赤ちゃんアナグマに加えられた最後の変更の1つでした。私はアナグマで奇妙な人間のつま先がどのように見えるかを考えていませんでした。

ユーザーをアナグマにリダイレクトするページで紹介されたアニメーションは、CRMからの情報でいっぱいのナップザックを持ってアナグマに戻って走っている赤ちゃんアナグマを表示しました。

アナグマアプリケーションに戻って実行している赤ちゃんアナグマのアニメーション。

そして最後に：混乱したアナグマ。これは、作成する必要のある最後のページ、つまり統合プロセスで予期しない問題が発生したことをユーザーに通知するエラーページに対して行われました。そして、それを行うためのより良い方法は、同情的で混乱したアナグマですか？

赤ちゃんのアナグマの顔の4つの反復を示す画像。 — 赤ちゃんのアナグマの顔のデザイン探索。（大プレビュー）

ここで注意が必要なのは、既存の漫画アナグマの側面プロファイルとロゴを組み合わせて、正面を向いた頭の形を作成することでした。このプロジェクトを始める前、私は本物のアナグマを見たことがありませんでした。言うまでもなく、アナグマは今月私のグーグル画像検索にその道を見つけました。アナグマの頭が実際にどれほど平らであるかを見て驚いた。最初のいくつかのデザインでは、これを模倣しようとしましたが、結果に満足できませんでした。鼻、縞模様、耳の配置を調整して、最終的な結果を達成するために、形状をもう少し調整しました。

映画ファンタスティックミスターフォックスのポッサムに触発された渦巻く目。

このアニメーションプロセスにより、私は既存の知識をより高いレベルに引き上げることを余儀なくされました。自分にできると思ったことで自分を制限するのではなく、自分が知っていることを超えて自分自身をプッシュする必要がありました。私はキャラクターアニメーションをすることを自分自身に信頼していなかったので、もともとストップモーションアニメーションから始めました。自分自身に新しいことや違うことを試す機会を与えることで、自分の期待を超える何かを達成することができました。

赤ちゃんアナグマのアニメーションに基づいた4つの漫画スタイルのデザイン。 — デザインは元の赤ちゃんアナグマから拡張され、オフィスの周りやマーケティング資料に印刷されて使用されました。（大プレビュー）

結論

インターンシップで過ごした3か月は、非常に満足のいくものでした。毎日、何か新しいことを学び、試すことでした。デザインなど、私がよく知っているタスクでも、私が行ったすべてのことに課題がありました。何かを作成するたびに、私はそれがどのように受け取られるかについて非常に不安で不安でした。多くの自己不信と多くの捨てられた考えがありました。

そのため、チームの一員であり、私を正しい方向に導くメンターがいることは素晴らしいことでした。 他の何かを試すように言われたことは、私が他の何かを試し、より大きく、より良い何かを達成するために必要な唯一の励ましでした。私は自分自身をモグラたたきゲームの齧歯動物として描くのが好きです。頭を何度も叩かれますが、常に何度も何度も現れます。今、闘争と挑戦は終わりました、私はそれをもう一度やり直したいだけです。

私は自分が学んだことと、自分ができると思っていた以上のことをするように促されたことに感謝しています。私が数ヶ月でどこまで来たかを見るのは夢中です。 UXデザイナーであるという私の理解は、機能を理解することから、デザインを打ち出すこと、そしてそれを実装するためのフロントエンドコードを書くことまで、非常に大きくなりました。このインターンシップは、私がどれだけ多くのことを学ばなければならないかを教えてくれ、働き続ける動機を与えてくれました。私ができることは、私が知っていることによって決して制限されるべきではないことを理解するようになりました。