30日間のデザイン–ブランディングのケーススタディ

クライアントと協力する際に​​注意すべき重要な側面がいくつかあります。期待に応えることと期限はその2つです。 すべてのデザイナーのキャリアのある段階で、彼らのプロジェクトに差し迫った緊急性を持っているクライアントがやってくるでしょう。 これらは、締め切りに間に合わせる方法と、それがいかにクレイジーになるかを教えるプロジェクトです。

通常、すべてのデザイナーがキャリアの中で遭遇するプロジェクトには2つのタイプがあります。「自分のプロジェクトに対応するユーザー中心のデザインが必要です。厳密な期限はありません。 最高のソリューションが欲しいだけです」…それがすべてのデザイナーの夢です。 しかし、それに直面しましょう。 実際には、物事は常により困難です。

「私は、既成概念にとらわれず、革新的で創造的なソリューション、つまり優れたUX、本当に優れたユーザーインターフェイスを求めています…そして、昨日それが必要です。」

では、ロゴを作成し、主要なブランド要素、Webサイト、モバイルUI、ソーシャルメディアの広告/グラフィックをデザインするのに30日かかることに気付いたら、どうなるでしょうか。

小さなパニック発作を起こした後、あなたは賢く働くことが唯一の道であることに気づきます。

事前に計画を立てて考え抜くことは、生産性、精度、設計品質に役立ちます。 他の成功した努力と同様に、ハードワークと長時間はそれを実現するための必須条件の一部です。

何があっても、これらの厄介な質問が常にあります：

• そのような時間制限でやる価値はありますか？
• 時間の制約により、設計品質が低下しますか？
• もっと時間があればもっといい仕事ができるでしょうか？

もちろん！

他のプロジェクトと同様に、常に長所、短所、および制約があり、デザイナーとして、私たちは回避策を見つけ、創造的な解決策を考え出すために私たちの利点を利用する必要があります。

プロジェクトを正常に完了するために実行する必要のあるタスクを明確に把握することは重要です。また、短いタイムラインが全体的な設計品質に悪影響を与える可能性があることをクライアントに外交的に知らせることも重要です。 ただし、締め切りのプレッシャーは、自分の技術に最善を尽くさないことの言い訳にはなりません。可能な限り最高の仕事を提供するために自分自身をプッシュするためにそれを使用してください。 時間のプレッシャーの下で行われた創造的な仕事についてハーバードビジネススクールが行った研究は、これを結論付けました：

この研究は、マネージャーが従業員が創造的な認知処理に従事する時間を保護するための措置を講じていることを示唆しています。特に、高度な創造性を必要とする仕事をしている従業員はそうです。 […]自主的であれ外部的であれ、時間的プレッシャーがまったくない場合、創造的なアイデアが生み出されることはほとんどありません。

これらの調査結果は、創造的な仕事に対して大きなプレッシャーがかかる可能性があることを示していますが、同時に、この研究は、創造的な仕事に関する合理的なレベルのプレッシャーがより良いデザインの作成に役立つ可能性があることも示唆しています。

複数のアクティブなプロジェクトでフリーランサーとして働いているときは、すべてを成し遂げることは常に挑戦ですが、スケジュールに熱心に取り組み、限られた時間をあなたのために働かせる絶好の機会です！ あなたのためにリモートワークを機能させることは簡単ですが、簡単ではありません。 これをしっかりした計画と組み合わせると、成功の秘訣がわかります。

1〜2日目：最初のものを最初に—計画を立てましょう！

最初のステップは、プロジェクトをより小さな部分に分割し、プロジェクトの各段階を完了するのにかかる時間を計算することです。 目標を設定すると、モチベーションと達成度が向上します。 目標達成の科学では、大きな目標を明確で定義されたアクションステップに分割することを推奨しています。これを行うと、目標達成に向けた取り組みに大きな利点がもたらされます。

ブランディングデザインに関しては、クライアントがさまざまなオプションから選択できるように、デザインのいくつかのバージョンを作成することをお勧めします。 私の個人的な好みは、ロゴデザインと、タイポグラフィ、カラーパレット、画像、アイコンセットなどの主要なブランド要素を3回繰り返すことです。 これを最初に行うと、コンセプトと視覚的なアイデアを次のステップに進めることができます。

ワークプロセスを作成し、それに従ってください。

ワークプロセスを作成すると、すべてのプロジェクトに伴うワークフローと責任が軽減されます。 以下は、ブランディングであれユーザーインターフェイスデザインであれ、典型的なデザインプロジェクトに対する私の通常のアプローチです。

リサーチ

