Estilos de interfaz de usuario web comunes

91

Tengo que presentar un prototipo de aplicación web en los próximos días a uno de mis clientes, lo que pasa es que no soy tan bueno en CSS y lo peor de todo es que casi nunca estoy contento con los resultados que obtengo.

Codificar la lógica empresarial no me plantea ningún desafío; sin embargo, el diseño de la interfaz de usuario requiere más del 80% de mi tiempo. No necesito nada impresionante, solo un ambiente limpio, agradable y presentable, un ejemplo:

texto alternativo

Este es un problema recurrente que he estado teniendo, desearía que el desarrollo de la interfaz de usuario web tuviera un estilo predeterminado menos desnudo , un enfoque similar a Visual Studio o iPhone SDK sería muy útil para mí.

La maqueta anterior creada con Balsamiq Mockups es un gran ejemplo, todos los "componentes" más comunes están disponibles para usar, y lo mejor de todo: solo hay un estilo atractivo para elegir.

¿Existe algo como esto para la web? ¿Un marco de interfaz de usuario CSS o Javascript neutral pero agradable?

Opciones hasta ahora:

Me interesa saber si hay marcos de interfaz de usuario solo de CSS.

Encontré esta página con una lista muy buena de bibliotecas de interfaz de usuario web , pero la mayoría de ellas (al menos las buenas) parecen ser específicas de Java, ¿hay alternativas igualmente buenas en CSS puro o JS?

PD: No estoy interesado en AJAX, efectos, comportamientos y demás ... mi principal (única) preocupación es el estilo.

¡Gracias a todos por todas las sugerencias!

Después de una consideración muy cuidadosa de todas las bibliotecas de interfaz de usuario sugeridas, he llegado a la conclusión de que ExtJS y Qooxdoo son las que más se ajustan a mis necesidades. La interfaz de usuario de jQuery parece prometedora, pero solo ofrece una cantidad reducida de elementos.

En lo que respecta a las bibliotecas solo de CSS, he encontrado que BlueTrip / BluePrint y los temas sugeridos por tambler son los mejores. Aparte de eso, Flex y Napkee también parecen valer la pena explorar.

¡Es hora de aprender ExtJS ahora! =)

css  user-interface 
— Alix Axel
fuente
6
Cabe señalar que jQuery-UI tiene un bonito diseñador de temas para acelerar las cosas llamado "Theme Roller": jqueryui.com/themeroller
— Nick Craver

Respuestas:

7

No puedo creer que nadie haya mencionado:

http://www.extjs.com/

Es un framework js comercial, pero bastante asequible, y hace que armar una interfaz de usuario agradable sea muy fácil. Hay un conjunto de elementos mucho más completo que jqueryui, y está diseñado para crear una aplicación completa. Solo he jugado un poco con él, pero hasta ahora me encanta. Gratis para uso personal.

Si realmente desea familiarizarse con una interfaz de usuario completa desarrollada con EXT, pruebe esta URL:

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

— Erik
fuente
@Erik: Gracias por la sugerencia. ¿Conoce algún libro / tutorial que pueda recomendar? Estoy teniendo problemas para averiguar cómo debo integrar ExtJS en una aplicación PHP MVC típica.
— Alix Axel
El mejor lugar para comenzar son los tutoriales que ofrece EXT: extjs.com/learn/Tutorials En cuanto a integrarlo con su marco PHP, no podría decirlo, pero estas son sus páginas HTML, por lo que las integraría de la manera que desee. integraría cualquier otra página, ¿no?
— Erik
11

Una combinación de 960gs para diseño y jQuery-UI para estilo es probablemente lo que está buscando.

También podría considerar el marco CSS de planos en lugar de 960gs.

— Shane O'Grady
fuente
¿Te refieres al marco jQuery UI JS o al marco jQuery UI CSS?
— Alix Axel
1
Disculpas por la confusión, me refiero al marco CSS de jQuery UI para diseñar. Pero no hay ninguna razón por la que no pueda incorporar también el marco de widgets JS.
— Shane O'Grady
Gracias, lo investigaré. =)
— Alix Axel
7

¿Qué hay de usar dojo y dijit ?

Dijit es una forma rápida de crear widgets y elementos. También viene con 3 temas predeterminados que son fáciles de modificar.

Una buena lista de widgets diferentes aquí.

— peirix
fuente
dijit parece lo que necesito, sin embargo, no puedo acceder a la página, no sé por qué.
— Alix Axel
¿Qué página es a la que no puede acceder?
— peirix
dijit, pero está funcionando ahora. =) Lo veré mejor tan pronto como me acerque a una computadora (actualmente estoy navegando con un teléfono).
— Alix Axel
6

