Estilos comuns de interface do usuário da web

Tenho que apresentar um protótipo de um aplicativo web nos dias seguintes para um dos meus clientes, o que acontece é que não sou muito bom em CSS e o pior de tudo quase nunca fico feliz com os resultados que recebo.

Codificar a lógica de negócios não representa nenhum desafio para mim, o design da IU, entretanto, leva mais de 80% do meu tempo. Não preciso de nada de tirar o fôlego, apenas de um ambiente limpo, agradável e apresentável, um exemplo:

Este é um problema recorrente que tenho tido, gostaria que o desenvolvimento de IU da web pudesse ter um estilo padrão menos simples , uma abordagem semelhante ao Visual Studio ou iPhone SDK seria muito útil para mim.

A maquete acima criada com Balsamiq Mockups é um ótimo exemplo, todos os "componentes" mais comuns estão disponíveis para uso, e o melhor de tudo: há apenas um estilo bonito para escolher.

Existe algo assim para a web? Uma estrutura de IU de CSS ou Javascript neutra, mas agradável?

Opções até agora:

• Bootstrap
• Qooxdoo
• jQuery UI
• Ferramentas jQuery
• MochaUI
• Ext JS
• Yahoo! Biblioteca de interface do usuário
• BlueTrip
• BluePrint
• Uki ( demonstração )
• Napkee
• YAML
• Linha de base
• iPlotz
• Sproutcore
• ForeUI

Estou interessado em saber se há algum framework de IU somente CSS.

Achei esta página com uma lista muito boa de Bibliotecas de IU da Web , mas a maioria delas (pelo menos as boas) parecem ser específicas para Java. Existem alternativas igualmente boas em CSS ou JS puro?

PS: Não estou interessado em AJAX, efeitos, comportamentos e assim por diante ... minha principal (única) preocupação é o estilo.

Obrigado por todas as sugestões todos!

Depois de uma consideração muito cuidadosa de todas as bibliotecas de IU sugeridas, cheguei à conclusão de que ExtJS e Qooxdoo são os que mais se adaptam às minhas necessidades. O jQuery UI parece promissor, mas oferece apenas uma quantidade reduzida de elementos.

No que diz respeito às bibliotecas somente CSS, considero o BlueTrip / BluePrint e os temas sugeridos pelo tambler os melhores. Além disso, Flex e Napkee também parecem valer a pena explorar.

É hora de aprender ExtJS agora! =)

Não acredito que ninguém mencionou:

http://www.extjs.com/

É um framework js comercial, mas bastante acessível, e torna a montagem de uma bela IU muito fácil. Há um conjunto de elementos muito mais completo do que o jqueryui, e foi projetado para fazer um aplicativo inteiro. Eu só brinquei com ele um pouco, mas eu realmente amo até agora. Gratuito para uso pessoal.

Se você realmente deseja ter uma ideia de uma IU completa desenvolvida com EXT, tente este url:

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

Uma combinação de 960gs para layout e jQuery-UI para estilo é provavelmente o que você está procurando.

Você também pode considerar a estrutura CSS do blueprint em vez de 960gs.

Que tal usar dojo e dijit ?

Dijit é uma maneira rápida de criar widgets e elementos. Ele também vem com 3 temas padrão que são fáceis de modificar.

Uma boa lista de widgets diferentes aqui

Junte-se a alguém especializado em design de IU.

Se você é melhor em lidar com a lógica de negócios, é melhor gastar seu tempo exclusivamente codificando a lógica de negócios para que você possa dominá-la. Isso exigirá que você aprenda a interagir com alguém que se destaca na apresentação. ( xml e json são meios comuns)

A lógica de negócios e a apresentação são muito diferentes. Projetar um sistema que não só tenha uma boa aparência, mas seja intuitivo e fácil de usar é bastante difícil. Tão difícil e demorado quanto estabelecer o funcionamento interno de um aplicativo complexo.

Uma boa interface não é tão simples quanto incluir uma estrutura css.

Eu me considero um programador mais 'criativo' que se destaca na apresentação. Acontece que eu tive a sorte de cruzar o caminho com alguém que era, antes de tudo ... muito motivado e, em segundo lugar, muito bom em 'lógica de negócios'. Ele tinha muito mais experiência em planejamento e implementação de sistemas complexos, enquanto eu me concentrei principalmente em design de interface.

Se você é mais produtivo fazendo arquitetura de sistema, planejamento, desenvolvimento, seja o que for ... você deve se esforçar nessa direção. Embora os projetos de desenvolvimento solo possam ser bastante satisfatórios, considero-os ineficientes. É muito raro alguém possuir habilidades para desenvolver aplicativos de nível superior sozinho.

O desafio é encontrar alguém com quem você trabalhe bem.

Confira o Google Web Toolkit . Ele tem uma aparência padrão bastante limpa. Eles têm exemplos . Em particular, seu exemplo Showcase demonstra todos os widgets disponíveis e o estilo css usado para obter a aparência.

