Quais são as melhores práticas para prototipagem rápida usando exclusivamente HTML / CSS / JS [fechado]

Estou desenvolvendo um protótipo de um aplicativo da web. Eu quero usar apenas HTML, CSS e Javascript. Prefiro usar meu editor de texto e não precisar aprender (ou pagar, por falar nisso) uma nova ferramenta como o Axure.

Quais seriam, em sua opinião, as melhores práticas? Para mim, existem muitas qualidades para um bom protótipo:

• Desenvolvido rapidamente
• Fácil de melhorar
• Fidelidade justa em relação ao UX (isso desqualifica ferramentas como Omnigraffle ou PowerPoint que são mais dedicadas a wireframing)

Estou tentando aprender o mais rápido possível, mas gostaria de saber, com base na sua experiência, como você conseguiu ser rápido e ágil.

Referência:

• http://www.boxesandarrows.com/view/prototyping-with

Se você vai jogar fora o protótipo e recomeçar no aplicativo real mais tarde, sugiro que você use uma ferramenta como PowerPoint ou Balsamiq ou mesmo papel. A baixa fidelidade permite que os usuários se concentrem na interação e menos nas cores ou nos botões borbulhantes. Na verdade, você trabalha com mais dobras mais rapidamente, com menos investimentos como esse.

Se você pretende usar o seu código como base para um aplicativo real , sugiro que procure algo leve como o Webmatrix ou o equivalente em Ruby / Java IDE. O Webmatrix é uma ferramenta gratuita que é um IDE que o ajudará a projetar e simular seu site com muita rapidez e até mesmo usar o SQL Express, o IIS Express e as outras partes da pilha da Web .NET (todas gratuitas) localmente. Então, se você decidir atualizar para o Visual Studio posteriormente, poderá fazê-lo sem fazer nada no seu aplicativo.

Você pode levar um protótipo para o aplicativo real rapidamente, se escolher as ferramentas certas. Recentemente, prototipei uma ferramenta interna que eventualmente substituirá uma coleção arcaica de telas que gerenciam dados internos. O sistema antigo não é muito intuitivo e é extremamente confuso para novos contratados.

Minha pilha:

• Boiilerplate HTML5
• CSS Blueprint para Grades e Layout
• jQuery e jQueryUI para manipular JavaScript e layout
• jQuery Valide para validação de formulário do lado do cliente

Coloque isso em cima de uma estrutura MVC e amarre-o ao código do aplicativo do servidor de sua escolha e você poderá estar em funcionamento em um dia.

* COMO PROTÓTIPO RAPIDAMENTE *

Algumas pessoas estão confusas com isso. Por favor, tenha paciência comigo, existem diferentes níveis de "velocidade" quando se trata de prototipar, mas há apenas um que é o mais rápido - e sempre será o mais rápido, porque é o mais próximo do nível de interação; e esse é o navegador.

Como prototipar rapidamente?

1 - Tente encontrar tudo o que há para "Design-in-Browser" - Especialistas dizem que a melhor maneira de criar front-end é "chegar ao código o mais rápido possível" - Chris Coyier.

2 - Ser rápido significa reutilizar. - O truque número 1 para a prototipagem rápida é "construir componentes que podem ser construídos sobre o outro componente que você já construiu."

Exemplo: - Pode ser como guias comprovadas em uma página - Gráficos comprovados em outra página - Em seguida, caixas de combinação ricas comprovadas em uma terceira página

 - In a fourth page, the three prior prototypes combine into a complex-component.

 Mixing - Components together, is key. 

3 - Pelo amor de Deus, se você é um protótipo rápido - PODE SER DESLOCADO. Por favor, não se iluda com o fato de que o código de formatação será necessário. Protótipos rápidos são códigos descartáveis, ou códigos em evolução, em ambos os casos, isso pode ser resolvido ou automatizado muito tempo após a revisão do protótipo. O objetivo do protótipo é determinar a vitalidade da arquitetura. Estamos falando de um produto viável mínimo na maioria dos casos, portanto, obtenha o código de trabalho na página o mais rápido possível. Esta é apenas a Prova de Conceito, não a prova do pudim.

4 - Mencionei automação, um bom IDE é realmente importante - um com muitas teclas de atalho. "Para prototipar rapidamente - seus dedos precisam estar voando, não o mouse". - Mas tem mais. Muitos IDE irão formatar seu código para você. Muitos irão fiapos enquanto você trabalha, encontrando erros à medida que são cometidos, alguns podem atualizar seu navegador ao salvar. Realce de sintaxe. É simples, mas eficaz.

Conclusão: A Prototipagem Rápida é uma compilação desses tipos de características de melhores práticas. Nenhum de nós é imediatamente rápido: é um processo de evolução para acelerar sua velocidade. Isso é medido no Agile como velocidade. Você deve pensar - como ir mais rápido, depois incline-se mais para a frente.

** Incorpore todas as otimizações de desenvolvimento que puder ao longo do tempo. ** Crie bibliotecas de widgets, tecnologias e cemitérios de API prototipados. ** Então, quando chegar a hora, duplique-os e misture-os - mantendo os originais e desenvolvendo algo novo. ** Isso é especialmente verdadeiro para muitas estruturas JS.

Espero que ajude.

Você já considerou o Bootstrap do Twitter ou o Pure do Yahoo ?

Ambos são muito, muito fáceis de instalar e funcionar, e você pode fazer algumas interfaces bastante complexas apenas com o que obtém "fora da caixa".

Eu usei o Bootstrap para prototipagem por um longo tempo e, na maioria das vezes, os mesmos ossos do protótipo chegam ao produto final.