Styles Web communs de l’interface utilisateur

Je dois présenter un prototype d’application Web aux jours suivants à un de mes clients. Le problème, c’est que je ne suis pas si bon en CSS et que le pire, c’est que je ne suis jamais satisfait des résultats.

Le codage de la logique métier ne me pose aucun problème, mais la conception de l’interface utilisateur prend plus de 80% de mon temps. Je n’ai pas besoin de rien à couper le souffle, juste un environnement propre, agréable et présentable, un exemple:

alt text http://soffr.miximages.com/user-interface/t0p1fq.png

C’est un problème récurrent que j’avais, je souhaite 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.

La maquette ci-dessus créée avec Balsamiq Mockups est un excellent exemple, tous les «composants» les plus courants sont disponibles, et le meilleur de tous: il n’ya qu’un seul style intéressant à choisir.

Y a-t-il quelque chose comme ça pour le web? Un cadre neutre et agréable pour l’interface utilisateur CSS ou Javascript?


Options jusqu’ici:

  • Bootstrap
  • Qooxdoo
  • jQuery UI
  • Outils jQuery
  • MochaUI
  • Ext JS
  • Yahoo! Bibliothèque d’interface utilisateur
  • BlueTrip
  • Plan
  • Uki ( Démo )
  • Napkee
  • YAML
  • Ligne de base
  • iPlotz
  • Sproutcore
  • ForeUI

Je voudrais savoir s’il existe des frameworks d’interface utilisateur CSS uniquement.

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

PS: Je ne m’intéresse pas à AJAX, aux effets, aux comportements, etc. Mon souci principal (le seul) est le style.


Merci à tous pour toutes les suggestions!

Après un examen très attentif de toutes les bibliothèques d’interface utilisateur suggérées, j’en suis venu à la conclusion que ExtJS et Qooxdoo sont ceux qui correspondent le mieux à mes besoins. jQuery UI semble prometteur mais n’offre qu’une quantité réduite d’éléments.

En ce qui concerne les bibliothèques CSS uniquement, j’ai trouvé BlueTrip / BluePrint et les thèmes proposés par tambler comme étant les meilleurs. Mis à part cela, Flex et Napkee semblent également être intéressants à explorer.

Il est temps d’apprendre ExtJS maintenant! =)

Je ne peux pas croire que personne n’a mentionné:

http://www.extjs.com/

C’est un cadre commercial js, mais très abordable, et cela permet de créer une belle interface utilisateur. Il y a un ensemble d’éléments beaucoup plus complet que jqueryui, et conçu pour créer une application complète. Je n’ai joué qu’avec un peu, mais je l’aime vraiment jusqu’à présent. Gratuit pour un usage personnel.

Si vous voulez vraiment avoir une idée de l’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

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

Vous pouvez également considérer le framework CSS blueprint au lieu de 960gs.

Qu’en est-il de l’utilisation du dojo et du 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 faciles à modifier.

Une bonne liste de différents widgets ici

Faites équipe avec quelqu’un qui se spécialise dans la conception de l’interface utilisateur.

Si vous êtes mieux à même de gérer la logique métier, mieux vaut consacrer exclusivement du temps à la codification de la logique métier. 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. Il est très difficile de concevoir un système qui soit non seulement beau, mais intuitif et facile à utiliser. Tout aussi difficile et long 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 se distingue par sa présentation. J’ai eu la chance de croiser le chemin avec quelqu’un qui était, avant tout … très motivé, et ensuite très bien en «logique métier». Il avait beaucoup plus d’expérience dans la planification et la mise en œuvre de systèmes complexes, alors que je me concentrais principalement sur la conception d’interfaces.

Si vous êtes plus productif en ce qui concerne l’architecture du système, la planification, le développement, etc., vous devez vous pousser dans cette direction. Bien que les projets de développement en solo puissent être plutôt satisfaisants, je les considère inefficaces. Il est très rare que quelqu’un possède des compétences pour développer des applications de haut niveau en solo.

Le défi consiste à trouver quelqu’un avec qui vous travaillez bien.

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

Il existe quelques frameworks destinés à (G) UI Design; Qooxdoo , JQuery UI et MochaUI en sont quelques-unes (bien que la dernière soit plus une preuve de concept qu’un framework utilisable). Ces frameworks offrent généralement une variété d’éléments basés sur JS (éléments de formulaire, tels que les champs de saisie et les boutons de soumission, mais également d’autres éléments tels que les tabs). Cependant, il vous appartiendra toujours de positionner ces éléments et peut-être de les styliser à votre convenance.

