グリッドベースのワイヤフレームをスケッチするためのベストリソース

のプロセス インターフェースを設計する 常にで始まる アイデア創造. これには、視覚化、他のサイトの調査、ラピッドプロトタイピングが含まれます。この初期のアイデア段階は、非常に重要です。 レイアウトとユーザーエクスペリエンスを理解する あなたは建てるつもりです。では、どのようにして新しいプロジェクトで実際にワイヤフレーミング作業を実行する必要がありますか?

私は伝統的な紙と鉛筆が大好きで、必要に応じて追加の道具が付いています。しかし デジタルワイヤーフレーミング それはまた大きい、そしてそれは現代のデザイナーにとって実行可能な選択肢である。この記事では、あなたがあなた自身のものを作るのを助けるために両方のテクニックのための最良のリソースを共有したいです。 グリッドベースのUIワイヤフレーム.

初期のUI / UXの概念化

の違いを明確にすることから始めましょう。 ワイヤーフレーム そして プロトタイプ. これら2つの単語は同じプロセスに関連しているため、しばしば同じ意味で使用されます。.

A ワイヤーフレーム です 単一静的スケッチ WebページまたはアプリのUIのボタンのテキスト、余白、要素のサイズ、さらにはアニメーションまで説明するための吹き出しがあります。しかしワイヤーフレームはちょうど 各ページの下書き.

同様に、 プロトタイプ のようです 異なるページがどのようにリンクするかを示すフローチャート. そのため、プロトタイプは、さまざまなボタンやリンクが他のページにどのようにつながるべきかを示すためにワイヤフレームを接続します。.

これらの定義は石で刻まれていません、デザイナーによっては彼ら自身の専門用語を持っているかもしれません、そして私の正確な表現に同意しないかもしれません。しかし、これが私が一般的に彼らが説明したのを見た方法であり、そしてそれは多くのデザイナーがこれらの用語を最もよく理解しているのです.

それで、あなたはこれらの初期の概念部分と正確に何をすべきか？それらは本当に必要ですか？プロトタイピングは常に必要というわけではありませんが、特に複雑なインタラクションを使用してアプリケーションを設計する場合には、非常に良い方法です。.

しかしワイヤーフレーミング 常に良い考えです 新しいプロジェクトごとに。それはあなたを助けます 全体像に焦点を当てる 細部について心配することなく。ページ全体がどのようにレイアウトされているかがわかります。これは、具体的なレイアウトを設計するときに非常に役立ちます。.

ワイヤーフレーミングの目標

新しいプロジェクトを始めるたびに熟考する必要があります あなたが解決しようとしているもの. 各サイトは特定の目標を念頭に置いて構築されています。多くのサイトには複数の目標があり、いくつかの目標は他の目標よりも重要です。.

あなたがのための最良の戦略を見つけるのを助けるためにガイドとしてワイヤーフレーミングを使用しなさい ウェブサイトの目的を捉える. これはおそらく最初のワイヤーフレームでは起こらないでしょう。 さまざまなアイデアをスケッチする.

他の同様のWebサイトを調べて、その最高の機能を書き留めます。コンテンツの編成方法と各ページの移動方法を分析する.

からワイヤフレームを考える インタラクティブな立場. これらはただのきれいな写真ではありません。それらはデジタルインターフェースの表現であり、あなたはそれを念頭に置いてあなたのアイデアをスケッチしたいです。.

紙ベースでもデジタルベースでも、グリッドベースのリソースを用意しておくと、簡単なスケッチに非常に役立ちます。それでは、ワイヤーフレームを作成するための最良のリソースを調べてみましょう。.

グリッドスケッチパッド

プリンタ用紙の基本的なサムネイルスケッチから始めることができます。 大まかなアイデアをまとめる. 個人的には、私は通常プリンタ用紙を使い始めます。なぜなら、この方法では、グリッドやその他のことについてはあまり心配していないからです。 アイデアを生み出す.

ドットグリッドスケッチパッド あなたがしたい場合は行くための最良の方法です アイデアを片付ける, そしてそれをもっと構造にしなさい。グリッドはあなたを助けます アイテム間の距離を推定する ページ上で 一種の対称性 ワイヤーフレーム内.

あなたがしたい場合はそこにたくさんの素晴らしい製品があります 紙の上でワイヤーフレーミングを開始する, 例えば、Rhodia Dot Padは日常的に使用するために様々なサイズがあります。 80ページしかありませんが、これはほとんどのグリッドスケッチブックのかなり典型的なものです。.

もう一つの非常にクールでカスタマイズ可能な製品はDotgridです。 Dotgridのすべての商品はRhodiaの本よりも高価ですが、より多くの素材とカスタムのカバーデザインが付属しています。.

Dotgridでは、オーダーメイドの注文も可能です。 あなた自身のカスタムスケッチパッドをデザインする. 各本は100枚以下のシートしか含まれていないので、表と裏を含めて、グリッドスケッチ用に約200ページが得られます。.

私が言及したい2、3の他のドットグリッドスケッチブックはそれが50枚の紙だけを含んでいるけれども、ハードカバーと螺旋綴じであるBehanceドットグリッドを含みます.

