Web UIの設計
私はWeb開発のバックエンド側（たとえば、Java spring mvc、またはgrailsを使用）にはかなり満足していますが、クライアント側のUIの場合、どこから始めればよいのかわかりません見栄えの良いページを設計します）。 OK、私はCSSがあり、それで何でもできることを知っています。また、ブループリントのようなCSSフレームワークについても知っています。
しかし、フロントエンドのデザイナーは実際にどのようにページを設計しますか？彼らは何らかのWYSIWYGエディターを使用していますか？彼らはvimですべてをコーディングし、魔法のCSSスキルに依存していますか？彼らはPhotoshopのようなものを使ってページを視覚化し、それをhtml + cssに翻訳しますか？
プロの開発者が実際に行う方法についての洞察を期待しています。「好きなサイトを見つけて、ソースを表示をクリックし、好きなものをコピーして、繰り返してください」。または「www.freecsstemplates.comにアクセスしてテンプレートをダウンロードし、cssディレクトリにコピーします」。それがISプロの開発者がページをデザインする方法でなければ、それは悲しいでしょう。
編集：
うまくいけば、これは閉じられません。私が求めているのは、人々が単純にメモ帳やvimなどでコーディングし、cssの知識を適用するのは普通ですか？それが、業界におけるフロントエンドデザイナーの典型的な働き方です。それは私がそれに近づくことを想像する方法です。それとも他のことをしますか？もっと良くしたいのですが、漠然と正しいアプローチを知りたいです。
あなたは良い質問を提起します。いくつかの用語（フロントエンドデザイナー、フロントエンド開発者、多くの場合同じではない）が混在しているので、私にとって答えは、おそらくあなたが好むかもしれないほど簡潔ではありません（ごめん）。
用語を分離すると、答えが少し明確になる可能性があります。私はそれらを非常に別々であり、同じ人が行うことはほとんどない重複しない専門知識を必要とすると考えています。両方の分野は専門知識を得るために長年の経験を必要とするためです.
記録のために、私はフロントエンド開発者であり、彼らの正しい心の誰も私に彼らのウェブサイトを設計することを望んでいません。私の責任はPHP/HTML、CSS、およびJavaScriptです。 Photoshopファイルは作成しません。それらはHTML/CSSに分割するために私に渡されます。
Webデザイナーは通常、クライアントの要件とブランディングをグラフィカルレイアウト（ほとんどの場合、Photoshop PSD）に変換します。多くの場合、デザイン（ライン、色、形）について正式に訓練されています。設計の原則を理解することは、おそらくこの分野でソフトウェアを選択することよりも重要であり、まだ行っていない場合は最初に始めると思います。 「クライアント側のUIについては（見栄えの良いページのデザインのように）どこから始めればいいのか本当に分からない」と言うので、これがこの分野で習熟する最初の論理的な出発点になると思います。
ワークフロー/ツールに関しては、設計者は通常、Balsamiq MockupsやKeynote（ http://keynotekungfu.com/ ）などのソフトウェアを使用して最初にモックアップを生成し、クライアントが動かなくなることなくUI /レイアウトを承認できるようにします色の選択またはテクスチャ。これらは、デザインを知らせるための非常に素早いスケッチである場合もあれば、ページフロー、レイアウト、機能を細心の注意を払ってマップする非常に複雑なワイヤーフレーム（それ自体が別個の成果物）である場合もあります。
また、デザイナーはムードボードやデザインタイルなどの手法を使用して、本格的なデザインに取り組む前に、サイトのブランディングと「ルックアンドフィール」をキャプチャします。クライアントがサイトのパレット、UI、レイアウトを決定すると、デザイナーはPhotoshop、またはそれほど頻繁ではないがFireworksまたは別のグラフィックプログラムを使用して、完成したデザインを作成します。
大部分のショップで、そして私が知っているほとんどのプロのフリーランサーの経験では、フロントエンド開発者（通常は別の人であるとは限りません）が完成したPSDをHTML/CSSに切り取ります。どのツールが使用されるかは、個人的な好みの問題であると同時に、活発な議論の対象でもあります。私はコーダが好きです。 TextMateやTextWranglerなど。私が会ったどちらの職業でも、PCを使う人は多くありません。 Macの世界です。 PCはスーツ用です。
フロントエンド開発者としての私自身のワークフローには以下が含まれます。
- CSS開発用のFirebugとChromeの開発者ツール。
- HTML/CSS/JavaScript/PHPを作成するためのCoda。これは非常に軽量なIDEで、CSSエディター、コード補完、上記のすべての構文強調表示が含まれています。
- PSDをHTMLにカットするためのPhotoshop。
- ブラウザでピクセル測定を行うためのFirefoxアドオンMeasureIt。
- FirefoxアドオンのPixel Perfectは、提供されたPSDファイルと正確に一致するピクセルを作成します（デザイナーは元のデザインを尊重してくれてとても満足しています）。
- iEでのテスト用のWindows VM。 VMWare Fusionを使用します。これは一般的に優れていますが、スーパープロセッサを集中的に使用しますが、Wineもあります。これは無料で他の適切な選択肢です。
- さまざまなタスクのためのFirefoxアドオンWeb Developerツールバー（JavaScriptを無効にしたサイトの外観の確認、印刷スタイルシート出力のテーマ設定、アクセシビリティの確認、サイトのセマンティック構造の表示など）。
- 色を監視し、サイトから16進コードを取得するためのFirefoxアドオンColorZilla（非常に便利）
また、SafariのiPad/iPhoneビューを使用して、モバイルユーザーエージェントを使用してサイトをテストしました。
これらは少なくとも私が使用するツールの一部です。私は他の技術に興味があります。
最も重要な最初のステップについては誰も言及していません（私が知る限り）-鉛筆と紙
個々のページレイアウトとサイト全体の構造に関する複数のアイデアを書き留めてください。PhotoshopまたはHTML/CSSコーディングを開始すると、時間を大幅に節約できます。
最初のプロトタイピングでは、最速のものが最適です。鉛筆と紙、Photoshop、PowerPointなどを使用できます。アイデアを捨てて、最も魅力的なものを確認したいだけです。アプリ 紙のプロトタイピング を使用して、紙のスケッチをインタラクティブにすることもできます。
実際の開発では、コードエディターとWYSIWYGエディターの両方の組み合わせであるため、 Adobe Dreamweaver が好きです。最大の利点は、複数のブラウザーとモバイルデバイスで作業のインスタントプレビューが提供されることで、多くの時間を節約できます。また、Notepad ++とvimの両方を軽量エディターとして使用しています。
Webサイトのプロジェクトごとに異なるアプローチが必要であるため、フロントエンドWebの設計と開発には、1つのソリューションはありません。たとえば、JavaScriptを使用してモバイルデバイスの表示を有効にしている人もいれば、CSS3メディアクエリを実装して同じことを達成している人もいます。
私は個人的にグラフィックデザインソフトウェア（人気のあるPhotoshopなど）を使用してWebサイトの設計図を作成していますが、これは純粋に私（または私のクライアント）がHTML CSSおよびバックエンドコードの前に垣間見ることです。検証プログラムを使用して、HTML CSSおよびJavaScript（ある場合）を確認します。
私のアドバイスは、ユーザーの使いやすさ、ブラウザ、デバイスの互換性（および/または視認性）を考慮して、設計仕様に合ったツールのセットを見つけるのに時間がかかることです。
最初にPhotoshopを使用して視覚化します。 CSSで複製できない画像をスライスします。テキストエディタを起動して、コードを削除します。最初にHTMLマークアップ。 2番目のCSSと最後にJavacript（必要な場合）。
「大きな」CSSを変更するたびに、ブラウザを保存して更新します。
ケビン、
すべてのデザイナーには、独自のスキルセットと好みがあります。これが、Photoshopのような「人気のある」ツールがある一方で、それらを使用する方法がなく、作業方法やワークフローが設定されていない理由です。
最終的に、あなたはあなたが持っているかもしれない強みで働き、弱さを軽減するために必要なことは何でもします。
私は個人的にFirebugとChrome開発者ツールを使用してテストとデバッグを行い、TextMateでCSSをコーディングしますが（Visualizerを試しています）、グラフィックデザインの現在の弱点を認識しています（つまり、自分の画像を作成しています）。私はこれを補うために、ロードブロッキングに出くわすたびにインターネットの記事を読むことで、CSSの微妙さを少しずつ学びます-理論上はそれほど多くはないはずですが、CSSには奇妙なことに満ちていることがすぐにわかるでしょう。ブラウザ間の違い（およびそれらの中で、主にIEの多くのバリエーション）。