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:
javascript
html
css
methodology
prototyping
charlax
fonte
fonte
Respostas:
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.
fonte
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.
fonte
* 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
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.
fonte
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.
fonte