web-dev-qa-db-ja.com

ワイヤーフレーミングに適したものは何ですか:PhotoshopまたはIllustrator?どうして?

フロントエンドを構築するために後でUIエンジニアが使用するPSDワイヤフレームの作成について話している多くのWebサイトやフォーラムに出くわしました。私はいつもIllustratorの方がワイヤーフレームに適していると思っていました。

4
Viraj

イラストレーターの線がすっきりしていて、見栄えの良いワイヤーフレームが作成される場合がありますが、UIの設計にすぐに進むことはできません。しかし、もっと重要なことは、あなたが考え、プロトタイプを作成することができるものを、より迅速かつ簡単に使用することです。それが最も重要です。

9
jonshariat

Fireworksは、PhotoshopとIllustratorの両方の長所であり、妥協はほとんどありません。Web開発用に構築されています。

これが私の流れです

紙のスケッチ>> FireWorks >> HTML

構築プロセスを複雑にしないでください。HTMLに到達するまで、できるだけ軽くしてください。 Fireworksでは、さまざまな状態、マスターページ、より優れたスライスツールを使用できます。プロジェクト全体を1つのファイルで実行できます。

7
Siddharth Menon

...場合によります。 2つのうちどちらかを選択する必要がある場合は、プロトタイプをすばやく簡単に作成できるように、知っているツールのいずれかをお勧めします。

しかし、特定の状況では、画像エディターによって作成された「現実的な」ワイヤーフレームはとにかく不適切です。ワークフローや幅広い概念について話し合うだけの場合は、実際のUIの余分なテキストとボタンが邪魔になる可能性があります。これは、(私が見たものから)プロトタイプをリリースされたばかりの本物と混同する悪い癖があり、雑学について簡単に脇道に出てしまうクライアントに話している場合に特に当てはまります(「ああ、しかしそのようなラベルを書かないでください...」)。

これで、PSを使用して「抽象的な」モックアップを作成できますが、それではBalsamiqやMockingbirdなどのツールを使用してみませんか?

私が言ったように、それは依存します。あなたの状況についてもっと知りたいです。

6

私はアドビのUXDです。

Johnathan Shariatは正解です。最も速いものは何でも使用し、可能な場合はツールにとらわれないでください。私は特に、あまり洗練されていない外観のワイヤーフレームを作成するために、スケッチやバルサミコモックアップを奨励します。

スケッチになっているほど、細部やルックアンドフィールにからむのではなく、コアコンセプトとコンテンツに重点が置かれます。

私たちのチームについては;

ほとんどの場合、ワイヤーフレームにはイラストレーターとオムニグラフを使用します(FireworksとInDesignを使用していますが、あまり一般的ではありません)ビジュアルデザインと画面デザイン/最終的なUIコンポーネントにもイラストレーターを使用しています。ワイヤーフレームからピクセルパーフェクトに移動してコンポーネントを再利用するのは非常に簡単です。

理想的ではありませんが、ほとんどの場合、Photoshopワークフローのがらくたを打ち負かします。

フォトショップがワイヤーフレームに適していないと言った人は誰でも->洗練された画面デザインは答えからその詳細を本当に省くべきです、それは完全に誤解を招くものです。

5
Accomplice

この質問に非常に正確に答えることは非常に簡単です。各ステージが存在する連続体があり、使用するための関連する「最適な」ソフトウェアパッケージがあります。

概念>構造>プロトタイプ>実際のUI

このプロセスのどこにいるかによって、何を使用するかが決まります。コメント投稿者の何人かは、最終的なUIに簡単にジャンプすることについて話しますが、これがプラスになるのは、プロセスの終わりに非常に近い場合だけです。

以下は、対応するソフトウェアパッケージです(同様の数のステージに従いますが、より流動的です)。

Illustrator> Balsamiq/Mockingbird/Visioなど> Photoshop [概念>構造>プロトタイプ>実際のUI]

私は、ソフトウェアが最も速く、最も効率的に完了することができる機能に合わせてソフトウェアを注文しました。もちろん、Photoshopを使用して構造を設計することもできますが、なぜその段階で、視覚、パワー、および整理のパワーをすべて必要とするのでしょうか。

1
Mike Biggs

3年以上前にPhotoshopとIllustratorからBalsamiqに切り替えて、振り返ったことがありません。

ワイヤーフレームを作成するより効率的な方法を想像することは不可能です。

FireworksやOmnigraffleも試しましたが、Balsamiqが最高です。

1
SimplGy

一般的に、

Photoshop、写真補正、写真の色補正、ソフトウェア/ Web /モバイルUIデザイン。ほとんどのデザイナーはPhotoshopに精通しています。

0
Pir Abdul

ワイヤーフレーミングには、Illustrator、Photoshop、Omnigraffleを使用しました。しかし最近、私はワイヤーフレーミングに基調講演を使用することに出くわしました。基調講演では、ユーザーが体験するものに似たクリック状態とアニメーションを設定できます。

興味があれば、情報とテンプレートがあるサイトをいくつか紹介します。

http://keynotopia.com/themes/

http://keynotekungfu.com/

Axureでインタラクティブなワイヤーフレームを確認する必要もあります。

http://www.axure.com/

0
Stephen

それはあなたの組織の要件とスキルに依存すると思います。私の個人的な経験はどちらでもありません。ワイヤーフレーム/プロトタイピング用に特別に設計されたツールを使用します。

Omingraffle/Axureは、人気のあるデスクトップベースのソリューションです。単なるワイヤーフレーミングよりもプロトタイピングに焦点を当てていますが、かなり強力です。個人的には、基本的なクリックスルーワイヤフレーム以外に使用すると、Axureの学習曲線が少し高くなります。

Visioは、必要なのが静的ワイヤーフレームだけである場合に適しています。十分なテンプレートエンジンが組み込まれています。

個人的には、ワイヤーフレーム/プロトタイプを迅速に反復する機能が有用であると感じており、Hotgloo/Balsamiq/Gliffy/mockingbirdなどのWebベースのツールを使用します。

ワイヤーフレームからプロトタイピングへの移行:豊富な機能が必要で、スキルがある場合は、Bootstrapなどのフレームワークを使用してHTML/CSS/Javascriptプロトタイプを開発することを検討します。

0
Sheff