Styles d'interface utilisateur Web courants

91

Je dois présenter un prototype d'application Web dans les jours suivants à l'un de mes clients, le fait est que je ne suis pas très bon en CSS et pire que tout, je ne suis presque jamais satisfait des résultats que j'obtiens.

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

texte alternatif

C'est un problème récurrent que j'ai rencontré, je souhaite que le développement de l'interface utilisateur Web puisse avoir un style par défaut moins nu , une approche similaire à Visual Studio ou au SDK iPhone 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'y a qu'un seul style beau à choisir.

Existe-t-il quelque chose comme ça pour le Web? Un cadre d'interface utilisateur CSS ou Javascript neutre mais agréable?

Options jusqu'à présent:

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

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

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

Merci pour toutes les suggestions à tous!

Après un examen très attentif de toutes les bibliothèques d'interface utilisateur suggérées, je suis arrivé à la conclusion qu'ExtJS et Qooxdoo sont ceux qui correspondent le plus à mes besoins. L'interface utilisateur jQuery semble prometteuse mais n'offre qu'un nombre réduit d'éléments.

En ce qui concerne les bibliothèques uniquement CSS, j'ai trouvé que BlueTrip / BluePrint et les thèmes suggérés par tambler étaient les meilleurs. En dehors de cela, Flex et Napkee semblent également valoir la peine d'être explorés.

Il est temps d'apprendre ExtJS maintenant! =)

css  user-interface 
— Alix Axel
source
6
A noter, jQuery-UI a un concepteur de thème sympa pour accélérer les choses appelé "Theme Roller": jqueryui.com/themeroller
— Nick Craver

Réponses:

7

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

http://www.extjs.com/

C'est un framework js commercial, mais assez abordable, et facilite la création d'une belle interface utilisateur. Il existe un ensemble d'éléments beaucoup plus complet que jqueryui, et il est conçu pour créer une application entière. Je n'ai que peu joué avec, mais je l'aime vraiment jusqu'à présent. Gratuit pour un usage personnel.

Si vous voulez vraiment avoir une idée d'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

— Erik
source
@Erik: Merci pour la suggestion. Connaissez-vous des livres / tutoriels que vous pouvez recommander? J'ai un peu de mal à comprendre comment intégrer ExtJS dans une application PHP MVC typique.
— Alix Axel
Le meilleur endroit pour commencer est les didacticiels proposés par EXT: extjs.com/learn/Tutorials En ce qui concerne l'intégration avec votre framework PHP, je ne pourrais pas dire - mais ce sont vos pages HTML, donc vous les intégreriez comme vous 'intégrerais une autre page, n'est-ce pas?
— Erik
11

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

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

— Shane O'Grady
source
Vous parlez du framework jQuery UI JS ou du framework CSS jQuery UI?
— Alix Axel
1
Toutes mes excuses pour la confusion, je voulais dire le framework CSS jQuery UI pour le style. Mais il n'y a aucune raison pour que vous ne puissiez pas également intégrer le framework de widgets JS.
— Shane O'Grady
Merci, je vais examiner cela. =)
— Alix Axel
7

Qu'en est-il de l'utilisation de 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 faciles à modifier.

Une bonne liste de différents widgets ici

— peirix
source
dijit semble être ce dont j'ai besoin, mais je ne peux pas accéder à la page - je ne sais pas pourquoi.
— Alix Axel
À quelle page vous ne pouvez pas accéder?
— peirix
dijit, mais ça marche maintenant. =) Je l'examinerai mieux dès que je m'approche d'un ordinateur (je navigue actuellement avec un téléphone).
— Alix Axel
6

Faites équipe avec quelqu'un qui se spécialise dans la conception d'interface utilisateur.

Si vous maîtrisez mieux la logique métier, il vaut mieux passer votre temps à coder exclusivement la logique métier afin que vous puissiez la maîtriser. Cela vous demandera d'apprendre à 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 est non seulement beau, mais aussi intuitif et facile à utiliser est assez difficile. Tout aussi difficile et chronophage que d'établir les rouages ​​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 le chemin de quelqu'un qui était, tout d'abord ... très motivé, et ensuite très bon 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 suis principalement concentré sur la conception d'interfaces.

Si vous êtes plus productif en matière d'architecture système, de planification, de développement, peu importe ... vous devriez vous pousser dans cette direction. Bien que les projets de développement en solo puissent être plutôt satisfaisants, je le considère comme inefficace. Il est très rare qu'une personne possède les compétences nécessaires pour développer des applications de haut niveau en solo.

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

— Derek Adair
source
3

Il existe quelques cadres destinés à (G) UI Design; Qooxdoo , JQuery UI et MochaUI étant quelques-uns d'entre eux (bien que le dernier soit plus une preuve de concept qu'un cadre utilisable). Ces frameworks offrent généralement une variété d'éléments alimentés par JS (éléments de formulaire, tels que les champs de saisie et les boutons d'envoi, mais également d'autres éléments tels que les onglets). Cependant, il vous appartiendra toujours de positionner ces éléments, et peut-être de les styliser, à votre guise.

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

