Photoshopを使用しないWebデザインワークフロー
信じられないほどの時間をワイヤフレームに費やしてからPhotoshopで設計するという考えから離れて、Webデザイナーの話がますます増えています。私はこれについてみんなの意見を得たいと思っています。レスポンシブになるという観点から、これまで以上に毎日の規範は？
私はまだPhotoshopで多くの時間を費やしていますが、もっと良い方法があるかどうか知りたいですか？
編集：
私はあなたの言うことをすべて聞いているので、他の情報源も見つけています。ここで1つは、最新のWebデザインワークフローのCSSトリックからの何かです
http://css-tricks.com/video-screencasts/124-a-modern-web-designers-workflow/
私はフロントエンドの開発を始め、UXに特化するようにシフトしたので、Photoshop/Illustratorからブラウザーへのルーチンを実行するために多くの時間を費やしました。
私が今いるチームに参加したとき、私はアジャイル環境に適応する必要があり、うまく機能するバランスを見つけることができました。ちなみに、私が取り組んでいる小さなチームでは、フロントエンドの開発、設計、およびUXを実行する「ユニコーン」タイプの1つです。そのため、私の方法がすべての状況で機能するとは限りません。
私たちのスペースにはたくさんのホワイトボードがあるので、プロジェクトの最初のイテレーションでは、プロジェクトの戦略と目的を理解するために時間を費やし、次に、ホワイトボードのフローとレイアウトオプションのすばやく汚れたスケッチに飛び込みます。 。
私のチームの他の人々からいくつかのフィードバックを得て、それが最も理にかなっているとしたら、私はワイヤーフレーミングに移り、その概念をクライアントに示します。そのフィードバックに基づいて、必要なフローをクリーンアップし、プロトタイピングを開始する（コンセプトが開発前にテストを必要とする場合）か、開発に取り掛かります。
私がこのルーチンを実行して見つけたのは、ブランディングと必要な「デザイン」がアプリケーションまたはWebサイトの機能とアーキテクチャに基づいて自然に発生することです。後の反復中に、さらに設計が必要な場合は、機能を補完する傾向があります。私がこの点で気に入っている点（そしてクライアントがこの点について気に入っている点）は、デザインを回避しなければならないユーザビリティではなく、機能性を強調するデザインの働きです。
私も聞いてこの話をしました。私の考えでは、人々はPhotoshopやその他のツールでのワイヤーフレームやデザインから離れて歩きます。RWDを使用すると、固定幅のデザインができなくなるからです。モックアップを作成してから設計して開発するのは面倒に思われるため、立ち去る人もいます。それであなたは何をしますか？私が最もよく耳にする答えは、「ブラウザ設計」です。私はそれについて詳しくは調べていませんが、開発中にその場で設計するように思えます。私にはこれは奇妙に思えます、あなたが最初に基本的な考えを持っているべきではないので？最初のスケッチは？すべてがどこに行くかを確認するためのいくつかのワイヤーフレーム？ ...そしてモックアップの作成と設計に戻ります。 Adobe Edge Reflowのように、レスポンシブデザインツールがその答えかもしれません。私はまだ試していません。自分のワークフローに慣れているので、試したことはありません。
実際のところ、ブラウザ内デザインツールやレスポンシブデザインツールの適切な実装はまだ見ていません。ワイヤーフレームを作成し、さまざまなビューポートを表すためのデザインを作成することは、今でも最善の方法だと思います。
基本的なワイヤーフレーミング（私はUXアーキテクトです）にSketchまたはOmnigraffleを使用する傾向があり、フロントエンドデザイナー/開発者とレスポンシブロジックをワークショップし、ワイヤーフレームの特定のロジックに注釈を付けます（ほとんどはかなり基本的ですが、私は好きです）複雑なロジックを必要とする特定の要素にフラグを付けるには（フィルター付きの求人検索結果ページなど）、ワイヤーフレームとアートディレクターのスタイルタイル/クリエイティブの指示をフロントエンドに渡し、レスポンシブプロトタイプを作成します。
開発者がさまざまなレイアウトを試してみるのにさらに時間をかけられるように、ワイヤーフレーミングライトを維持するようにしています。そのため、監視/フィードバックのために数時間持っています。
サインオフされたPSDやワイヤーフレームを介した完全な監視が必要なクライアントの場合、通常、彼らは膨大な量の事前作業を求めており、より多くの時間とお金を必要とするか、指標となるPSDを持っている可能性があることを説明します特定の画面サイズ（通常はデスクトップ、タブレット、モバイル）であり、中間段階のレスポンシブロジックを構築します（ビルド段階でこれをサインオフできます）。
私はワイヤーフレーム設計ワークフローでこのアプローチを実験しています：Adobe Illustratorですべてを行います。このアプローチでは、セットアップに初期時間が必要ですが、後でPhotoshopよりもはるかに速くなります。基本的な手順：
1）Illustratorのワイヤーフレーム。専用のモックアップツールでなくても、1つにできます。最も一般的なUI要素を表すベクターシンボルのパーソナライズされたライブラリを作成する必要があります（他のソース/モックアップソフトウェアからこれらのシンボルをインポートできます）。適切なライブラリを作成したら、Illustratorで完全にワイヤーフレームを作成できます。
2）Illustratorでデザインします。モックアップが完成したら、完全にIllustrator内でWebサイトをデザインし、モックアップで直接作業します。あなたのベクトルシンボルはすでにそこにあります。カスタムグラフィックスタイルを追加して詳細を追加することによってそれらを強化するだけです。これにより、モックアップ構造を最初から再作成する必要があるPhotoshopワークフローと比較して時間を節約できます。
3）IllustratorからSVGでUIをエクスポートします。これは素晴らしい要素です。ベクターで要素を設計すると、SVGでグラフィックをエクスポートできます。これにより、レスポンシブレイアウトを設計するときに多くの助けになります。SVGはデバイスが必要とする任意のサイズにスケーリングできます。
いくつかの考慮事項：
- イラストレーターのベクターグラフィックスは、デザインを「よりクリーン」に見せます。これは、最後のトレンドです（GoogleとApple UIsを見てください）。
- Illustratorで少し練習すると、Photoshopと同じ設計の自由度に到達できます
- すべてを1つのソフトウェアで実行し、ベクトルシンボルとグラフィックスタイルのライブラリを再利用すると、将来のプロジェクトの生産ワークフローがスピードアップします
これがあなたにいくつかの新鮮なアイデアを与えることを願っています。
私はちょっとしたウェブデザインをするUXユーザーです。
Photoshopを使用しないワークフローに関しては、標準のワイヤーフレーミング/プロトタイピングツールを使用していくつかのサイトを作成し、HTML/CSSを使用してデザイナーが実装したサイトを作成しました。私のワイヤーフレームはますます「中程度の忠実度」になりました-それは色とフォントであるがピクセル完璧ではありません。
Photoshopは、色とフォントがどのように機能するかを理解するための有用なステップですが、十分に理解できれば、コードを使用してある程度可能です。限られたアイデアを試すだけで、photoshopの使用を減らすことができます。
私はPhotoshopも数年前に使用していましたが、Webのものには複雑すぎて、十分な応答性がないと思います。写真を編集したり、非常に困難で複雑なものをデザインしたりする場合は、PSを使用します。
ワイヤーフレーミングを頻繁に行うことはもうありませんし、優れたUIには必要ないと思いますが、多くの同僚が（主に paper で）気に入っています。顧客からフィードバックを得た後、変更を簡単に適用できます。
現在、ロゴ、ウェブデザイン、モバイルアプリにSketch（Macアプリ）を使用しています。時間。アプリケーションでの設計が完了したら、画像なしで手動でCSS3/HTMLに変換します。私はたくさんのツールを試してみましたが、それが最高だと思いました。
非常に複雑なUIでのみ、ワイヤーフレーミングを行います。
ただし、ワイヤーフレームに関しては、Sketchのようなweb-design＆coツールが適しています。
@Paul同意する必要があります。ワイヤーフレーミング、PS設計、そして開発は複雑なオーバーレイになる可能性がありますが、それは機能し、一般的に私たちは全員プロセスを理解しています。他のシステムと同様に、システムを操作する人と同じくらい効率的です。
ブラウザIMOでの設計は、変更がそれほど難しくないため、より単純なWebサイト/アプリケーションでのみ役立ちます。ただし、何らかの形の計画（つまり、wireframe/uidesign/scamp）が必要です。
私は最近、ブラウザーでのUXの高度な思考とデザインを必要とするアプリケーションに取り組みました。その作業の70％が思考/発見であったため、決して機能しなかったでしょう。これに続いて、クライアントと毎日（アジャイル）議論されたワイヤーフレーム/シナリオが続きました。ワイヤーフレームのセクションが署名され、UIが開始され、UIがサインオフされると、Devが開始されました。
すべては、クライアント、プロジェクトタイプ、およびリソースです。ブラウザのデザインには場所があると思いますが、仕事に適したツールを使用することについてです。
PhotoShopは応答できません。実際、「ウェブブラウザ」を実行することはできませんでした。それは、レスポンシブがついにそのポイントを、冷たい死んだ手でPSDファイルをまだ保持している多くの人々に帰着させただけです。 :)
PhotoShop isきれいな絵を作るのに最適ですときどきこれがプロジェクトの目標です：きれいにしてください。
しかし、通常、目標はそれよりもはるかに広いです... PhotoShopがあまりうまくできないものを作成することを含みます...インタラクションデザイン...コンテンツデザイン...プロトタイピング...デバイスの差異...応答性... .userテストなど.
すべての意見、好み、特定のクライアントやプロジェクトの詳細に依存するため、「より良い」方法はありません。しかし、探求するいくつかのテクニック：
インタラクティブなプロトタイピング：紙の上でも、Axureなどのツールを使用してもかまいません。メリットは、フロー、機能、相互作用に最初から集中することです。
ブラウザ内プロトタイピング：初日から適切な媒体で作業しているため、これは理想的なIMHOです。これは多くの場合、アジャイル開発の一部です。
上記の両方：私の好み。プロトタイプをすばやく簡単に作成できますが、できるだけ早くコードを作成してください。