web-dev-qa-db-ja.com

HTMLモックアップを作成します。コラボレーションのためにそれらをどのように共有しますか?

クライアントで作業するとき、HTMLモックアップのセットをいくつか作成します。それらは忠実度が高く、応答性が高く、コンテンツが少しあり、アニメーションがいくつかあるなど、通常はバッチで提供されます-ユーザーフローまたはコンポーネントのセットを表示するリンクされた画面のセット。私のワークフローのこの部分は素晴らしいです。

しかし、クライアントとも協力する必要があるため、モックアップをサーバーにアップロードし、それらへのリンクをクライアントに共有します。その後、クライアントは会議、電話、電子メールなどでフィードバックをくれます。このアプローチには、対処したいいくつかの欠点があります。

  1. バージョン管理はフォルダ名を使用して手動で処理されます。つまり、信頼性が低く、面倒です
  2. クライアントがバージョンを参照して比較するための良い方法はありません
  3. クライアントはモックアップのナビゲーションや概要を取得しません
  4. HTMLモックアップの一部として、モックアップバージョンに関連するのではなく、注釈やメモなどを追加する必要があります。
  5. クライアントからのフィードバックは、実際のモックアップの正しいバージョンと直接相関するのではなく、電子メールまたは私のノートブックにあり、私とクライアントに表示されます。

たとえば、 InVisionで問題は解決しますが、ワイヤーフレームツール(またはJPEGからワイヤーフレームツール)の使用には興味がありません。私は実装段階に入るモックアップをよく使用します。また、必要に応じて、スケッチボックスのセットから最終的なフロントエンドコードまで、忠実度を完全に制御できます。これにより、クライアントとの対話が簡単になります-「タブレットウィンドウを表示するには、ブラウザウィンドウのサイズを変更してください」それらのもう1つの気の利いた点は、クライアントの現在のWebサイトの基本レイアウト、または変更に関連するウィジェットを取り込むことができることです。ワイヤーフレーミングツールの使用にはまったく興味がありません。ただし、InVisionがHTMLモックアップをサポートしている場合、私の問題は解決されます。

7
Simeon

これは1つのツールではなく、DropboxとGithubの2つです。他の誰かがそれを設定する方法の説明は次のとおりです。

http://alexcican.com/post/guide-hosting-website-dropbox-github/


編集:

ZurbのNotableは、HTMLモックアップでのコラボレーションに最適なツールのように感じられます。 http://www.zurb.com/notable

3
jay

これらのいずれかを試すことができます。これらはUXツールではありませんが、HTMLを十分に表示し、すべてバージョン管理と共有を備えています。

bl.ocks.org

これは GitHub Gist でホストされているコード例のシンプルなビューアです。

Mike Bostockによって作成され、主に d3.js ページを表示するために使用されます。ただし、基本的に各ページはJavaScriptを使用したHTMLページにすぎないため、モックアップを表示するために使用できます。その後、Gistのバージョンとバージョンのコメントを共同編集できます。

CodePen

最新の作品を自慢して見せてフィードバックをもらいましょう。その厄介なバグのテストケースを作成します。プロジェクトのサンプルデザインパターンとインスピレーションを見つけます。

最後に、常に jsfiddle があります。

更新:

コメントのとおり-WordPressは、あまり技術的ではないクライアントでは機能する可能性があります。WordPress ページテンプレート は、 PHPページ上部にコメントを付け、ページに名前を付けます。次に、ページの下部に次のPHPを含めることで、ページからクライアントからコメントを得ることができます。 :

<?php comments_template(); ?> 
1
icc97

http://notableapp.com は、提案内容にいくつかの素晴らしい機能を提供します。これにより、コードプロジェクト全体をホストし、ユーザーにコメントを付けて変更をコミットさせ、さらにユーザビリティテストに拡張することができます。

これがより良いリンクです- http://zurb.com/notable/features/code

1
OzzyWadd