あなたのクライアントのビジネスについてのすべてを調べてください：

• 彼らのビジネスの中核は何ですか、そして彼らの主な活動は何ですか？
• 彼らのターゲットオーディエンスは誰であり、彼らのニーズは何ですか？
• 彼らの目標は何ですか、そしてデザインを使用して解決する必要がある問題は何ですか？
• 競争相手は誰ですか、そしてどのようにあなたはより良くなることができますか？

アンケートまたはデザインブリーフは、前述の情報を収集するための最も便利で効率的な方法の1つです。

ムードボードを作成する

ムードボードを使用できることの1つは、プロジェクトの重要な部分であるコンセプトを作成することです。 全体像を把握する—すべての調査を行い、それを1つの大きなキャンバスに配置して、設計に組み込む必要のあるすべての要素を確認できるようにします。 ムードボードを簡単に作成するのに役立つ無料のツールがいくつかあります。

オンラインツールを使用していない場合は、Adobe Illustratorを使用すると、要素を作成、追加、および自由に移動できます。 コラージュと考えてください。細部の配置についてはあまり気にしないでください。 あなたはあなたの好みに合わせてすべてを自由に手配することができます。 主な目標は、色、写真、アイコン、タイポグラフィなどが視覚的およびストーリーテリングで相互にどのように機能するかを確認することです。

3日目：デザインコンセプトを作成する

コンセプトの作成は、ムードボードを完成させた後の次のステップであり、今後のすべての作業の基盤となります。 コンセプトは、設計機能の実行可能性をテストするための実験モデルとして作成されます。

ムードボードは、ターゲットとするオーディエンスとビジネスの目的に対応する必要がある初期の視覚的な方向性を設定するのに役立ちます。 コンセプトはUXの方向性の基礎となるため、トップデザイナーが使用する10のUX成果物の一部です。

プロジェクトの最初の段階でも、確かなコンセプトが説得力のあるストーリーを語るのに役立つため、このステップがいかに重要であるかを理解することが重要です。 主な焦点は、ビジュアル自体ではなく、ビジュアルを扱うときにユーザーが遭遇する感情や経験を考慮に入れる必要があります。

業界で最も影響力のあるマーケティングコンサルタントであり、やる気を起こさせるスピーカーの1人であるSimon Sinekが、このテーマについて素晴らしいTEDトークを行いました。

ムードボードは、いくつかの短いスローガンを作成したり、アイコンや写真のスタイルをコンセプトに設定したりするのに役立ちます。 メディアに関係なくすばやく読めるタイポグラフィがあると便利なので、ウェブや印刷に適したタイポグラフィを検討することも重要です。 これは優れたデザインの重要な要素であり、ユニバーサルデザインの実践で認められている原則の1つでもあります。

4日目：ブランドビジュアルをデザインする

最初から間違ったアプローチをとっている場合、ブランド構築プロセスは面倒で時間がかかる可能性があります。 ロゴのイテレーションを作成することから始めるのは、承認されたコンセプトがあり、視覚的なガイダンスファイルが完成した後で行うのが最適です。 これにより、正しい方向に進んでいるという自信が得られ、スマートで時間効率の良い方法でブランディングの課題に取り組むことができます。

デザインのアイデアの小さなペンと紙のスケッチを作成することが不可欠です。 最初にスケッチしてから、Illustrator、Sketchなどに進んでロゴを処理すると、時間がかかりません。 このステップは、ブランドに選択された視覚的な方向にすべてある3つの異なるロゴ提案をデザインするのに役立ちました。 これが完了するまでに数日かかりました。

ロゴのデザインに追加の変更や微調整が加えられる場合がありますが、クライアントがロゴを決定し、色、タイポグラフィ、アイコン、写真スタイルなどの他の要素を承認すると、基本的なブランディング要素が完成します。

7〜15日目：ウェブサイトのデザイン

ブランド開発には、ロゴタイプだけでなく、ウェブサイトを含むデザインのほぼすべての側面が含まれます。 視覚的なルールを適用し、それらがどのように連携するかを確認することで視覚的な概念を追加できるため、最初にWebサイトを使い始めると便利です。 これは、最終的にモバイルアプリケーションと同様の目的と要素を持つWebサイトを作成する場合に特に当てはまります。

サイトマップ

サイトマップは、クローラーまたはユーザーがアクセスできるWebサイトのページのリストです。 これは、Webデザインの計画ツールとして使用されるドキュメント、またはWebサイトのページを階層的に表示するページのいずれかです。

