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

8

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:

charlax
fonte
1
Eu costumo escrever maquetes em HTML / CSS / JS. Em seguida, reutilizo a maioria das coisas que escrevi para a maquete quando conecto o aplicativo da web.
dietbuddha
Css e js realmente pertencem a um protótipo de GUI? eu entendo o propósito de um protótipo de GUI para dar ao cliente a impressão de "quais campos entram em qual forma de GUI" e "quais botões / ações existem para avançar para a próxima forma de GUI". o formulário da GUI deve conter dados de amostra codificados e sem mais funcionalidade para passar de um formulário para o seguinte. Podemos reduzir sua pergunta para "qual editor estático de html é o mais adequado para a criação de protótipos de GUI"?
K3b #
Obrigado por seu comentário. Não, acho que é mais amplo do que apenas mostrar campos e formulários. Às vezes, animações e transições são tão importantes quanto o layout (por exemplo, para uma interface de TV). Contudo, descrever aqueles com palavras é tedioso e ineficiente quando comparado a apenas mostrá-los na tela e depois experimentar.
charlax

Respostas:

6

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.

Ryan Hayes
fonte
Eu estava pensando mais em termos de protótipo do que em estrutura de arame. Eu sei que posso criar um protótipo usando o PowerPoint ou Omnigraffle, mas gostaria de fazê-lo usando HTML, CSS e javascript.
charlax
5

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:

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.

Adrian J. Moreno
fonte
1

* 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.

Jack Stone
fonte
Resposta mais útil aqui.
theringostarrs
0

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.

BenLanc
fonte
1
A prototipagem é mais do que apenas a ferramenta. Considere expandir sua resposta para explicar alguns aspectos do "como" e apenas o "com o quê".