Styles communs de l'interface utilisateur Web

Question

Je dois présenter un prototype d'une application web dans les prochains jours à l'un de mes clients, le problème c'est que je ne suis pas très bon en CSS et surtout je ne suis presque jamais satisfait des résultats que j'obtiens.

Coder la logique métier ne me pose aucun défi, mais la conception de l'interface utilisateur prend plus de 80% de mon temps. Je n'ai pas besoin de quelque chose d'époustouflant, juste un environnement propre, agréable et présentable, un exemple :

C'est un problème récurrent que je rencontre, j'aimerais que le développement de l'interface utilisateur Web ait un style par défaut moins nu, une approche similaire à Visual Studio ou iPhone SDK me serait très utile.

Le mockup ci-dessus, créé avec Balsamiq Mockups, en est un excellent exemple, tous les "composants" les plus courants sont disponibles à utiliser, et surtout : il n'y a qu'un seul style de bonne apparence à choisir.

Existe-t-il quelque chose de similaire pour le web ? Un framework d'interface utilisateur CSS ou Javascript neutre mais agréable ?

---

Options jusqu'à présent :

• Bootstrap
• Qooxdoo
• jQuery UI
• jQuery Tools
• MochaUI
• Ext JS
• Bibliothèque d'interface utilisateur Yahoo!
• BlueTrip
• BluePrint
• Uki (Démo)
• Napkee
• YAML
• Baseline
• iPlotz
• Sproutcore
• ForeUI

Je suis intéressé à savoir s'il existe des frameworks d'interface utilisateur CSS uniquement.

J'ai trouvé cette page avec une liste très intéressante de bibliothèques d'interface utilisateur Web, mais la plupart d'entre elles (du moins les bonnes) semblent être spécifiques à Java, existe-t-il des alternatives aussi bonnes en CSS ou JS pur ?

PS : Je ne suis pas intéressé par AJAX, les effets, les comportements, etc... ma principale (unique) préoccupation est le style.

---

Merci pour toutes les suggestions tout le monde !

Après une très longue réflexion sur toutes les bibliothèques d'interface utilisateur suggérées, j'en suis venu à la conclusion qu'ExtJS et Qooxdoo sont celles qui correspondent le mieux à mes besoins. jQuery UI semble prometteur mais n'offre qu'un nombre réduit d'éléments.

En ce qui concerne les bibliothèques CSS uniquement, j'ai trouvé BlueTrip / BluePrint et les thèmes suggérés par tambler comme étant les meilleurs. À part ça, Flex et Napkee semblent également valoir la peine d'être explorés.

Il est temps d'apprendre ExtJS maintenant ! =)

Answer 1

Une combinaison de 960gs pour la mise en page et jQuery-UI pour le style est probablement ce que vous recherchez.

Vous pourriez également envisager le framework CSS blueprint à la place de 960gs.

Answer 2

Je ne peux pas croire que personne n'ait mentionné :

http://www.extjs.com/

C'est un framework js commercial, mais assez abordable, et permet de créer facilement une belle interface utilisateur. Il offre un ensemble beaucoup plus complet d'éléments que jqueryui, et est conçu pour créer une application entière. Je n'ai joué avec un peu, mais je l'adore jusqu'ici. Gratuit pour un usage personnel.

Si vous voulez vraiment vous familiariser avec une interface utilisateur complète développée avec EXT, essayez cette url :

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

Answer 3

Que diriez-vous d'utiliser dojo et dijit?

Dijit est un moyen rapide de créer des widgets et des éléments. Il est également livré avec 3 thèmes par défaut qui sont faciles à modifier.

Une bonne liste de différents widgets ici

Answer 4

Associez-vous avec quelqu'un qui se spécialise dans la conception UI.

Si vous êtes meilleur pour traiter la logique métier, votre temps est mieux utilisé en codant exclusivement la logique métier afin de la maîtriser. Cela vous obligera à apprendre comment interagir avec quelqu'un d'autre qui excelle dans la présentation. (xml et json sont des moyens courants)

La logique métier et la présentation sont très différentes. Concevoir un système qui non seulement est esthétique, mais aussi intuitif et facile à utiliser est assez difficile. Tout aussi difficile et chronophage que d'établir le fonctionnement interne d'une application complexe.

Une bonne interface n'est pas aussi simple que d'inclure un framework css.

Je me considère comme un programmeur plus 'créatif' qui excelle dans la présentation. J'ai eu la chance de croiser quelqu'un qui était, tout d'abord... très motivé, et en plus de cela très doué en 'logique métier'. Il avait beaucoup plus d'expérience dans la planification et la mise en œuvre de systèmes complexes, tandis que je me concentrais principalement sur la conception de l'interface.

Si vous êtes plus productif dans l'architecture système, la planification, le développement, quoi que ce soit... vous devriez vous orienter dans cette direction. Bien que les projets de développement en solo puissent être très enrichissants, je les considère comme inefficaces. Il est très rare qu'une personne possède les compétences pour développer des applications de haut niveau seule.

Le défi est de trouver quelqu'un avec qui vous travaillez bien.

Answer 5

Découvrez Google Web Toolkit. Il a un aspect par défaut assez propre. Ils ont des exemples. En particulier, leur exemple Showcase démontre tous les widgets disponibles et le style css utilisé pour obtenir cet aspect.