クライアントがすでにサイトマップを持っている場合、それはWebサイトに属するすべてのページを明確に表示できるため、非常に役立ちます。 サイトマップが必要なプロジェクトが授与された場合は、クライアントと協力してサイトマップをまとめる必要があります。

これは、クライアントにいくつかの質問をすることを意味する場合があります。

• ウェブサイトのページ数はいくつですか？
• 最も重要なページは何ですか？
• サブページはありますか？

これにより、Webサイトの構造が明確になり、プロジェクトの範囲がわかりやすくなります。

最初にコピー

クライアントに事前に依頼して、サイトに含めたいすべてのコピーとコンテンツを提供してもらうと便利です。 最初にUIを作成し、後でコピーを適合させるのではなく、コピーを中心にデザインを機能させることをお勧めします。

コピーファーストのアプローチは、あなたと開発者の時間を大幅に節約します。 逆にすると、問題が発生する可能性があります。 ダミーテキストを使用すると便利な場合もありますが、特にデザインがタイポグラフィに大きく依存し、コンテンツを中心にデザインされている場合は、実際のプロジェクトに悪影響を与える可能性があります。 コピー中心のデザインには欠点がなく、並外れた品質のクリエイティブな作品を出すのに役立つだけです。

ホームページのデザイン

これまでのすべての手順に従うことで、一般的な視覚的ガイドライン、サイトマップ、およびコピーがすでに作成されています。 これで、Webサイトのページのデザインに進むことができます。

ホームページは、ユーザーがWebサイトにアクセスしたときに最初に表示されるものであるため、最も重要なページです。 パレートの法則を適用すると、ホームページがデザインの方向性（コンテキスト、タイポグラフィ、色、繰り返し可能な要素など）の80％を保持し、残りのページが20％を保持することが示されます。

ホームページのセクションをグループ化して選択することからプロセスを開始することをお勧めします。 完全なコンテンツとコピーは通常、ページ全体を整理し、不足している側面と、影響を最大化し、ユーザーが製品またはサービスを購入/使用するように促すために追加できるセクションを確認するのに役立ちます。

サービスや製品を強調するには、目立つ召喚状のセクションを使用してみてください。 これらは、広告を出すだけでなく、製品を購入したり、ニュースレターを購読したり、サインアップしたりするユーザーの注意を引くための優れた方法です。

テクノロジー、ターゲットオーディエンス、およびクライアントの業種が許せば、GIFやアニメーションなどのモーションデザインを追加することで、サイト全体のサブコンテキストを提供し、行動を促すセクションを強調することができます。 ただし、設計者は行き過ぎないように注意し、開発に時間がかかるものを作成する必要があります。

15〜25日目：ユニバーサルデザインを適用する

ユニバーサルデザインは、その開発者が説明しているように、「既存のデザインを評価し、デザインプロセスをガイドし、より使いやすい製品と環境の特性についてデザイナーと消費者の両方を教育するために適用される可能性があります。」

ユニバーサルデザインの概念は、大規模なプロジェクトを扱うときに使用するのに最適なソリューションの1つです。ブランディング、Webサイト、およびモバイルアプリケーションの統一された概念と焦点を絞った視覚的な方向性は、時間の制約の下で設計する場合に非常に役立ちます。

反復要素の必要性は、それ自体が課題になる可能性があります。 これは、技術的な要件が発生したときに発生します。 レスポンシブウェブサイトとモバイルプラットフォームは、まったく異なる哲学と一連のルールを持っているため、適切に取り組まないと問題になる可能性があります。 それでも、複数のプラットフォームで使用できる要素を作成することは、プロジェクトの成功のバックボーンの1つです。この特定の状況では、ブランドの方向性を明確に設定する統一された設計がなければ、これほど多くのプラットフォーム/デバイスをカバーすることはできませんでした。発達。

締め切りが厳しく、複数のプラットフォーム向けに設計することの欠点は、設計対象の各プラットフォームの潜在能力を十分に活用できない可能性があることです。 このような場合、時間の制約があるため、ユーザーベースに馴染みのある単純な「防弾」ソリューションが価値のあるアイデアになる可能性があります。

例：1つのアイデアを複数のページに再適用し、デバイスごとに改造します。 パターンは本質的に似ており、あなたに有利です。 重要な情報を表示したり、ユーザーに製品の購入を勧めたりする方法である可能性があります。 この場合、検索バーでさえ同じではないにしても類似している可能性があります。

フローチャート

ウェブサイトのデザインが完了し、アプリのUXの明確なビジョンが得られます。

UX作成プロセスをより簡単かつ明確にする方法の1つは、ユーザーフローチャートを作成することです。

