ウェブサイトのモックアップ/インターフェース設計を構築する方法は？
Photoshop以外にWebサイトをデザインする方法はありますか？新しいユーザーインターフェイスのワイヤーフレーム/モックアップをすばやく作成し、UI要素を移動して再配置したいと考えています。
ワイヤーフレーム/モックアップにはいくつかのオプションがあります。
そのための専用ソフトウェアをいくつかお勧めします。
- アクスル
- オムニグラフル
- Balsamiqモックアップ
- iPlotz
これらすべてのプログラムにはいくつかのUI要素が含まれており、それらのコレクションをさらにダウンロードしてロードできます。さらに、Axureはプロトタイピングのための本当に強力なツールです。これらのどれもがフリーソフトウェアではないことを知らせてください。
最近、私はInDesignのような他のソフトウェアも使用しました。これは非常に興味深く、多くの可能性がありますが、ソフトウェアを正しく理解する必要があります。
Bootstrap 、 Foundation 、 Zimit などのレスポンシブなフレームワーク、またはその他の選択肢を使用してサイトを作成するというアイデアを楽しむことができますさまざまなブラウザやデバイスで簡単にプレビューできるプロトタイプ。慣れるには少し時間がかかりますが、既存のフレームワークを使用してWebサイトのプロトタイピングを行うことにより、はるかに高い柔軟性が提供されます。
さまざまなデバイスで簡単にテストできること以外に、私のお気に入りの利点の1つは、受け取ったフィードバックに基づいて迅速に変更を加えることができることです。小さな例として、Photoshopで作成した画面が20あり、クライアントが各画面にあるキャッチフレーズを変更するように要求したとします。各ファイルを個別に開いて編集する必要があります。レスポンシブフレームワークを使用してプロトタイプを構築する方法に応じて、この種の編集を1つのファイルで行うことができ、時間を節約できます。
プロトタイプを作成するこの種のアプローチは、Stephen Hayの「Responsive Design Workflow」でも推奨されています。この本全体は、この方法でプロトタイピングを行うためのガイドですが、すぐに使えるレスポンシブフレームワークの使用に重点を置いていません。プロジェクトの成功を祈ります！