Peut-être que vous familiariser avec un framework CSS (tel que 960GS ) pourrait compléter les Frameworks JS UI ci-dessus.

(En tant que déni personnel, j’ai très peu d’expérience avec les frameworks mentionnés ci-dessus. Mais je suis sûr que Google ou SO peuvent fournir des réponses que je ne peux pas).

Cela ne vous aidera pas pour votre projet actuel, mais cela vaut la peine d’envisager des projets futurs. Après avoir passé de nombreuses années à créer des applications d’interface graphique en HTML 4 et à lutter constamment contre les limitations de CSS et HTML, j’ai pensé essayer Adobe Flex. Quelle amélioration!

Plutôt que de truquer un contrôle de page à tabs ou une grid de données avec Flex ou Silverlight, votre balisage peut simplement spécifier un contrôle de page à tabs ou une grid de données. Et les frameworks viennent avec des styles par défaut qui sont ennuyeux mais pas du tout mauvais. Je ne dis pas que ceux-ci remplacent complètement le HTML, mais si vous avez besoin de widgets et de la présentation graphique, je pense qu’ils représentent une bien meilleure alternative.

Vous pouvez envisager de parcourir le site suivant:

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

Il y a plusieurs thèmes “administratifs” disponibles à l’achat ici qui peuvent convenir à vos besoins.

Les maquettes filaires comme celle-ci sont une excellente façon de démarrer.

Ayant utilisé la plupart des images de l’interface utilisateur discutées ici, je voudrais vous orienter vers jQueryUi pour les raisons suivantes:

  1. Le framework CSS jQueryUI prend en charge les CSS cohérents et sympas pour vous (c’est vraiment facile – il suffit de créer des balises et d’appliquer les classes)

  2. jQueryUI a un contrôle de tabulation, et regroupe des méthodes simples et rapides pour mettre en forme les formulaires.

Si vous ciblez des navigateurs modernes, sans IE, alors vous devriez vérifier Sproutcore . Pour les maquettes, j’utilise mockingbird .

Un framework PHP relativement nouveau, spécialement conçu pour le développement de logiciels orientés interface utilisateur. Les éléments que vous avez ici, y compris les tabs, les filtres et les grids sont inclus et vous amèneront environ 20 lignes de code à implémenter.

http://agiletoolkit.org/

Avez-vous essayé Axure ? C’est un outil pour créer rapidement des wireframes, des prototypes et des spécifications pour des applications et des sites Web.

Il fonctionne de manière similaire à Balsamiq, mais il vous permet d’exporter vos wireframes / prototypes au format HTML, CSS et Javascript.

Vous pouvez ensuite le télécharger sur un serveur ou l’exécuter sur votre ordinateur comme exemple de travail.

Vous pouvez créer des formulaires, des liens, des tabs, des survols, des effets Javascript.

Si vous utilisez déjà des maquettes Balsamic pour vos prototypes, vous devriez considérer Napkee . Pour citer le site Web, “Napkee vous permet d’exporter des maquettes Balsamiq au format HTML / CSS / JS et Adobe Flex 3 en un seul clic.”

J’ai couru il y a quelque temps et je n’ai rien pu trouver, alors j’ai pris cela comme une opportunité d’apprendre le css. Mais depuis lors, il semble que de grands progrès ont été réalisés dans ce domaine.

  • Résumant votre problème, il existe une page Wikipedia .
  • Il y a yaml-css , qui prend yaml et le transforme en css
  • Il y a une ligne de base , mais cela suppose des connaissances CSS.
  • Je suggère également de regarder Dreamweaver d’Adobe . Ils ont beaucoup d’outils de génération de css et de styles qui produisent un code très lisible et compatible w3c.

J’espère que ça aide.

Une combinaison de 960gs pour la mise en page et les outils jQuery-UI ou Jquery est excellente. sa licence mais je l’aime bien

J’ai récemment découvert un beau site Web appelé iplotz.com où vous pouvez créer une maquette de votre application / site Web / projet en ligne sans rien installer. Il a également la plupart des contrôles communs, ainsi que beaucoup plus de fonctionnalités pour gérer l’ensemble du projet et le partager avec d’autres en ligne.

Je dois avouer que je ne l’ai pas encore essayé moi-même, mais je l’ai un peu regardé et ça a l’air plutôt cool. Je vais probablement l’utiliser assez tôt.

Sass semble avoir un potentiel pour atténuer certains problèmes de CSS.

J’aime append Bootstrap de manière intuitive et puissante, un framework frontal pour un développement web plus rapide et plus facile.

J’aime RocketCSS . Beau design propre, essayez-le.