フローチャートを作成するために使用できる方法とツールは複数あります。通常は、短いタイトルと、必要に応じて説明テキストを使用してグラフィック図を作成します。 これにはSketchまたはIllustratorを使用するのが私の好みですが、要素を作成および移動できるツールであれば、このタスクには問題ありません。

ウィルリトルはこれについて素晴らしい解釈をしました：

ここで、エンジニアとクリエイティブが緊密に連携して、目的のインターフェイスとクリック/スワイプ動作を、最後のすべてのタブ、ツールチップ、ライトボックス、アイコンなどに最適にサポートできるソフトウェアツールの種類を決定する必要があります。 。

低くして高くする

アプリの主な目的を見つけることは、UXを定義するのに役立ちます。 これは、ユーザーが製品を購入するのに役立つ場合もあれば、製品を使用するのに役立つ場合もあります。ユーザーエクスペリエンスはそれに対応する必要があります。 紙に作成され、SketchまたはPhotoshopで忠実度の高いワイヤーフレームを使用すると、プロセスが大幅に簡素化されます。

この場合、アプリはシンプルで、ウェブサイトの視覚的な詳細に従うだけでよいため、忠実度の低いワイヤーフレームで十分でした。

可能であれば、UXの小さなテストを整理します。 ワイヤーフレームとUXフローが適切かどうかを確認するには、将来のユーザーのテストグループが必要になります。 テスト後、貴重な洞察が得られ、次のステップ（ユーザーインターフェイスの作成）に進むことができます。

統一されたデザイン

UXにいくつかの調整を加えると、論理的で明確に定義されたUIを作成するために必要なすべてが揃い、iOSおよびAndroidプラットフォームの視覚的要件に合わせて調整できるようになります。 iOSには、Apple App Storeにアクセスできない可能性のある非常に具体的な設計ガイドラインがあるため、これらのルールを理解し、開発段階で設計がどのように実装されているかを注意深く確認する必要があります。

UIを設計する際のガイドラインとルールに従うことで、iOSプラットフォームとAndroidプラットフォームの両方で統一されたデザインを作成しながら、最大の長所を活用できます。

25〜30日目：ブランディングと同期して広告を作成する

この時点で、ロゴタイプ、ブランド要素、Webサイト、およびモバイルアプリケーションを設計しているはずです。 すべてを25日以内にデザインしましたが、ソーシャルネットワークと印刷用の広告を作成するというもう1つのステップを検討する必要があるため、祝うのは時期尚早です。 これは、最初に作成したコンセプトが非常に役立つ場所です。

広告やソーシャルメディア素材をデザインする際にこれらのヒントに従うと、ビジュアルの品質、エンゲージメントレベル、および全体的な創造性が大幅に向上します。

• 目立つ鮮やかで明るい色を活用してください。
• 幸せでアクティブな人々を見せることは、あなたのグラフィックスについてのダイナミックさと感情に役立ちます。
• 人々の動き、活動、興奮は常に人目を引くものであり、全体的に伝わる感情を助けます。

これらのルールはすべて、広告用の優れたグラフィックを作成するのに役立ちます。 必要に応じて、Webサイト、ブランディング、およびアプリケーション全体で使用したカラーパレット、タイポグラフィ、およびその他のビジュアルを利用します。 これにより、設計の一貫性が保たれ、時間の制約の下で作業するときに有利に機能します。

あなたが満たすことができない締め切りに決してコミットしないでください

場合によっては、誰もが1つのプロジェクトにかかる労力と作業量を過小評価する可能性があります。そのため、プロジェクトの開始時にすべてのステップを計画することが重要です。 小さな部分に分割された目的と現実的な目標は、時間通りに確実な作業を提供するために重要です。

ベンジャミン・フランクリンはそれを最もよく言いました： 「準備に失敗することによって、あなたは失敗する準備をしています。」

常に、準備を怠ることはなく、仕事を遂行するのに必要な時間の観点から、仕事を過小評価している可能性を予測することも忘れないでください。 クライアントには期限があるかもしれませんが、プロジェクトが実行可能かどうか、またはそもそも検討する価値があるかどうかを判断するのに役立つスキルが必要です。 ただし、これを言い訳にしないでください。個人的な課題に挑戦しないでください。最終的には、より熟練したデザイナーや時間の管理者になる可能性があります。

•••

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

• UIデザインのベストプラクティスとよくある間違い
• 空の状態–UXの最も見過ごされている側面
• シンプルさが鍵–最小限のWebデザインを探る
• モバイルインターフェースのヒューリスティック原則
• 読みやすさのための設計–Webタイポグラフィのガイド