Webデザイナーのための7つのプロトタイピングツール

あなたはその違いを知っていますか ワイヤーフレーム, モックアップ そして プロトタイプ? これら3つの用語は、同じことを意味するためによく交換可能に使用されています。問題は、そうしてはいけないということです.

A ワイヤーフレーム です デザインの静的で忠実度の低い表現. 提案されたデザインの外観や形状の概要は説明されていますが、その機能や雰囲気は説明されていません。 A モックアップ より多くの情報を提供する. モックアップは 中〜高忠実度の描写 提案された設計の。モックアップも静的です 彼らは対話性を証明していない.

プロトタイプ, その一方で、動的. 彼らはすることができます 選択したほぼすべての詳細度まで、最終的なデザインを表現する. プロトタイプもテストできます 実際の最終製品であるかのように, それは同じルックアンドフィールを提供できるからです。 3つのうち、印象を最大限に活用するものはプロトタイプでしょう.

プロトタイプの作り方

現在、プロトタイプの目的は、選択された設計機能を正確に証明することです。 Webまたはアプリアプリケーションのプロトタイプは、通常、三ステージ数：

ページフロー（ユーザーがナビゲートする方法）はスケッチされています.
各ページのいくつかの忠実度の低いバージョンが作成され、ユーザビリティテストが行われています.
得られた教訓から、提案された設計の忠実度の高いモデルを作成するための詳細が追加されます。.

この記事では、プロセスを容易にし、作業を簡単にし、プロトタイプをずっと早く作成できるようにするためのプロトタイプ作成ツールをいくつか紹介します。ここで試す7つの試作ツール.

インビジョン

InVisionは、Slack、Dropbox、MailChimpなどの著名人と共に、世界のプライベートクラウド企業のリストのトップに近いForbesによるとされています。この栄誉は、InVisionの「常時接続」プラットフォームのおかげです。 コラボレーション、フィードバック、そして忠実度の高いプロトタイプの作成がとても簡単.

InVisionを使用すると、プロジェクトの画面とステータスを単一の場所から管理し、リアルタイムで共同作業を行い、バージョン管理を維持することができます。 本物のWebおよびモバイルアプリのルックアンドフィールを持つピクセルパーフェクトプロトタイプの構築. InVisionを使えば、 無料で無制限のテストを実施 プロトタイプに.

デザインの世界とInVisionの200万人以上のユーザーがこのプラットフォームを気に入っていることを発見するには、無料トライアルにサインアップしてください。 InVisionリンクをクリックして始めましょう。.

ピドコ

あなたが必要かどうか クリックスルーワイヤフレーム, または 完全対話型のUXプロトタイプ, Pidocoはすぐにそして大騒ぎなしでそこにあなたを導きます。簡単なスケッチ機能から始めて、次の一連のものを作成できます。 カスタムテンプレート, を作成 インタラクティブな要素 あなたが必要, プロトタイプを提示する 他の人たちに、そして彼らのフィードバックを待ってください。.

Pidocoを使用すると、提案されているWebまたはアプリのデザインと同じルックアンドフィールを備えた、素早い、前向きのフィードバック、または高忠実度モデルを求める低忠実度のプロトタイプを構築するために必要なすべてが得られます。このツールも生成します 仕様書 チームメンバーの青写真として役立つことも、サインオフのためにクライアントに提示することもできます。.

プロト.io

Proto.ioは、モバイルアプリの設計作業を支援するための高品質のプロトタイピングツールが必要な場合に理想的な選択肢です。 Proto.ioは、専用のモバイルプロトタイピングプラットフォームです。 ほとんどのブラウザで動作します, コーディング不要, そしてあなたがすることができます 完全にインタラクティブなモバイルアプリのプロトタイプをデプロイする そして シミュレーション それは本物のルックアンドフィールを持っています.