レスポンシブデザインスケッチブックは、Webデザイナーにとって最良のリソースの1つです。レスポンシブデザインスケッチブックを必要とする製品設計者は他にいませんが、Web設計者は以下の自由度から大きな恩恵を受けます。 さまざまなデバイス幅でアイデアを生み出す グリッドレイアウトの上に.

これらのレスポンシブデザインパッドにも合計100ページの50枚のシートがありますが、各ページには 4つの異なるレスポンシブグリッド レスポンシブデザインでさまざまなブレークポイントを表す：デスクトップ、ラップトップ、タブレット、スマートフォン.

デザインはDotgridの本と比べると当たり障りのないものですが、Webデザイナー向けのレスポンシブスケッチブックを検討した人は他にいません。あなたがそのようなことに興味があるなら、それはそれをテストドライブのために注文する価値があります.

あなたが本当に手作りのものに興味があり、そしてあなたがすることができるどんなお金も使いたくないのであれば あなた自身のグリッドページを印刷する インターフェーススケッチ付き。この無料サイトは 異なるグリッドテンプレート 印刷でき、手描きのワイヤーフレームに使用できること.

グリッドは、さまざまなスタイルの印刷用紙用に、A4とUSの文字サイズで用意されています。フルサイズのWebブラウザ用のテンプレートや、さまざまなiPhoneの画面など、さまざまなオプションから選択できます。.

これらのオプションはすべて素晴らしいものであり、慣れてきた場合には検討する価値があります。 鉛筆画. 紙は新しいアイデアを素早く理解するための最も簡単な方法の1つです。そのため、UI設計者でも、紙が好まれることがよくあります。.

デジタルツールとWebアプリ

分析麻痺の危険を冒さずにはカバーできないほど多くの素晴らしいワイヤフレーム作成プログラムがありますので、ここではいくつかの最良の選択肢に焦点を絞りましょう。 グリッドベースのワイヤーフレーミング.

まず、Illustratorなどのアドビのツールを使用して、 あなた自身のワイヤーフレームを作成しなさい. これは全員のワークフローの一部ではなく、Illustratorは確かに無料ではありません。しかし、すでにAdobe Creative Cloudを使用しているのであれば、それは始めるのに良い場所かもしれません。.

1.モップ

Moqupsは最高のオンラインツールの1つです。 ワイヤーフレーミング. ビジュアルエディタとアセットのライブラリを使用して、ページ全体にドラッグアンドドロップします。.

それぞれの新しいMoqupsプロジェクトには 定義済みグリッド, 明るい紫色の線を使用して、要素を配置に合わせることができます。これは、グリッドを使った設計を非常に簡単にする優れたWebツールです。.

このサイトはデフォルトで無料プランで運営されており、ユーザーは300ページのオブジェクトに制限されています。このサイトにはプレミアムオプションがあるが、毎月の料金を支払うのは、アドビのツールを使ったり、Sketchを1回購入したりするよりも面倒かもしれない。.

2.グリッド紙

Grid Paprウェブアプリは完全に無料で、あなたのワイヤーフレーム用にパブリックとプライベートの両方のアカウントを提供します。あなたはあなたのプロジェクトの名前を作成し、あなたがどんなコンピュータからでも編集できるワイヤーフレームのためのあなた自身のユニークなURLを得ます.

新しい各ワイヤーフレーム グリッドが付属しています これにより、すべての要素に対してグリッドに合わせることができます。機能は単純ですが、十分です。 数分でlo-fiワイヤフレームを作成. 必要なものをページにドラッグして、グリッドに従って星のワイヤーフレームを作成するだけです。.

3. Wireframe.cc

Wireframe.ccは、ワイヤフレーミングに使用できる最もシンプルで最小限のツールの1つです。それは 雑然としたインターフェース とともに 既成グリッド そして 整理されたツールバー. クリック＆ドラッグするだけで、キャンバス上に新しい要素を作成できます。作業内容を保存して共有することもできます.

これはオプションのプレミアムプランで無料で提供されるもう一つのツールです。各プランは毎月請求されるため、価格構成はMoqupsと非常によく似ています。無料ツールは、アカウントがなくてもどのコンピュータからでも使用できます。.

4.モッキンバード

Mockingbirdは、他の優れた選択肢です。これは、ほとんどのワイヤフレーミングツールよりもはるかに多くの機能を提供します。あなたは無料で始めることができますが、裁判は7日間に制限されています。これは一部のユーザーにとっては厄介なことになり得ますが、このツールは本当に素晴らしく、すべてのブラウザで動作します。.

Mockingbirdには、次のようなUI要素の無限のライブラリがあります。 タブ、アコーディオン、ドロップダウンメニュー、ビデオプレーヤー、簡単なテキストリンク. デフォルトのグリッドは960gsグリッドシステムを使用しますが、あなたはから選ぶことができます 12、16、および24列.

最後の言葉

あなたが伝統的なまたはデジタルワイヤフレームを選ぶかどうかに関係なく、それは常に 出力品質. この種の作業を行うときに学ぶべきことがたくさんあるので、あなたにとって最も快適なツールを見つけましょう。.

最善を尽くすことは前進することです ワイヤーフレーミングを開始する. あなたが一番好きなもの（紙またはデジタル）を手に入れて、自分だけのものにしましょう。この記事のリソースは、あなた自身のデジタルインターフェースをワイヤーフレームで始めるために十分なものをあなたに与えるべきです。.

（Oykun Yilmazによるカバー写真）