web-dev-qa-db-ja.com

WebサイトのUIには何を提供しますか?

WebサイトのUIを作成するタスクを実行したが、実装しなかった場合、具体的に何を提供する必要がありますか?

デザインを含むpsdファイルを提供しますか?

4
Mirela Ignat

あなたが仕事をしたとはどういう意味ですか?それに伴う期待があるに違いないね。

実装がない場合、それは別のことを意味する可能性があります。

  • 低忠実度プロトタイプまたはワイヤーフレーム。これは、画面上で使用されているコントロールの広い感覚でWebサイトの全体的なナビゲーションのアイデアを一般的に提供する、大ざっぱでシンプルなワイヤーフレームを提供することを意味します。

  • ハイファイプロトタイプまたはPSD。ここでデザインはより具体的です。フォント、カラーパレット、ロゴなどのビジュアルデザインの側面を紹介します。

  • インタラクティブプロトタイプは、さまざまな画面とアニメーションおよびジェスチャーの相互リンクです。これは、忠実度の高いものよりも深く、実装を間もなく開始します。

上記のすべての段階で、あなたから期待できる具体的な成果物があります。実装せずに言うと、BnWの大ざっぱなUIから実際のデータに接続せずにHTMLモックアップまでの範囲を意味する場合があります。

ステークホルダーからの期待をさらに明確にする必要があると思います。

5
Sol

何よりもまず、何が期待されているかについてクライアントと深く話し合う価値があると思います。しかし、推測が必要な場合は、次のようにします。

  • サイトのコンテンツ監査を実行し、情報アーキテクチャ(IA)ダイアグラムまたはメンタルモデルダイアグラム(または参照:Indi Youngによる「メンタルモデル」)を作成して、どのコンテンツがどのニーズとどのユーザーをサポートするかを確認します。
  • 以下を含む、サイトの「設計システム」を設計して文書化します。
    • 共通のページコンポーネント、および追加の作成に関するガイドライン
    • 一般的なページレイアウトのバリエーション
  • メンタルモデル/ IAの要素をサポートするレイアウトの例をいくつか作成し、最初に次のことに焦点を当てていることを確認します。
    • 最も頻繁に使用されるレイアウト
    • より注目度の高いコンテンツ
    • より複雑なレイアウト

また、これらはそれぞれ、利害関係者を巻き込むプロセスであることも明確にします。あなたは、a)誰がそれを構築することを求めているかとその利点theyが構築されていることから期待することの両方に関して、サイトが誰のためであるかを非常に明確にする必要があります、およびb)誰がそれを使用することを期待されているかおよび利点これらのユーザーは、それを訪問することによって期待できるでしょう。

プロセス全体はAとBの両方を知ることにかかっています。あなたもあなたの利害関係者もそれらを知らない場合、設計プロセスはそれらを見つけるための調査フェーズから開始する必要があります。あなたが正確に何を求められたか。

あなたの利害関係者/クライアントがそれについてまだ明確でない場合、私はあなたの最初の行動がその問題を修正し、そして皆の期待(利害関係者へのアクセスを含むべきであるあなたを含む)を確実に理解することである必要があると私は言います。

3
Adrian Long

UXの観点からのビューを探しているのではなく、Webデザインのような純粋なデザインの観点を探していると思います。そのため、ここで得られる答えは少し圧倒的で混乱します。

したがって、UXの原則に従うことをお勧めしますが、UXの原則はあなたとあなたのクライアントに役立つので、純粋なUIアプローチの基本的な成果物は次のようになります。

  • UIキット
  • ベクトルアイコン(必要な場合。SVG形式が推奨されます)
  • 書体
  • 画像(合法である可能性があることを忘れないでください)
  • インタラクションドキュメント(たとえば、ボタンが押されたときに何が起こるか、アニメーションがある場合に何が起こるか、ポップアップまたはモーダルで何が起こるかなど)

しかしもちろん、これはクライアントの要求と、クライアントとの取り決めによっても異なります。一般的に言えば、PSDだけでは十分ではありませんが、誰が知っているのか...クライアントに聞いて、できるだけ多くの情報をクライアントから得るようにしてください。

1
Devin

それはクライアントに依存し、クライアントはPSDを要求するかもしれませんし、JPEG形式の画像かもしれません。

リーンUXなどのUXの方法に従う場合は、作業方法にも依存します。クライアントに配信するワイヤーフレーム、ビジュアルデザイン、クリック可能なプロトタイプがあります。

0
Abhishek Sharma

方法伝達するデザインは、時間、予算、ツールによって異なる場合があります。ペンや紙、ホワイトボードや付箋、AxureやBalsamiqなどのインタラクティブなデザインツール、PowerPoint、Visio、Wordなどの一般的なオフィスツールを使用して、デザインを伝えることができます。または、Photoshopで美しいものを作成するのに多くの時間を費やしたり、インタラクティブなものを作成するためにhtmlやcssを作成したりできます(Bootstrap html/cssを使用すると簡単です)。

私の要点は、デザインを伝える方法はたくさんあります。デザインを伝える方法は、コミュニケーションにおけるyourスキルなど、いくつかの要因によって異なります。

0
SteveD