web-dev-qa-db-ja.com

ワイヤーフレームを文字通りのグラフィックの提案として扱うビジュアルデザイナーとの連携方法

最近、私はクライアントプロジェクトで、チームのビジュアルデザイナーが、自分で作成したワイヤーフレームのように見える、色だけのデザインを作成するときに、非常に多くのケースに直面し始めました。おそらく、私の質問に対する明白な答えは、「この種のデザイナーと一緒に仕事をしないこと」です。しかし、ほとんどの場合、私が取り組んでいるプロジェクトは非常に興味深く、やりがいがあります。そのため、プロジェクトに留まりたければ、チームのメンバー全員と一緒に仕事をせざるを得ないので、それを解決する方法を見つけた方がいいです。 。

私はチームと話し合って、ワイヤーフレームとは何か、そうでないこと、およびワイヤーフレームにカラーを適用することが良いデザインの仕事ではない理由を説明しました。ワイヤーフレームに基づいて行われた優れた設計作業の例を示しました。また、ビジュアルデザイナーがより創造的になることを期待して、スケッチのように見えるモックアップを作成するために、OmnigraffleからBalsamiqに切り替えました。うまく機能していないようです。

ワイヤーフレームをコンテンツ、位置、階層、機能、インタラクション、フロー定義などのガイドラインとしてのみ(正しく)扱うことができるデザイナーと協力して、すべてを美しいものにまとめる魔法をかけるのはどのようなものか知っていますとエレガントな視覚面。これが、反対のケースが非常に苛立たせる理由です。

誰かがそのような状況に直面しましたか?はいの場合、何がうまくいき、何をしようとしたと想定しなかったのですか?

46
Marina

もし彼/彼女があなたのワイヤーフレームを着色している​​なら、多分あなたはそれらに高すぎる忠実度バージョンを提供しているでしょう。忠実度を下げて、IAの要件を尊重しながらワイヤーフレームを解釈する必要があるようにします。

これが、忠実度の高いワイヤーフレームと低いワイヤーフレームの粗雑な例です。

mockup

/ EDIT-モックアップを編集したので、Lo-Fiはそれほど極端ではありません。

22
JonW

ビジュアルデザイナーがワイヤーフレームの背後にある考え方を理解し、その結果、色の上に何を追加できるかを理解できるように、これらのいくつかをより協調的に克服して作業できますか?

ワイヤーフレームの説明を読むと、解釈の余地がほとんどない最終版に聞こえます。ソリューションではなく成果物のビジネスに携わっている場合、ワイヤーフレームは「最終版」である可能性があります。状況を改善するために、エクスペリエンスデザインフェーズで作成された「ページ」の説明的な概要をデザイナーに説明することもできます。これらには ユーザーストーリー および ページ説明図 が含まれる場合があります。

取られる必要のあるスタンスは、デザイナーのモチベーションとメンタリングの1つです。あなたが示しているように聞こえるものに似た多くのリソースとサイトがあります。設計者は、何をすべきか、およびワイヤーフレームから構築する方法を示す必要があります。

19
Adam Fellowes

核心的な問題は、低忠実度成果物と高忠実度成果物。ビジュアルデザイナーは、たとえその用語が何を意味するのかを知的に知らなくても、忠実度の高い成果物を提供していると考えています。そうでない場合は、それらを教える必要があります。

スケッチとワイヤーフレームは自動的に低忠実度になります。つまり、それらは最終製品を視覚的に表現しない構造の大まかな近似ですおよび潜在的な最終製品のロジック。

違いを説明する優れたリソースがあります: 繰り返します:ワイヤーフレームは視覚的なデザインではありません これは、デザイナーが理解すべき方法でこれを説明する優れたブログ投稿です。

設計の定義を検索すると、ワイヤーフレームが「特定の環境で目標を達成することを目的としたオブジェクトを指定する」という考えに当てはまることがはっきりとわかります。何かがユーザーと対話する方法のロードマップとして大まかに翻訳できる技術的な定義。

このSlideShareプレゼンテーション Wireframe vs Mockupの理由と時期 は、ワイヤーフレームがいつ適用可能で、何ができないかを説明するのに役立ちます。

これは、ビジュアルデザイナ/クライアントとUXデザイナの間の通信の永遠の問題なので、あなたは、ビジュアルデザイナがこれを確実に取得する必要がある場合かなりの期間、彼らと協力するつもりです。

9
Ben Brocka

私が使用したアプローチは、同じワイヤーフレームに対して3つまたは4つの異なる設計コンセプトを大まかに設計者に依頼することです。

これを行うと、ワイヤーフレームに応答するさまざまな方法を模索するように促され、明らかに変なことを試すことができます。

