Encontro 08 - Rede Daora
Planejamento Técnico: Do Estático ao Multi-Páginas
Transformar descoberta e design system em arquitetura, wireframe, specs e issues
Materiais já prontos
Ponto de partida
Hoje não vamos redefinir público, estilo ou objetivo. Vamos usar as decisões que já existem.
Descoberta
descoberta.md da aula 07
Design system
design.md e tokens.css da aula 06
Repositório
Projeto no GitHub
O plano do MVP
Entregáveis da aula
Arquitetura
Mapa do site, fluxo e wireframe da Home
Componentes
O que é global e o que pertence a cada página
Tecnologia
Estrutura, atualização, hospedagem e limites
Issues
Tarefas do MVP no GitHub Projects
01
Spec de arquitetura
Páginas do MVP
Mapa do site
Home (/)
├── Sobre (/sobre)
├── Catálogo (/catalogo)
│ └── Produto (/catalogo/[nome])
└── Contato (/contato)Cada nó vira uma linha do arquitetura.md. Use 3 ou 4 páginas no MVP. O resto vai para o Backlog.
Ação principal
Páginas e fluxo
| Página | Objetivo | Conteúdo principal |
|---|---|---|
| Home | Apresentar | Hero, destaques, CTA |
| Sobre | Contar a história | História, missão, valores |
| Catálogo | Mostrar oferta | Cards, preço, CTA |
| Contato | Receber mensagens | Formulário, WhatsApp |
Home → Catálogo → Produto → EncomendaRascunho no papel
Wireframe low-fi da Home
Desenhe a Home com os 6 blocos da aula 06: identidade, CTA, conteúdo, prova social, navegação e rodapé.
Legenda
Título = linha grossa · texto = linhas finas · imagem = X · botão = retângulo
Entrega
Tire foto e anexe ao arquitetura.md.
Não precisa ficar bonito. Precisa mostrar a ordem e a função dos blocos.
02
Spec de componentes
Inventário de componentes
Compare as páginas
Global
Aparece em mais de uma página: Menu, Footer.
De página
Existe onde é necessário: Hero, Card, Formulário.
Registre também o que muda: título, imagem, preço, link ou CTA.
03
Spec de tecnologia
Sem catálogo de ferramentas
Registre a decisão
Estrutura
HTML/CSS/JavaScript ou Astro, com motivo.
Atualização
Frequência e se precisa pesquisar CMS.
Hospedagem
Plataforma escolhida na aula 03.
Limites
O que entra agora e o que fica para depois.
04
Do spec para as issues
GitHub Projects
Cada parte vira uma tarefa
| Item do spec | Exemplo de issue |
|---|---|
| Página | Criar Home com hero, destaques e CTA |
| Componente global | Criar Menu para as páginas do MVP |
| Componente de página | Criar Card para o catálogo |
| Decisão técnica | Configurar hospedagem escolhida |
MVP no To Do. Ideias futuras no Backlog.
Montar o plano do projeto
Prática
- Abra descoberta, design system e tokens.
- Crie
arquitetura.mdcom sitemap, fluxo e wireframe. - Crie
componentes.mdetecnologia.md. - Transforme os specs em issues.
- Deixe no
To Dosomente o MVP.
Ao final da aula
Resultado
3 specs
Arquitetura, componentes e tecnologia.
Wireframe da Home
Rascunho registrado no spec de arquitetura.
MVP definido
Páginas e tarefas que entram agora.
Quadro pronto
Issues do MVP organizadas no GitHub Projects.