Do rascunho ao protótipo
Comece com um fluxo pequeno de tarefas e teste ações, validação e filtros antes de expandir o protótipo.
1 / 4
Para praticarPT
Use o wireframe anexado como referência de estrutura. Crie um protótipo em um único arquivo HTML, com CSS e JavaScript. Mantenha título, indicador de progresso, campo para adicionar tarefa, filtros Todas/Pendentes/Feitas e lista. Use preto, off-white e verde-lima. Implemente adicionar tarefa, concluir e reabrir, e filtrar. Valide entradas vazias. Use rótulos acessíveis e foco visível. Salve apenas no navegador, sem login ou servidor. Faça uma versão responsiva e explique como testar cada ação.
Leia o contexto, adapte ao seu projeto e revise o resultado.
Links e arquivos
DA IDEIA À PRÁTICA
Entenda e experimente
Uma ideia de interface fica mais fácil de avaliar quando você tira o primeiro fluxo do papel.
Neste exemplo didático, o rascunho organiza uma lista de tarefas. O HTML implementa adicionar, concluir e filtrar, com dados fictícios. A proposta é começar pequeno e conferir o comportamento antes de expandir.
CHECKLIST DO PRIMEIRO FLUXO
• O botão adiciona a tarefa?
• Concluir atualiza o progresso?
• O filtro mostra o grupo certo?
• A tela funciona no celular e com teclado?
A imagem é uma prévia ilustrativa, desenhada separadamente, e pode diferir do HTML no navegador. A lógica do JavaScript passou por 13 testes unitários em DOM simulado. Não houve teste em navegador, de responsividade ou de teclado. Confira o comportamento e o layout ao abrir o HTML. Nenhuma aplicação foi publicada.
O que você vai aprender
- Especificar um primeiro fluxo funcional
- Separar teste de lógica de teste de interface
Como aplicar
- Anexe um wireframe com o fluxo principal
- Implemente adicionar, concluir, reabrir e filtrar
- Teste entradas vazias e progresso
- Abra em navegador e confira celular, foco e teclado
Seu exercício
Aplique o guia a uma referência ou conjunto de dados seu e registre uma decisão e uma verificação: abra em navegador e confira celular, foco e teclado.
Sobre este exemplo
- Prévia ilustrativa separada do HTML; 13 testes unitários de JavaScript passaram em DOM simulado
Limites da demonstração
- Não houve teste em navegador, responsividade ou teclado; nenhuma aplicação foi publicada
- Os pedidos apresentados são textos da fonte para reprodução ou adaptação; a execução literal de cada texto não está comprovada, salvo indicação explícita.
Leia a legenda original
Uma ideia de interface fica mais fácil de avaliar quando você tira o primeiro fluxo do papel.
Neste exemplo didático, o rascunho organiza uma lista de tarefas. O HTML implementa adicionar, concluir e filtrar, com dados fictícios. A proposta é começar pequeno e conferir o comportamento antes de expandir.
PROMPT PARA ADAPTAR
Use o wireframe anexado como referência de estrutura. Crie um protótipo em um único arquivo HTML, com CSS e JavaScript. Mantenha título, indicador de progresso, campo para adicionar tarefa, filtros Todas/Pendentes/Feitas e lista. Use preto, off-white e verde-lima. Implemente adicionar tarefa, concluir e reabrir, e filtrar. Valide entradas vazias. Use rótulos acessíveis e foco visível. Salve apenas no navegador, sem login ou servidor. Faça uma versão responsiva e explique como testar cada ação.
CHECKLIST DO PRIMEIRO FLUXO
• O botão adiciona a tarefa?
• Concluir atualiza o progresso?
• O filtro mostra o grupo certo?
• A tela funciona no celular e com teclado?
A imagem é uma prévia ilustrativa, desenhada separadamente, e pode diferir do HTML no navegador. A lógica do JavaScript passou por 13 testes unitários em DOM simulado. Não houve teste em navegador, de responsividade ou de teclado. O HTML local e a verificação estão no pacote; confira o comportamento e o layout ao abrir. Nenhuma aplicação foi publicada.
Teste adicionar, concluir e reabrir uma tarefa no navegador.
Confira também celular, foco e teclado
#InteligenciaArtificial #Prototipagem #DesignDeInterface #HTML
REFERÊNCIAS TÉCNICAS
O exemplo foi criado nesta produção. O pacote contém seu HTML, wireframe e relatório de verificação.
Continue a trilha
Próximo postComece pelo método · Post #75 · A reunião acabou. e agora?