Depois de definirmos claramente o problema (Imersão) e delimitarmos a solução mais promissora (Ideação), entramos na fase de Prototipação. Este é o momento em que as ideias começam a ganhar forma concreta, transformando hipóteses em representações visuais e funcionais que poderão ser testadas e validadas.

A primeira etapa da prototipação foi definir e listar as funcionalidades da solução. Essa priorização inicial nos deu clareza sobre o que deveria ser construído e como cada item se conectava às dores identificadas na fase de Imersão.

Com as funcionalidades definidas, organizamos todas dentro de uma Arquitetura da Informação, representada em formato de sitemap.

Esse artefato estruturou hierarquicamente todas as páginas e suas conexões, permitindo compreender o fluxo completo da navegação do usuário.

O sitemap reduziu atritos de poluição visual e confusão na navegação, garantindo clareza e coesão entre o design e o desenvolvimento.

Para centralizar e organizar os entregáveis, criamos o repositório no GitHub com um README explicativo.

Esse espaço passou a ser o ponto de referência do projeto, com instruções de execução local, controle de versões e links para todos os artefatos e entregas futuras.

Em paralelo, desenvolvemos a Versão 1 do documento de Histórias de Usuário, seguindo o formato BDD e os critérios INVEST.

Foram criadas oito histórias completas, com cenários claros de validação, cobrindo as principais interações do leitor com o portal.

Por fim, avançamos para a versão inicial do modelo de dados no Django, representando as entidades centrais da aplicação.

As classes e relacionamentos básicos foram definidos como fundamento técnico da solução, permitindo que o back-end começasse a espelhar a lógica da interface.

Com a base lógica pronta, iniciamos a construção do wireframe, marcando o início da transição do conceito para o visual.

O wireframe representou todas as páginas principais (como Home, Todas as Notícias, Notícia Genérica e Newsletter) além dos elementos transversais como header fixo, menu off-canvas e player da Rádio Jornal.

O objetivo foi visualizar a arquitetura e navegação definidas no sitemap, antes da implementação funcional.

Durante a construção do wireframe, o documento de histórias de usuário foi revisado e expandido, atualizando cenários com base nas novas decisões técnicas e visuais.

Essa revisão garantiu a coerência entre o que foi desenhado, modelado e desenvolvido, servindo como ponte entre design e desenvolvimento.

Com as histórias revisadas, o time avançou para a finalização do modelo de dados no Django.

Foram feitos ajustes de classes, relacionamentos e integrações, garantindo consistência entre o banco de dados e a camada de apresentação.

Após a finalização do modelo, foi habilitado o painel administrativo do Django, permitindo criar, editar e visualizar registros diretamente na aplicação.

Essa etapa serviu como validação técnica da estrutura e comunicação com o banco de dados.

Concluídas as entregas da semana, o repositório do projeto foi atualizado com as novas versões de código, artefatos e documentos.

Essas atualizações garantiram rastreabilidade e transparência no progresso da equipe.

Durante essa semana, o wireframe foi aperfeiçoado visual e estruturalmente, detalhando estados de navegação e interações simples (como abertura do menu, filtros e busca).

Essa versão consolidou a base para a prototipagem de alta fidelidade.

Foi realizada a primeira implementação funcional de uma história de usuário, conectando o modelo de dados à interface.

Essa história serviu como prova de conceito e validou a integração entre front-end e back-end.

Mesmo sendo uma implementação inicial, ela demonstrou a viabilidade técnica da solução e representou o primeiro passo concreto rumo à integração total entre as camadas do sistema, consolidando a base para futuras iterações e validações.

Após a implementação, o GitHub foi novamente atualizado com commits descritivos e acompanhamento no bug tracker, registrando ajustes e melhorias.

Isso marcou o início da rotina de versionamento e controle contínuo do projeto.

Foi desenvolvido um moodboard visual, reunindo referências gráficas, tipográficas e cromáticas que orientaram a concepção da marca e da identidade visual.

O moodboard serviu como guia estético para o design final da marca do projeto.

Após os testes locais, as histórias implementadas foram implantadas em ambiente de produção na nuvem, tornando-se acessíveis para validação real.

Essa etapa permitiu testar o comportamento da aplicação em contexto prático.

Com o ambiente estável, foi implementada uma nova história de usuário, ampliando as funcionalidades já existentes e integrando novas interações da interface.

O link da aplicação em produção foi adicionado ao arquivo README do repositório, facilitando o acesso à versão pública do sistema.

Com o direcionamento estético definido no moodboard, iniciou-se o desenvolvimento da marca visual da solução, um símbolo que traduz o propósito e a identidade do projeto.

Essa etapa consolidou o vínculo entre design conceitual e identidade gráfica, servindo como base para as futuras aplicações visuais do projeto.

Com a marca consolidada, desenvolvemos suas aplicações em positivo e negativo, garantindo legibilidade em fundos claros e escuros.

Foram criadas versões em preto, branco, azul-claro/escuro e roxo-claro/escuro, respeitando as proporções originais.

A gama cromática completa (RGB e CMYK) foi documentada para garantir consistência entre uso digital e impresso, padronizando toda a identidade visual do artefato.

Nesta etapa, foi definida a paleta de cores da interface com base na regra 60 / 30 / 10, garantindo harmonia visual e consistência.

Foram escolhidos tons principais, secundários e de destaque, inspirados na identidade cromática, além da escolha do sistema de iconografia, com ícones coerentes, simples e de alta legibilidade.

Foram desenvolvidos os layouts visuais das cinco principais telas do portal, aplicando a paleta e a iconografia definidas na semana anterior.

Esses layouts consolidam o design visual do sistema e servem como base para a construção dos protótipos navegáveis.

Foi produzido o Relatório de Programação em PAR - Versão 1, documentando o progresso técnico e as decisões de desenvolvimento.

O relatório foi adicionado ao repositório GitHub, tornando-se acessível via link no README.

Foi iniciado o protótipo navegável no Figma, já com a interface final aplicada.

Essa versão consolidou todas as decisões visuais e estruturais do projeto, permitindo simulações completas da navegação, interações e comportamento dinâmico do portal.

Foi criado um screencast em vídeo (disponível no YouTube e vinculado ao README no GitHub) demonstrando a execução dos testes automatizados, com áudio explicativo ou legenda.

Esse material serve como evidência prática da validação técnica do sistema.

Também foi produzido um screencast mostrando o processo de build e deployment da pipeline CI/CD (com testes integrados), igualmente publicado no YouTube e referenciado no README.

O vídeo documenta visualmente o fluxo completo de automação.

Foi entregue o protótipo navegável final, integrando todas as telas, cores, ícones e interações definidas nas etapas anteriores.

Essa versão sintetiza o resultado visual e funcional do projeto completo, pronta para apresentação e testes de usabilidade.

O arquivo README do repositório foi atualizado com instruções claras e objetivas para orientar qualquer pessoa a instalar, executar e contribuir com o projeto.

Essa documentação garante a reprodutibilidade e a colaboração aberta.

Foi concluído o Relatório de Programação em PAR - Versão Final, consolidando todas as etapas de desenvolvimento e decisões técnicas do projeto.