(À titre personnel, je n'ai que très peu d'expérience avec l'un des frameworks mentionnés ci-dessus. Mais je suis sûr que Google ou SO peuvent fournir des réponses que je ne peux pas.)

— Duroth
source
1
960.gs ne fait vraiment pas beaucoup de style - vous voulez quelque chose comme Bluetrip ( bluetrip.org ) pour cela. 960.gs fournit simplement une mise en page basée sur une grille.
— Dominic Rodger
J'ai jeté un coup d'œil dans les frameworks que vous avez suggérés, qooxdoo semble trop compliqué (tout semble être défini via Javascript - même les entrées de formulaire, etc.), MochaUI a une interface vraiment sympa avec des couleurs neutres très cool, je n'ai pas vu le code source de celui-ci mais il semble aussi assez limité (il manque beaucoup de styles élémentaires). jQuery UI semble la meilleure option à ce jour. 960.gs c'est bien mais comme Dominic l'a dit, ce n'est pas pour le style.
— Alix Axel
3

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

Plutôt que de simuler un contrôle de page à onglets ou une grille de données, avec Flex ou Silverlight, votre balisage peut simplement spécifier un contrôle de page à onglets ou une grille de données. Et les frameworks sont livrés 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 d'une présentation graphique, je pense qu'ils sont une bien meilleure alternative.

— Jacob
source
Flex est vraiment un excellent outil, mais considérez que de nos jours, le monde évoluant vers HTML 5 et flex a de nombreux problèmes avec la taille et le multilinguisme où javascript gagne et que pensez-vous du prix mais je pense toujours que flex est un excellent outil
— tawfekov
J'espère vraiment qu'une solution pure HTML / Javascript / CSS pour les applications émergera du processus de normalisation.
— Jacob
Flex est peut-être plutôt encombrant, et pas aussi convivial pour les moteurs de recherche ... mais le système est imbattable à mon avis. Je ne suis pas un développeur web «senior», mais je vois vraiment l'avantage de travailler dans le cadre flex. Adobe a un très bon système. Le simple fait de pouvoir coder pour ordinateur de bureau / Web / ET mobile avec UN seul cadre / moyen de livraison standardisé est précieux au-delà des mots.
— Derek Adair
2

Les maquettes filaires comme celle-ci sont un excellent moyen de commencer.

Après avoir utilisé la plupart des framewroks d'interface utilisateur discutés ici, je voudrais vous orienter vers jQueryUi pour les raisons suivantes:

  1. Le framework CSS jQueryUI s'occupe du CSS cohérent et cool pour vous (c'est vraiment facile - il suffit de faire du balisage et d'appliquer les classes)

  2. jQueryUI a tabcontrol et des tas de moyens simples et rapides pour styliser les formulaires.

— Riches
source
Parmi toutes les options suggérées, je suis plus enclin à ExtJS, l'avez-vous déjà utilisé? Comment le comparez-vous à l'interface utilisateur jQuery?
— Alix Axel
ExtJS est très mature et complet. Sachez qu'il s'agit d'une licence GPL double et commerciale. C'est vraiment une interface de widget destinée à des interfaces utilisateur très riches. Donc, si vous voulez quelque chose de plus «corporatif» et de moins «convivial», ce n'est pas du tout un mauvais choix. La seule chose est qu'il a un peu de courbe d'apprentissage, c'est vraiment tout un cadre en soi. Plus proche de la programmation GUI que du Web. Bonne chance
— Rich
2

Si vous ciblez des navigateurs modernes, non IE, vous devriez consulter Sproutcore . Pour les maquettes, j'utilise mockingbird .

— pthuline
source
Merci, mockingbird a vraiment fait ma journée! Quant à Sproutcore, cela semble bien, mais certaines démos semblent un peu boguées dans Firefox 3.5.7.
— Alix Axel
2

Un framework PHP relativement nouveau spécialement conçu pour le développement de logiciels axés sur l'interface utilisateur. Les éléments que vous avez ici, y compris les onglets, les filtres et les grilles sont inclus et vous prendront environ 20 lignes de code à implémenter.

http://agiletoolkit.org/

— romaninsh
source
1

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 la même manière que Balsamiq, mais il vous permet d'exporter vos wireframes / prototype 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 onglets, des rollovers, des effets Javascript.

— Jonny Haynes
source
Merci, Axure a l'air sympa mais ce n'est pas ce que je recherche.
— Alix Axel
1

Si vous utilisez déjà des maquettes balsamiques pour vos prototypes, vous devriez envisager Napkee . Pour citer le site Web "Napkee vous permet d'exporter des maquettes Balsamiq vers HTML / CSS / JS et Adobe Flex 3 en un clic."

— Paul
source
1

Je suis tombé sur ce problème il y a quelque temps, et je n'ai rien trouvé, alors j'en ai profité pour apprendre le CSS. Mais depuis, il semble que de grands progrès aient été accomplis vers ce sujet.

  • Pour résumer votre problème, il existe une page wikipedia .
  • Il y a yaml-css , qui prend yaml et le transforme en css
  • Il existe une base de référence , mais cela suppose des connaissances en CSS.
  • Je suggère également de regarder Dreamweaver d'Adobe . Ils ont beaucoup d'outils de génération de CSS et de style qui produisent du code très lisible et compatible w3c.

J'espère que cela aide.

— icco
source
1

Une combinaison de 960g pour la mise en page et les outils jQuery-UI ou Jquery est géniale.Je les utilise presque dans tous les projets, mais je voudrais ajouter à http://easyframework.com/ bien que ce ne soit pas une entreprise conviviale, alors assurez-vous de vérifier sa licence mais je l'aime

— tawfekov
source
Assurez-vous de consulter cufon cufon.shoqolate.com/generate si vous êtes intéressé par la typographie
— tawfekov
1

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

Je dois admettre que je ne l'ai pas encore essayé moi-même, mais je l'ai regardé un peu et cela semble plutôt cool. Je vais probablement l'utiliser assez tôt.

— gillyb
source
C'est une très belle alternative à Balsamiq, mon navigateur est très lent au guichet automatique mais à première vue, il semble en valoir la peine, merci.
— Alix Axel
0

J'aime ajouter Bootstrap c'est un cadre frontal intuitif et puissant pour un développement Web plus rapide et plus facile.

— Emilio Gort
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.