Únete a alguien que se especialice en diseño de interfaces de usuario.

Si sabe manejar mejor la lógica empresarial, es mejor dedicar su tiempo exclusivamente a codificar la lógica empresarial para que pueda dominarla. Esto requerirá que aprenda a interactuar con otra persona que sobresalga en la presentación. ( xml y json son medios comunes)

La lógica empresarial y la presentación son muy diferentes. Diseñar un sistema que no solo se vea bien, sino que sea intuitivo y fácil de usar es bastante difícil. Tan difícil y lento como establecer el funcionamiento interno de una aplicación compleja.

Una buena interfaz no es tan simple como incluir un framework CSS.

Me considero un programador más "creativo" que se destaca en la presentación. Tuve la suerte de cruzarme con alguien que estaba, en primer lugar ... muy motivado y, en segundo lugar, muy bueno en la "lógica empresarial". Tenía mucha más experiencia en la planificación e implementación de sistemas complejos, mientras que yo me he centrado principalmente en el diseño de interfaces.

Si eres más productivo haciendo arquitectura de sistemas, planificación, desarrollo, lo que sea ... debes esforzarte en esa dirección. Si bien los proyectos de desarrollo individual pueden ser bastante satisfactorios, los veo ineficaces. Es muy raro que alguien posea habilidades para desarrollar aplicaciones de alto nivel en solitario.

El desafío es encontrar a alguien con quien trabajar bien.

— Derek Adair
fuente
3

Hay algunos marcos destinados a (G) Diseño de UI; Qooxdoo , JQuery UI y MochaUI son algunos de ellos (aunque el último es más una prueba de concepto que un marco utilizable). Estos marcos generalmente ofrecen una variedad de elementos impulsados ​​por JS (elementos de formulario, como campos de entrada y botones de envío, pero también otros elementos como pestañas). Sin embargo, aún dependerá de usted colocar estos elementos, y tal vez diseñarlos, a su gusto.

Quizás familiarizarse con un marco CSS (como 960GS ) podría complementar los marcos JS UI anteriores.

(Como descargo de responsabilidad personal; tengo muy poca experiencia con cualquiera de los marcos mencionados anteriormente. Pero estoy seguro de que Google o SO pueden proporcionar respuestas que yo no puedo).

— Duroth
fuente
1
960.gs realmente no tiene mucho estilo, quieres algo como Bluetrip ( bluetrip.org ) para eso. 960.gs realmente solo proporciona un diseño basado en cuadrículas.
— Dominic Rodger
Eché un vistazo a los marcos que sugirió, qooxdoo parece demasiado complicado (todo parece estar definido a través de Javascript, incluso entradas de formulario, etc.), MochaUI tiene una interfaz realmente agradable con colores neutros muy geniales, no he visto el código fuente de la misma, pero también parece bastante limitado (faltan muchos estilos elementales). jQuery UI parece la mejor opción hasta ahora. 960.gs es agradable, pero como dijo Dominic, no es para estilizar.
— Alix Axel
3

Esto no le ayudará en su proyecto actual, pero vale la pena considerarlo para proyectos futuros. Después de pasar muchos años creando aplicaciones GUI en HTML 4 y luchando constantemente contra las limitaciones de CSS y HTML, pensé en probar Adobe Flex. ¡Qué mejora!

En lugar de simular un control de página con pestañas o una cuadrícula de datos, con Flex o Silverlight, su marcado puede simplemente especificar un control de página con pestañas o una cuadrícula de datos. Y los marcos vienen con estilos predeterminados que son aburridos pero no están del todo mal. No estoy diciendo que estos reemplacen completamente al HTML, pero si necesita widgets y diseño de GUI, creo que son una alternativa mucho mejor.

— Jacob
fuente
Flex es una herramienta realmente excelente, pero tenga en cuenta que en estos días el mundo se está moviendo hacia HTML 5 y flex tiene muchos problemas con el tamaño y multilingües donde gana javascript y qué piensas sobre el precio, pero
— sigo
Realmente espero que del proceso de estándares surja una solución HTML / Javascript / CSS pura para aplicaciones.
— Jacob
Flex puede ser bastante voluminoso y no ser tan amigable con los motores de búsqueda ... pero el sistema es inmejorable en mi opinión. No soy un desarrollador web "senior", pero realmente veo el beneficio de trabajar dentro del marco flexible. Adobe tiene un sistema realmente bueno. El solo hecho de poder codificar para escritorio / web / Y móvil con UN marco / medios de entrega estandarizados es valioso más allá de las palabras.
— Derek Adair
2