このツールを構成する3つの部分、ダッシュボード、エディタ、およびプレーヤーが組み合わされています。ダッシュボードはマスターコントロールおよびプロジェクトマネージャとして機能します。エディタは、デザインをエミュレートしてインタラクションを構築するための一連のツールで構成されています。プレーヤーを使えば、Webブラウザでプロトタイプを表示したり、対話したり、フィードバックを求めたり、実際のモバイル機器でテストしたりできます。モバイルアプリのデザインがあなたのものであれば、これはあなたのためのツールです。.

Webflow

探している人のために オールインワンデザイン、プロトタイピング、および開発ツール, 検索はここで終わります。まず第一に、Webflowを使えば、次のことができます。 忠実度の高いプロトタイプを作成してテストする あなたはあなたの設計努力を援助する必要があります。しかし、ここで違いが生じるところです - あなたが構築するものはすべて、プロダクション対応のHTML / CSSとJavaScriptによって動かされます。結果?

あなたはできる 完全にインタラクティブなプロトタイプから開発された製品へシームレスに移行. プロトタイプ、設計、および開発は同じパッケージに入っています。これには必要なコラボレーション機能も含まれています。ところで, すべてが反応する 同様に.

パワーモックアップ

この特殊プロトタイピングツールキットは、PowerPointユーザーを念頭に置いて開発されました。 PowerMockupは実際にはPowerPointアドオンであり、これを使用することができます。 Webサイト、デスクトップアプリ、またはモバイルアプリ用のワイヤフレームとモックアップを作成する. PowerMockupライブラリから図形やデザイン要素を選択してPowerPointスライドにドロップするだけのことです。.

そうすれば、 PowerPointのスライドショーとアニメーション機能を使用して他の人とあなたのデザインをプレビューする. 自分の図形や要素をライブラリに追加したり、必要に応じて他のPowerPointユーザーと共有したりできます。.

ルシチャート

Lucidchartはを搭載したオンラインアプリケーションです。 設計要素とデバイスタイプのライブラリ そこから、あなたのウェブサイトやモバイルアプリのデザインのワイヤーフレームやモックアップを素早く構築することができます。それは持っています 清潔で使いやすいインターフェース, そしてそれはドラッグアンドドロップ技術を備えています, インタラクティブデモ機能, 非常に複雑なシミュレーションを構築できるようにするレイヤーテクノロジ.

Lucidchartはまたのための便利なツールです。 プロ並みのプロジェクトワークフロー図とフローチャートの作成, そのコラボレーション機能はスムーズに機能し使いやすい.

HotGloo

デザインの提案されたUXをエミュレートすることは時々挑戦を提示することができます。だからHotGlooが必要なのです。巨大な 要素ライブラリ そして UIウィジェットギャラリー, エクスポートと共有 チームメンバーとのコラボレーションだけでなく機能も備えているため、ほとんど時間がかかりません。.

質問がある場合、またはサポートが必要な場合は、完全なドキュメンテーションがあります。 役に立つビデオチュートリアル そして ライブウェビナー 利用可能です。プロトタイプをブラウザで直接作成したり、共有したり、任意のモバイルデバイスでプレビューしたりできます。できます あなたの作品をHTMLにエクスポートする. ワイヤーフレーミングとプロトタイピングは、これまでになく簡単で楽しいものになりました。!

それをまとめる

このリストから、特別な目的のためのツールから、一見の価値があるオールインワンのツールまで、たくさんの選択肢があります。これらはすべて最高品質のツールなので、リスクが伴うことはなく、いつでもデモを見たり無料トライアルを依頼することができます。.

これらの製品は大きなユーザーベースを持っています。大手企業によって使用されているか、推奨されています。それで、あなたがどれを選んでも、あなたはあなた自身が良い会社であることに気づくでしょう。あなたがモックアップ、ワイヤフレーム、またはプロトタイピングツールを探しているかどうか、あなたは上記のあなたの必要性のためのツールを見つけるでしょう.