Existem algumas estruturas destinadas a (G) Design de IU; Qooxdoo , JQuery UI e MochaUI são alguns deles (embora o último seja mais uma prova de conceito do que uma estrutura utilizável). Essas estruturas geralmente oferecem uma variedade de elementos baseados em JS (elementos de formulário, como campos de entrada e botões de envio, mas outros elementos como guias também). No entanto, ainda caberá a você posicionar esses elementos, e talvez estilizá-los, de acordo com sua preferência.

Talvez se familiarizar com uma estrutura CSS (como 960GS ) possa complementar as Estruturas de IU JS acima.

(Como isenção de responsabilidade pessoal; tenho muito pouca experiência com qualquer uma das estruturas mencionadas acima. Mas tenho certeza de que o Google ou o SO podem fornecer respostas que não posso.)

Isso não vai ajudá-lo em seu projeto atual, mas vale a pena considerar para projetos futuros. Depois de passar muitos anos criando aplicativos GUI em HTML 4 e lutando constantemente contra as limitações de CSS e HTML, pensei em experimentar o Adobe Flex. Que melhoria!

Em vez de simular um controle de página com guias ou grade de dados, com Flex ou Silverlight, sua marcação pode simplesmente especificar um controle de página com guias ou grade de dados. E as estruturas vêm com estilos padrão que são enfadonhos, mas nem um pouco ruins. Não estou dizendo que eles substituem completamente o HTML, mas se você precisar de widgets e layout de GUI, acredito que sejam uma alternativa muito melhor.

Você pode considerar navegar no seguinte site:

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

Existem vários temas "Administrativos" disponíveis para compra aqui que podem atender às suas necessidades.

maquetes de wireframe como essa são uma maneira brilhante de começar.

Tendo usado a maioria dos framewroks de IU discutidos aqui, gostaria de orientá-lo em direção ao jQueryUi pelos seguintes motivos:

1. O framework CSS da jQueryUI cuida do CSS consistente e de aparência legal para você (é realmente fácil - basta fazer algumas marcações e aplicar as classes)

2. jQueryUI tem tabcontrol e montes de maneiras fáceis e rápidas de estilizar formulários.

Se você está almejando navegadores modernos, não IE, então você deve verificar o Sproutcore . Para maquetes eu uso o mockingbird .

Uma estrutura PHP relativamente nova projetada especificamente para o desenvolvimento de software focado em IU. Os elementos que você tem aqui, incluindo guias, filtros e grades, estão incluídos e levarão cerca de 20 linhas de código para serem implementados.

http://agiletoolkit.org/

Você já experimentou Axure ? É uma ferramenta para criar rapidamente wireframes, protótipos e especificações para aplicativos e sites da web.

Funciona de forma semelhante ao Balsamiq, mas permite exportar seus wireframes / protótipos como HTML, CSS e Javascript.

Você pode então fazer o upload para um servidor ou executá-lo em seu computador como um exemplo funcional.

Você pode criar formulários, links, guias, rollovers, efeitos Javascript.

Se você já usa maquetes balsâmicas para seus protótipos, deve considerar o Napkee . Para citar o site "Napkee permite exportar Balsamiq Mockups para HTML / CSS / JS e Adobe Flex 3 com o clique de um botão."

Encontrei isso há algum tempo e não consegui encontrar nada, então aproveitei isso como uma oportunidade para aprender css. Mas, desde então, parece que grandes avanços foram feitos neste assunto.

• Resumindo seu problema, existe uma página da wikipedia .
• Existe o yaml-css , que pega o yaml e o transforma em css
• Existe uma linha de base , mas pressupõe algum conhecimento de CSS.
• Eu também sugiro olhar para o Dreamweaver da Adobe . Eles têm muitas ferramentas de geração de CSS e estilo que produzem código muito legível e compatível com w3c.

Espero que ajude.

Uma combinação de 960gs para layout e ferramentas jQuery-UI ou Jquery é ótima, eu as uso quase em todos os projetos, mas gostaria de adicionar a http://easyframework.com/ embora não seja amigável para negócios, então certifique-se de verificar sua licença, mas eu gosto

Recentemente, descobri um site legal chamado iplotz.com, onde você pode criar uma maquete de seu aplicativo / site / projeto online sem instalar nada. Ele também possui a maioria dos controles comuns, junto com muito mais recursos para gerenciar todo o projeto e compartilhá-lo com outras pessoas online.

Devo admitir, ainda não experimentei, mas olhei um pouco e me parece muito legal. Provavelmente estarei usando em breve.

Parece que o Sass tem potencial como forma de atenuar algumas dores de cabeça do CSS.

Gosto de adicionar Bootstrap , sua estrutura de front-end intuitiva e poderosa para um desenvolvimento web mais rápido e fácil.

Eu gosto do RocketCSS . Belo design limpo, experimente.