ワイヤーフレームとは何ですか？
OK。ワイヤーフレームとは何かを知っていますが、それでも多くの助けが必要です。この質問は、実際には、オンラインショップのワイヤーフレームを「設計」するときの開始方法を尋ねたいと思っています。私はウェブデザイン会社でインターンシップをやっていて、現在の仕事は車を販売するオンラインショップの一般的なワイヤーフレームをデザインすることです。そのようなウェブサイトの素晴らしい例を知っていますか？この最初のワイヤーフレームを作成するときに実行したい「ステップ」は何ですか？
私はPhotoshopでワイヤーフレームを作成しますが、その方法は私が必要としているものよりも多すぎます。 Balsamiq Mockupsでいくつかの基本的なワイヤーフレームを作成しました。これは、ワイヤーフレームをクライアントに提示したい場合にワイヤーフレームを作成するための優れたプログラムであり、ワイヤーフレームが見栄えがする必要があるということではなく、Balsamiqのスケッチの外観はラフに少し。単純なワイヤーフレームに関しては、Photoshopのヒントは必要ないと思います。これは、基本的なツールとグレーのシェードのみを使用するためです。フォントサイズについても考えますが、そうは思わない。とにかく、Photoshopでワイヤーフレームを作成するためのヒントがあると思うなら、すべて大歓迎です！ありがとうございました
まあ、まず、これがインターンシップである場合、この質問は本当にあなたのメンターと同僚に向けるべきです。インターンシップのポイントは彼らから学ぶことです。
とはいえ、ワイヤーフレームはアイデア/コンセプトを伝えるためのスケッチです。この用語は、ワイヤーフレームがオブジェクトの基本的なプリミティブである3Dモデリングに由来し、完全にレンダリングされたモデルにコミットすることなく、フォームとスケールの感覚を与えます。 （コンピューター以前は、物理的なモデルを使って手動で行う必要がありました。これは、粘土などの基板を適用してフォームを肉付けする「ワイヤーのフレーム」として開始されることがよくありました）。
Webサイトのコンテキストでは、ワイヤーフレームはプロジェクトのコンテキストに応じてさまざまな目的を果たします。これらには以下が含まれます。
- サイトフロー（通常はフローチャートで行われます）
- 相互作用（ワイヤーフレームで文書化するのは必ずしも容易ではありませんが、一般的です）
- 一般的なコンテンツ構造
- 一般的なページレイアウト
ワイヤーフレームにはPhotoshopをまったく使用しません。ビジュアルデザインを追加するのは魅力的ですが、それはワイヤーフレームに必要なものではありません。 Balsamiqに固執するか、さらには（もちろん、私見）-ペンと紙に固執してください。
自動車を販売する素晴らしいWebサイトについては、まだ見たことがあるかどうかわかりません。 ;）
ただし、他の自動車サイトを見ることは重要ですが、ワイヤーフレームは実際にはクライアントのプロジェクトのビジネス目標に基づいて構築する必要があることに注意してください。理想的には、すでにいくつかのペルソナとプロジェクトの要件を満たしているはずです。
追伸この質問はおそらくUXに移動する必要があります
ワイヤーフレームは、Webページのどこに配置するかのプロトタイプまたはクイックドラフトです。ワイヤーフレームは配置と形状を強調します。一部は機能の範囲に関連しています。
全体的な目標は、使いやすさとユーザーエクスペリエンスに焦点を当てることです。
これを実行できるさまざまなツールがあります：photoshop、illustrator、indesign。その目的のために特別に設計されたツールもあります。
ワイヤーフレームに関係なく、手描きも可能です。
このテーマの詳細： http://wireframes.linowski.ca/ -Wireframes Magazine
クライアントに表示される実際のワイヤーフレームの例（Verizonワイヤレスページ）
重要な質問にはすでにいくつかの良い答えがあるので、いくつか注意点を追加しておきます。
- 「色を追加してくれませんか？」のようなリクエストには注意してください。または「きれいにしましょう」。それはワイヤーフレームの目的ではありません。ルックアンドフィールではなく、ページの使用、コンセプトに焦点を当てています。
- 繰り返す準備をしてください。あなたの最初の努力は本当に荒いことができます-その後の努力はそれを引き締めます。すべてをワイヤーフレームバージョン0.1に強制しようとしないでください。
- 以前のプロジェクトのワイヤーフレームを要求して、会社の人々が過去に何をしたかを確認してください。これにより、会社固有のワイヤーフレームの使用法をうまく理解することができます（ゴールデンスタンダードはありません-私が覚えているよりも多くの会社でワイヤーフレームを作成し、誰もがわずかに異なる期待を持っていました）。
ここに私が私の友人のために馬鹿げたことを試みる方法があります：
あなたが好きなウェブサイトを取り、それをすべてのカラーから取り除いてから、すべてのコンテンツおよび/またはデジタル資産（画像、ビデオなど）を取り除いてください
残っているすべてが青写真のような形をした白黒のページになるまで、このプロセスを繰り返し続けます。青写真は、＃1の要素でいっぱいになると、最初のサイトを構成します。
可能性は-その特定のサイトのワイヤーフレームは、あなたが想像しているものにかなり近く見えました。
Eコマースショップを設計するには、2つの方法があります。
- 「ロレムイプサム」のナンセンスに満ちたワイヤーフレーム/モックアップから始めて、「サインオフ」機能を使用して、選択したeコマースソリューションと実際の製品情報を操作しようとする悪夢が少しあります。
- Eコマースソフトウェアのデフォルトのテンプレートから始めます。ここでは、機能性/使いやすさをすべて考慮しています（ただし、好みに合わせたものではありません）。実際の製品データを「lorem ipsum」のゴミの代わりに入れてください。次に、製品の購入の過程をたどって、途中でいくつかの画面を節約します。
ローカルスタイルシートといくつかのFirebug CSSの編集を組み合わせると、2番目のアプローチは、配信できる機能的なワイヤーフレームを取得します。また、カートに追加したことを顧客に伝えるメッセージボックスなどを見落とすこともありません。 。アカウントエリアのボタンなども見逃しません。
バルサミクスタイルの図面は最近少し退屈になっています-Comic Sansよりも陽気です。アカウント/検索/ナビゲーションの移動先の規則に従ってカートソフトウェアが再発明されたときに、ホイールがどのように再発明されるのかモックアップするのですか？
グリッドを使用するというこの概念もあります。グリッドレイアウトにデータを入れてPhotoshopで一日を過ごすか、ペンと紙でそれを行うことができます。 A4シートを入手し、それを数回に半分に折り、ヘッダー、製品画像、説明、今すぐ購入、その他のボタンをレイアウトするためのグリッドがあります。これを、firebug/localスタイルシートを使用した迅速なプロトタイピングで実装します。