それでもデザイナーが苦労している場合は、Metro UIが適用された場合(たとえば)、または子供が使用することを意図した場合(そうであっても、ワイヤーフレームがどのようになるかを見せてください)複雑な金融ウェブサイト)。または、有機的な美学を形成する穏やかな曲線の線を求めるか、または印象的なangular三角形のような形状..どちらも通常のワイヤーフレームの箱型の外観とはまったく異なります。

8
Erics

ビジュアルデザイナーに自分のワイヤーフレームでもっと率先して/自由にしてもらいたいときは、次のようにします。

  1. アプリ/サイトとその目標の豊富な説明を提供してください、およびワイヤーフレーム。そうすることで、きれいな色だけでなく、これらの目標をサポートするビジュアルデザイン計画を探していることを伝えます。
  2. ワイヤフレームのどの部分にもっと注意が必要かを指定してください-私はそれらに絶対的な自信がないか、またはそれら(設計者)にさまざまな解決策を探ってもらいたいからです。時々私は2つか3つの選択肢を与えます、そして時々私は彼らに提案を思いつくようにさせます。
8
Yosef Waysman

私たちは何年にもわたって多くのデザイナーと協力してきましたが、この問題に初めて遭遇したのは、つい最近のことですが、一度に2つのプロジェクトでした!

この種のことは、デザイナーの背景がウェブではなく印刷されているときに発生するようです。デザイナーの「デザイン」を見たとき、私たちは彼らに言いました-ワイヤーフレームはデザインではないので、変更してください。ある設計者は、私たちの手に余計な手間をかけることなく、なんとか設計を設計どおりのレベルに到達させました。もう1つはそうしなかったため、他のサイトで要素を表示し、何をどのように設計するかを伝えることで、スプーンで餌を与えなければなりませんでした。多くの修正と多くの入力を経て、サイトは非常にうまくいきました。しかし、当初の見積もりでは、デザイナーの指導に何時間も費やす必要があったこの予期せぬ進展は考慮されていませんでした。

デザイナーと一緒に仕事を始めるときは、ウェブ向けのデザインの経験があるかどうか尋ねてください。これは、ワイヤーフレームをデザインに変換する能力を決定する重要な要素のようです。

4
Miriam Schwab

質問は プロジェクト管理の質問 としてより適切だと思います。おそらくワイヤーフレームに固有かどうかではなく、どのように連携して共同作業するかです。

すべての説明は、あなたがそれが最もうまく機能すると考える方法ですが、ビジュアルデザイナーがどのように機能するかではありません。 Wirefrmaesと連携するための業界標準のようなものがあるかどうかはわかりません。だから、それはあなたが両方が一緒に働く方法をどのように見つけるかにかかっています。そして、ここには適切なニーズと欲求があります。

  • あなたは状況についてどう思うかを明確に説明しましたが、デザイナーに尋ねましたか?彼/彼女の視点を知っていますか? 両方の観点から状況をよりよく理解するようにしてください。
  • その原因を理解していれば、解決策を探すことができます。あなたは、ラフなスケッチによって創造性を強化するというソリューションを書きました。しかし、ここでもあなたの解決策であり、両方の解決策ではありません。
  • あなたが一緒に解決策を見つけた場合、それを実現する方法を計画することができます。完璧なものはなく、調整が必要になる可能性があるため、この計画を監視します。
  • まれに、両方に適した方法を見つけることができない場合があります。または彼/彼女の行動が意図的に悪いかもしれません。この場合、上層部に行き、サポートを求めます。
2
FrankL

これは、グラフィックデザイナー\ビジュアルデザイナーが会社での役割が本当にわからない場合の例です。ほとんどのビジュアルデザイナー(残念ながら)は、自分の仕事がデザインをきれいでカラフルに見えるようにすることだという印象を受けているようです。幸い、私はこの問題に1回しか直面していません。問題を解決するために私が取った手順は次のとおりです

  1. 指摘されているように、ワイヤーフレームの忠実度を低く保つようにしてください。忠実度が高く、仕上がりに近いほど、スタイリングとデザインのガイドラインに関して反対意見が少なくなります。
  2. ワイヤーフレーミングはビジュアルデザイナーをプロセスに関与させようとします。これは、ホワイトボードに描画して彼の入力を要求するか、ワイヤフレームを設計して彼の入力を要求する際に、あなたのそばに座るように彼に要求するのと同じくらい簡単です。
  3. あなたが思いついたデザインの複数のバリエーションを思いつくように依頼してください。デザインの1つは、思いついたワイヤフレームとまったく同じである可能性がありますが、デザインレイアウトと色のスタイルに関する別のバリ​​エーションは、彼らの見解を表現し、より革新的なアイデアを思い付くのに役立ちます。ただし、ブランドガイドラインと設計仕様に関する制限を確実に認識して、完全に範囲外のものを設計しないようにしてください。
2
Mervin