このデジタルの世界では、すべての企業がオンラインに依存しているため、eコマースWebサイトの需要は日々増加しています。 また、eコマースは世界中で競争しているため、誰もが最高のプラットフォームを作成したいと考えています。
そして、最高のeコマースWebサイトを作成するための主な条件は、効果的なワイヤーフレームを設計することです。
ワイヤーフレーミングは、ウェブサイトのデザインプロセスの最初の段階です。 ワイヤーフレーミングの目的は、ページの流れを整理して把握するための最小限の方法で作業することです。
フォントや色などを気にする前の段階です。 ワイヤーフレーミングを使用すると、非常に迅速に作業し、多くのアイデアを生み出すことができます。
あなたがあなた自身のものを持つことを考えているなら eコマースのウェブサイト、これらのガイドラインに従ってください。 ここでは、eコマースWebサイトのワイヤーフレームに必要なヒントとベストプラクティスを紹介します。
ワイヤーフレーミング:ベストプラクティスとヒント
常にペンと一枚の紙だけを使用してワイヤーフレーミングを開始します。 あなたはコンピュータから始めることができ、多くの人がそれをします。 ただし、灰色のボックスだけを実行し、デフォルトのフォントを使用する方が適切です。
物事を適切に配置しようとしたり、ボックスを正確に正しいサイズにしようとしたりするときは、それらの細部に焦点を当てるときです。 そうすると、流れが失われ、迅速なアイデアを生み出すことができなくなります。
ですから、ペンと紙だけでこだわると、本当に散らかってアイデアを出すことができます。 eコマースウェブサイトのワイヤーフレームを設計するために従うべきことについて話しましょう。
あなたのeコマースウェブサイトの内容を知っている
始める前に、あなたはあなたがデザインしているページでどんなコンテンツが起こっているかを知る必要があります。 あなたの仕事は情報をデザインすることですので、あなたはどの情報がページに起こっているかを知る必要があります。 設計を開始する前に理解する必要のある情報。
これは、正確なコピーを完成させる必要があるという意味ではなく、情報の大まかなアイデアを持っている必要があるだけです。 それが何であるか、そしてそれがどれだけあるか。 ここでは、eコマースWebサイトの一般的なコンテンツのリストを作成しました。
- ヘッダー
- バイオ情報
- フッター
- 各投稿の写真とタイトル
- 多分宣伝文句
- ソーシャルメディアリンク
- 検索バーとニュースレターの登録
Crazy8のテクニックを使用してアイデアを生成する
アイデアの生成を開始するには、次のような手法を使用できます。 「クレイジーエイト」。 この手法によると、8枚の紙をXNUMXつの異なるセクションに折りたたんでから、 8 ワイヤーフレームのさまざまなアイデアを可能な限り迅速に。
自分に最適なものなら何でも、好きなだけ大きくまたは小さく描くことができます。 ページが長い場合は、片側でXNUMXつ、次に別の側でXNUMXつ実行することをお勧めします。 これは、脳のウォーミングアップ手法として機能します。 デザイナーは、eコマースWebサイトについてのアイデアを考え始めるので、常に魅力的だと感じています。
すべてを整理したいという明白な方法がXNUMXつだけあります。 しかし、ますます多くの概念を考えさせられると、頭の中に隠していたすべてのアイデアに驚かれることでしょう。
建物の青写真のようなワイヤーフレームを考えてください
を作ることを検討してください 青写真 ワイヤーフレーミング時のeコマースウェブサイトの。 ワイヤーフレームの目標は、デザインの各画面の基本的なスケルトンを作成することです。 そうすれば、クライアントと一緒にデザインの全体的なレイアウトを確認できます。
新しいモックアップを描く
子供が他の人にそれを描いたように見えるかどうかは本当に問題ではありません。 重要なのは、アイデアを出しているということです。 これで、それが何を意味するのかがわかり、デザインを開始する場所ができました。 このフェーズの後、8つの概念を確認し、調査する価値があると思われる小さな星をその横に配置します。
時々私は行って、それらすべてのビットの新しいモックアップを一緒に描きます。 ただし、通常は、この時点でコンピューターに移動する必要があります。
どのようなプログラムが必要ですか?
eコマースWebサイトのワイヤーフレームを作成するために、プログラムは必要ありません。 必要なのは古き良き紙と何かを書くことだけです。 しかし、私は使用することを好みます Invision ワイヤーフレームを作成するときはフリーハンド。
鉛筆と紙は素晴らしいですが、フリーハンドでワイヤーフレームを直接クライアントに送ることができます。 それらをリアルタイムで提示し、同じドキュメントにメモをとる機会も与えます。 これにより、反復して高速に配信できます。
Sketchアプリを使用してeコマースWebサイトをワイヤーフレーム化する
Sketchというプログラムを使用して、ワイヤーフレームをモックアップできます。 ただし、ここでは、プレーンな灰色のボックスとデフォルトのテキストを使用します。 これは、クライアントに多くのデザインを提示する必要があるためです。 色や適切なアイコンなどを使用すると、すべてが混乱します。
SketchでワイヤーフレームをXNUMXつだけ作成しないでください。 このスケッチプロセスのお気に入りの部分について、アイデアがあれば、できるだけ多く作成してください。 その後、その上で寝ることをお勧めします。 そうすれば、次の段階に進む前に、新鮮な心と新鮮な視点でそれに戻ることができるようになります。
あなたの製品の目的を知る
ワイヤーフレームを開始するときは、製品が何を達成する必要があるかを知る必要があります。 たとえば、eコマースWebサイトのモバイルアプリの単純なサインイン画面をワイヤーフレーム化するとします。 これらの画面には通常、ユーザー名とパスワードのフィールド、送信ボタン、召喚状などのいくつかの必須項目があります。
ただし、主な目標は、ユーザーをサインインさせることです。実際にワイヤーフレームの作成を開始する前に、知っている要件をリストしてください。
優先度の高い順に、またはユーザーにとって最も重要な順序でそれらをリストするようにしてください。 要件が整ったので、重要な部分に進むことができます。
スケッチ
スケッチは、アイデアをすばやく引き出すことができるため、ワイヤーフレーミングに不可欠です。 心配なら、マウスでスケッチするのは難しいでしょう。 フリーハンドを使用すると、単純な長方形を非常に簡単に作成できます。
AltキーまたはOptionキーを押しながらシェイプを描画すると、スムーズになります。 これは円でも機能し、描画時にシフトを保持して直線を作成したり、塗りつぶしや不透明度のオプションで遊んだりすることもできます。
ご覧のとおり、ビジュアルに関しては、ワイヤーフレーミングはそれほど複雑な作業ではありません。 それは主にインターネットの他の部分と同じようにボックスとテキストです。 違いはその背後にある考え方です。 ワイヤーフレームで作成されたものはすべて、アイデアをすばやく伝えることを唯一の目的としています。
あなたのeコマースウェブサイトをワイヤーフレーミングするための最良のデバイス
iPad Pro、Apple Pencil、およびConceptsというアプリを使用できます。 このアプリでは、無制限のキャンバスを持つことができます。 そして、スケッチを続けて、常にページを移動して、より多くのアイデアを引き出すことができます。
eコマースWebサイトに含める必要のある重要な要素
製品リストページは、eコマースWebサイトの必需品です。 したがって、優れた魅力的なランディングページをデザインする必要があります。 その上、ワイヤーフレーミング中に覚えておくべきいくつかの要素があります。 彼らです-
- 製品カード
- フィルタ
- 製品詳細ページのデザイン
- 高品質の画像
- カートボタン
- 価格ボタン
- 製品説明の詳細
- チェックアウトボタン
- クーポンコード
まとめ
eコマースWebサイトをワイヤーフレーム化するときは、ユーザーエクスペリエンスに焦点を合わせてください。 最初の段階では、紙と鉛筆だけが後で視覚的な磨きに行きます。
優れたオンラインショッピング体験を実現するには、次のガイドラインに従ってください。 適切な階層と配置により、スキャンしやすい製品のページが作成されることを覚えておいてください。
そして使用する Zパターン ページデザインでは、すばらしいユーザーエクスペリエンスも提供されます。 常にユーザーの立場に立って、重要な情報について考えることを忘れないでください。 eコマースWebサイトのワイヤーフレーミングについては以上です。
専門のデザイナーが取るだろう 4-7 ワイヤーフレームを作成する日数。 そして、平均的な設計者にとって、それは遅れるかもしれません 12-20 日以上。
ワイヤーフレームは青写真であり、モックアップは視覚的なモデルです。 これは、鉛筆スケッチにデジタルで色付きのフォームを与えると、モックアップに変わることを意味します。