クライアントで JQuery を最大限に活用する非デザイナー向けの Web サイトをデザインするにはどうすればよいですか?

Question

私は開発者です...UI の「達人」タイプではありません。Photoshop のスキルがあればある程度はやっていけますが、自分の時間を過小評価しており、この点で自分はおそらくそれほど効率的ではないと考えていることに気づきます。

とにかく、デザインも同時に任されている開発者は地球上で私だけではないことはわかっていますので...

ハウツー、例、手順などを探しています...Web サイトのデザインをゼロから取り入れて、CSS や (JQuery、mootools などのフレームワークを使用して) 可能な限り多くの Javascript の利点を最大限に活用するために適切に「分割」することができます。他にもいくつか質問があります:

1. 多くの冗長なコーディングを排除できる事前に作成されたテンプレート (スターター) を使用している場合はどうなるでしょうか?

2. 初期の CSS スタイルシートをデフォルトで使用している場合はどうなりますか?

3. Photoshop は依然として UI デザイナーの選択ですか?その場合、サイトのモックアップを作成するにはどのような設定から始めればよいでしょうか?そして ...CSS や JQuery などの JavaScript フレームワークを最大限に活用できるように、物事を分割する最良の方法は何ですか?

ありがとう - wg

Answer 1

一人の軍隊自分自身として、私はあなたの欲求不満を理解することができます。幸いにも私のために、私はデザイナーとして多くを開始し、その後、開発者になりました。私は、設計、および開発に約7年の経験と実績の10年以上持っていませんでした。ここではいくつかのヒントがあります。

良いCSSフレームワークに精通して取得します。冒頭でグラフィカルに、優れさにあまりを集中しないでください。私は 960グリッドシステムをお勧めします。それはあなたがすぐに非常に少しの努力、そして非常にシンプルなマークアップでページ全体をレイアウトすることができます。いくつかの異なるレイアウトを試してみてください。 //net.tutsplus：あなたは<のhref = "HTTP情報については、フレームワークのウェブサイトをご覧いただくか、この短いを見ることができます.COM /ビデオ/スクリーンキャスト/ - 詳細なルック・アット・-960-CSSフレームワーク/」のrel = "nofollowをnoreferrer">デモビデオには習熟を取得します。このフレームワークは、エリックメイヤーCSSのリセットが付属しています - それを使用する

！

私のための次のステップは、MVCプロジェクトに私のレイアウトをプラグインすることです。私が行っていることを持っていたら、私はGoogleの-APIのリンクを経由して jQueryのにネクタイの、そして私の動的挙動をコーディングを開始ます。

Answer 2

私は同様の問題を抱えています。私はいつもやることの一つは、テーマフォレストまたは他のCSSのテンプレートサイトのいずれかから、CSSのテンプレートを購入しています。彼らはわずか$ 10用ピックアップすることができ、あなたは通常、目的のルックアンドフィールに合わせて良いスキームを見つけることができます。これは私工数費用の数え切れないほどの時間と何百もの節約できます。私は実際にそれが十分に見えるようにするのに十分なスキルを持っていないよう設計し、フォトショップで切断しようとしないでください。私はそれを受け入れ、上mvoedています。私はjQueryの/ AJAX /サービスなどを通じて強化されたUIとの大きな違いを生むことができます。