一般的なWeb UIスタイル

Question 1

翌日、クライアントの1人にWebアプリのプロトタイプを提示する必要があります。CSSがあまり得意ではなく、最悪の場合、得られる結果にほとんど満足できません。

ビジネスロジックをコーディングしても問題はありませんが、UIの設計には80％以上の時間がかかります。私は息をのむようなことを何も必要とせず、ただクリーンで素晴らしくて見栄えの良い環境、例えば：

これは私が繰り返し経験している問題です。WebUIの開発で、デフォルトのスタイルがよりシンプルになり、Visual StudioまたはiPhone SDKと同様のアプローチが私にとって非常に役立つと思います。

上記のBalsamiq Mockupsで作成されたモックアップは良い例であり、最も一般的な「コンポーネント」はすべて使用でき、何よりも、見栄えの良いスタイルが1つだけ選択できます。

Webにこのようなものはありますか？中立ながらも素晴らしいCSSまたはJavaScript UIフレームワーク？

これまでのオプション：

CSSのみのUIフレームワークがあるかどうか知りたいです。

私はこのページにWeb UIライブラリの非常に優れたリストを見つけましたが、それらのほとんど（少なくとも優れたもの）はJavaに固有であるようです。純粋なCSSまたはJSに同等に優れた代替品はありますか？

PS：私はAJAX、エフェクト、ビヘイビアーなどには興味がありません...私の（唯一の）懸念はスタイルです。

みんなのすべての提案をありがとう！

提案されたすべてのUIライブラリを非常に慎重に検討した結果、ExtJSとQooxdooが私のニーズに最も近いものであるという結論に達しました。jQuery UIは有望であるように見えますが、提供される要素の数は少なくなっています。

CSSのみのライブラリーに関する限り、私はBlueTrip / BluePrintと、タンブラーによって提案されたテーマが最高であることを発見しました。それとは別に、FlexとNapkeeも探索する価値があるようです。

今ExtJSを学ぶ時が来ました！=）

Question 2

誰も言及しなかったなんて信じられない：

http://www.extjs.com/

商用のjsフレームワークですが、かなり手頃な価格で、素晴らしいUIを簡単に作成できます。jqueryuiよりもはるかに完全な要素のセットがあり、アプリ全体を作成するように設計されています。少し遊んだだけですが、今のところとても気に入っています。個人使用は無料です。

EXTで開発された完全なUIを実際に体験したい場合は、次のURLを試してください。

http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/feed-viewer/feed-viewer.html

Question 3

レイアウト用の960gsとスタイリング用のjQuery-UIの組み合わせは、おそらくあなたが求めているものです。

960gsの代わりに、ブループリント CSSフレームワークを検討することもできます。

Question 4

dojoとdijitの使用についてはどうですか？

Dijitはウィジェットと要素を作成するための高速な方法です。また、簡単に変更できる3つのデフォルトのテーマが付属しています。

ここにさまざまなウィジェットの良いリスト

Question 5

UIデザインを専門とする人とペアを組む。

ビジネスロジックの処理に優れている場合は、ビジネスロジックを独占的にコーディングして、それを習得できるようにしておく方がよいでしょう。これには、プレゼンテーションに優れている他の人とのやり取りを学ぶ方法が必要になります。（xmlとjsonが一般的な手段です）

ビジネスロジックとプレゼンテーションは大きく異なります。見栄えが良いだけでなく、直感的で使いやすいシステムを設計することは非常に困難です。複雑なアプリケーションの内部動作を確立するのと同じくらい難しく、時間がかかります。

優れたインターフェースは、CSSフレームワークを含めるほど単純ではありません。

私自身は、プレゼンテーションに優れた、より「創造的な」プログラマーだと思います。私はたまたま幸運なことに、まず第一に...非常にやる気があり、次に第二に「ビジネスロジック」が非常に得意である誰かとパスを横断することができました。彼は複雑なシステムの計画と実装に多くの経験がありましたが、私は主にインターフェースの設計に焦点を合わせてきました。

システムアーキテクチャ、計画、開発などの生産性が高ければ、その方向に進んでください。ソロ開発プロジェクトはかなり充実したものになる可能性がありますが、私はそれを非効率的だと考えています。トップレベルのアプリケーションを単独で開発するスキルを誰かが持っていることは非常にまれです。

課題は、あなたが上手く働く人を見つけることです。

Question 6

Google Web Toolkitをチェックしてください。デフォルトの外観はかなりすっきりしています。彼らには例があります。特に、Showcaseの例では、使用可能なすべてのウィジェットと、外観を実現するために使用されるCSSスタイル設定を示しています。

Question 7

（G）UIデザインを目的としたいくつかのフレームワークがあります。Qooxdoo、JQuery UI、およびMochaUIはそれらの一部です（ただし、最後は使用可能なフレームワークよりも概念実証です）。これらのフレームワークは通常、JSを利用したさまざまな要素（入力フィールドや送信ボタンなどのフォーム要素だけでなく、タブなどの他の要素）を提供します。ただし、これらの要素を配置し、おそらくそれらを好みに合わせてスタイル設定することは、依然としてあなた次第です。

