私はサーバー側のプログラマーなので、これについてはご容赦ください。Web サイトのユーザー インターフェイスはどのように設計されていますか? つまり、通常どのツールが使用されますか? たとえば、多くの動的コンテンツがある stackoverflow.com を考えてみましょう。さまざまなエリアはどのように設計されていますか？私はそれがVisual Studioにないことを確信しています。おそらくサーバー側のコードはasp.netにありますが、実際のUIはどうですか? (レイアウト、画像、テーブル、ボタンなど)
このようなアクティビティの通常のワークフローは何ですか? たとえば、紙にデザインがあります。そこからどこへ行けばいいですか？インターフェイスの設計が完了したら、どのようにコードを配線しますか?
ページ内で静的なものと動的なものがあるという事実をどのように処理しますか? （私が今いる質問ページのように）
あなたが言ったように、ウェブページの要件に要約されます。
専門的な (かなり大きな) Web サイトの場合、多くのチームが関与します。たとえば、紙の作業と UI 要素とコントロールの設計を行うクリエイティブ チーム、実際に画像を設計するグラフィック チーム、コンテンツを適切に配置する UI 開発者、CSS を設計するアーキテクトなどです。さまざまなアイテムのパフォーマンスを決定する (およびコントロールの静的/動的な性質を呼び出す)
通常、デザイナーは HTML ページをデザインするためにいくつかの外部ツールを使用してテンプレートを提供し、後で同じものをビジュアル スタジオで実際のページを作成するために使用できます。市場には、 Dreamweaverなどのツールが多数あります。また、クライアントおよび CSS リッチ Web サイトを設計するためのフリーウェアも数多く市場に出回っています。これらはGoogleで検索できます。
Web サイトの要件がクライアント リッチではない場合でも、Visual Studio を使用してデザインしたり、新しい Microsoft 製品の Webmatrixを使用して、Web サイトの見栄えを良くするためのユーザー フレンドリーなツールを提供したりできます。
紙のデザインは最初の正しいステップです。
続行方法: http://960.gs/
から 960 グリッド システムを取得し、ここ から開始できます。あなたのデザインに基づいて構築できるCSSテンプレートを使用する準備ができているのは素晴らしいトリックです。
画像の効果:
影や境界線などは、通常は Photoshop で作成されると思いますが、新しいブラウザーでは css を使用してそれらの多くがサポートされています。例: http://css-tricks.com/snippets/css/css-box-shadow/
設計に役立つソフトウェア:
- MS Expression
- DreamWeaver