Las maquetas de estructura alámbrica como esa son una forma brillante de comenzar.

Habiendo utilizado la mayoría de los marcos de interfaz de usuario discutidos aquí, me gustaría guiarte hacia jQueryUi por las siguientes razones:

  1. El marco CSS jQueryUI se encarga del CSS consistente y atractivo para usted (es realmente fácil, solo haga algunas marcas y aplique las clases)

  2. jQueryUI tiene control de tabulación y un montón de formas sencillas y ordenadas para diseñar formularios.

— Rico
fuente
De todas las opciones sugeridas, me inclino más por ExtJS, ¿lo ha usado alguna vez? ¿Cómo se compara con jQuery UI?
— Alix Axel
ExtJS es muy maduro y completo. Tenga en cuenta que es GPL con doble licencia y comercial. Realmente es una interfaz de widget dirigida a interfaces de usuario muy ricas. Entonces, si quieres algo más "corporativo" y menos "amigable", no es una mala elección. Lo único es que tiene una pequeña curva de aprendizaje, realmente es un marco completo en sí mismo. Más como programación GUI que web. Buena suerte
— Rich
2

Si está apuntando a navegadores modernos, que no son de IE, debería consultar Sproutcore . Para las maquetas utilizo Mockingbird .

— ptulina
fuente
¡Gracias, ruiseñor realmente me alegró el día! En cuanto a Sproutcore, parece agradable, pero algunas de las demostraciones se ven con errores en Firefox 3.5.7.
— Alix Axel
2

Un marco PHP relativamente nuevo diseñado específicamente para el desarrollo de software centrado en la interfaz de usuario. Los elementos que tiene aquí, incluidas las pestañas, los filtros y las cuadrículas, están incluidos y le llevarán aproximadamente 20 líneas de código para implementar.

http://agiletoolkit.org/

— romaninsh
fuente
1

¿Has probado Axure ? Es una herramienta para crear rápidamente wireframes, prototipos y especificaciones para aplicaciones y sitios web.

Funciona de manera similar a Balsamiq, pero le permite exportar sus wireframes / prototipos como HTML, CSS y Javascript.

A continuación, puede cargarlo en un servidor o ejecutarlo en su computadora como ejemplo de trabajo.

Puede crear formularios, enlaces, pestañas, rollovers, efectos Javascript.

— Jonny Haynes
fuente
Gracias, Axure parece agradable, pero no es lo que busco.
— Alix Axel
1

Si ya está utilizando Balsamic Mockups para sus prototipos, debería considerar Napkee . Para citar el sitio web "Napkee le permite exportar maquetas de Balsamiq a HTML / CSS / JS y Adobe Flex 3 con un clic de un botón".

— Pablo
fuente
1

Me encontré con esto hace un tiempo y no pude encontrar nada, así que lo aproveché como una oportunidad para aprender css. Pero desde entonces parece que se han hecho grandes avances hacia este tema.

  • Resumiendo su problema, hay una página de wikipedia .
  • Existe yaml-css , que toma yaml y lo convierte en css
  • Hay una línea de base , pero asume algunos conocimientos de CSS.
  • También sugiero mirar Dreamweaver de Adobe . Tienen muchas herramientas de generación de estilos y CSS que producen un código muy legible y compatible con w3c.

Espero que eso ayude.

— icco
fuente
1

Una combinación de 960gs para el diseño y las herramientas jQuery-UI o Jquery es excelente, las uso casi en todos los proyectos, pero me gustaría agregarlas a http://easyframework.com/ aunque no es amigable para los negocios, así que asegúrese de revisar es licencia pero me gusta

— tawfekov
fuente
Asegúrese de visitar cufon cufon.shoqolate.com/generate si está interesado en la tipografía
— tawfekov
1

Recientemente descubrí un buen sitio web llamado iplotz.com donde puedes crear una maqueta de tu aplicación / sitio web / proyecto en línea sin instalar nada. También tiene la mayoría de los controles comunes, junto con muchas más funciones para administrar todo el proyecto y compartirlo con otros en línea.

Debo admitir que todavía no lo probé yo mismo, pero lo miré un poco y parece bastante bueno. Probablemente lo usaré pronto.

— gillyb
fuente
Es una muy buena alternativa a Balsamiq, mi navegador es un cajero automático muy lento pero desde la primera impresión parece que vale la pena el dinero, gracias.
— Alix Axel
0

Me gusta agregar Bootstrap , su marco de interfaz de usuario intuitivo y potente para un desarrollo web más rápido y fácil.

— Emilio Gort
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.