おそらく、CSSフレームワーク（960GSなど）に慣れれば、上記のJS UIフレームワークを補完できるでしょう。

（個人的な免責事項として、私は上記のフレームワークのいずれかについてほとんど経験がありません。しかし、GoogleまたはSOのどちらかが私ができない答えを提供できると確信しています。）

Question 8

これは現在のプロジェクトの手助けにはなりませんが、将来のプロジェクトを検討する価値はあります。HTML 4でGUIアプリケーションを作成し、CSSとHTMLの制限に絶えず取り組んできた後、Adobe Flexを試してみようと思いました。なんという改善でしょう！

マークアップは、タブ付きページコントロールまたはデータグリッドを偽造するのではなく、FlexまたはSilverlightを使用して、タブ付きページコントロールまたはデータグリッドを単純に指定できます。また、フレームワークには、退屈ではあるがまったく悪くないデフォルトのスタイルが付属しています。これらがHTMLを完全に置き換えるとは言っていませんが、ウィジェットとGUIレイアウトが必要な場合は、はるかに優れた代替手段だと思います。

Question 9

次のサイトを閲覧することを検討してください。

http://themeforest.net/category/site-templates/admin-skins

ここで購入できる「管理」テーマがいくつかあり、ニーズに合う場合があります。

Question 10

そのようなワイヤーフレームのモックアップは、始めるのに素晴らしい方法です。

ここで説明したUIフレームワークのほとんどを使用してきたので、次の理由でjQueryUiに向けて進むと思います。

jQueryUI CSSフレームワークが一貫性のある格好良いCSSを処理します（これは本当に簡単です-マークアップを作成してクラスを適用するだけです）
jQueryUIにはタブコントロールがあり、フォームのスタイルを整えるためのきちんとした簡単な方法が山積しています。

Question 11

IE以外の最新のブラウザーをターゲットにしている場合は、Sproutcoreを確認してください。モックアップにはmockingbirdを使用します。

Question 12

UIを重視したソフトウェアの開発用に特別に設計された比較的新しいPHPフレームワーク。タブ、フィルター、グリッドなど、ここにある要素が含まれており、実装するのに約20行のコードが必要です。

http://agiletoolkit.org/

Question 13

Axureを試しましたか？これは、アプリケーションやWebサイトのワイヤーフレーム、プロトタイプ、仕様を迅速に作成するためのツールです。

Balsamiqと同様に機能しますが、ワイヤーフレーム/プロトタイプをHTML、CSS、JavaScriptとしてエクスポートできます。

次に、これをサーバーにアップロードするか、実際の例としてコンピューターで実行できます。

フォーム、リンク、タブ、ロールオーバー、JavaScriptエフェクトを作成できます。

Question 14

あなたはすでにあなたのプロトタイプのためのバルサミコモックアップを使用している場合は、検討すべきNapkeeを。ウェブサイトを引用すると、「Napkeeでは、ボタンをクリックするだけでBalsamiqモックアップをHTML / CSS / JSおよびAdobe Flex 3にエクスポートできます。」

Question 15

しばらく前に出会って何も見つからなかったので、CSSを学ぶきっかけにした。しかし、それ以来、このテーマに向けて大きな進歩が見られました。

あなたの問題を要約すると、ウィキペディアのページがあります。
yaml-cssがあり、yamlを取得してcssに変換します
ベースラインはありますが、CSSに関する知識があることを前提としています。
アドビのDreamweaverもご覧になることをお勧めします。彼らは非常に読みやすくw3c互換のコードを生成するcssとスタイル生成ツールをたくさん持っています。

お役に立てば幸いです。

Question 16

レイアウト用の960gsとjQuery-UIまたはJqueryツールの組み合わせは素晴らしいです。ほとんどすべてのプロジェクトでそれらを使用していますが、http： //easyframework.com/に追加したいので、ビジネスフレンドリーではないので、必ずチェックしてください。そのライセンスが好きです

Question 17

最近、iplotz.comという素晴らしいWebサイトを発見しました。何もインストールしなくても、アプリケーション/ Webサイト/プロジェクトのモックアップをオンラインで作成できます。また、ほとんどの一般的なコントロールに加えて、プロジェクト全体を管理し、オンラインで他のユーザーと共有するためのはるかに多くの機能を備えています。

認めざるを得ません、私自身はまだ試していませんが、少し見たところ、かなりクールに見えました。私はおそらくそれをすぐに使うでしょう。

Question 18

Sassは、CSSの頭痛を軽減する方法として可能性があるようです。

Question 19

Bootstrapを追加したいのですが、Bootstrapは直感的で強力なフロントエンドフレームワークであり、Web開発をより速く簡単に行うことができます。

Question 20

私はRocketCSSが好きです。すてきなすっきりとしたデザインで、ぜひお試しください。