# Do pedido à página — Designer de Interface Web Dois projetos completos. Atividades individuais, sem apresentação oral. ## 1 · Cartão de links Aulas 2 a 4 · 9 horas ### Começar por aqui Crie uma página pequena para reunir links e compartilhar um único endereço na bio de uma rede social ou no perfil de contato. **O percurso nos dois projetos:** briefing → dois esboços → direção visual → visualização e escolha → implementação → verificação → publicação. O `briefing.md` acompanha todos os pedidos. O `design.md` começa como um rascunho curto e é consolidado após a escolha visual. Na primeira entrevista, ele pode conter apenas intenções e pendências. Anexe também os esboços ou a referência escolhida quando o pedido precisar deles. ### Um projeto que cabe em três encontros - **Aula 2:** briefing, dois esboços e direção visual. - **Aula 3:** propostas visuais, escolha e implementação. - **Aula 4:** verificação, ajustes e publicação. Escopo: identificação, descrição curta, imagem opcional e três a cinco links. Sem cadastro, loja, pagamento ou formulário. Você pode usar uma pessoa, projeto profissional ou personagem fictício. Não precisa expor dados pessoais. ### A progressão já está disponível No seletor de projeto, abra **Página de negócio**. Depois do cartão, você repetirá o mesmo processo com conteúdo mais amplo, decisões de design, mídias e teste de usabilidade. ### Como usar esta apostila Leia, faça e registre no painel de apoio ou em **Abrir meus documentos**. Copie os pedidos apenas depois de revisar seus textos. Você pode visitar qualquer etapa; concluir é uma marcação pessoal, não uma nota. As atividades são individuais e as dúvidas podem ser encaminhadas por escrito. #### Atividade Leia a orientação, faça a atividade e guarde os arquivos no seu projeto. - Nome e descrição: Como a pessoa ou iniciativa se identifica? Escreva uma frase curta sobre o que oferece. --- ### Briefing Briefing é o registro do que você quer construir e para quem. Uma conversa simples já pode fornecer isso; o documento organiza o que foi entendido. ### Perguntas suficientes para começar - De quem é a página e o que essa pessoa ou iniciativa oferece? - Quem chega pelo link da bio e o que procura? - Quais três a cinco destinos serão reunidos? - Qual destino é a prioridade? - Quais textos e imagens já estão disponíveis? #### Exemplo fictício: Ateliê Lua Ilustradora que compartilha desenhos. Visitantes chegam do perfil para conhecer trabalhos ou pedir orçamento. Links: portfólio, contato e perfil social. Ação principal: conhecer o portfólio. Foto opcional. URLs ainda precisam ser definidas. Não há venda ou pagamento na página. Não copie contatos de terceiros para preencher o exemplo. Para a simulação, use destinos de demonstração explicitamente identificados e aprovados pelo professor; troque-os por destinos confirmados antes de uso real. ### Faça agora Preencha os campos, separando fatos, sugestões e pendências. Baixe uma primeira versão do briefing no caderno. Se usar IA, responda às perguntas e aprove o texto final; não aceite dados inventados. ### Pedido para a ferramenta O pedido inclui suas anotações atuais. Revise antes de copiar. As imagens e arquivos precisam ser anexados por você; copiar texto não os envia. Ver pedido e documentos incluídos ```text Ajude a organizar o briefing. Faça até cinco perguntas curtas, uma de cada vez, sobre lacunas que alteram o projeto. Use somente minhas respostas como fatos. Separe confirmado, hipótese e pendência. Não invente dados. Ao terminar, devolva briefing.md revisado. Preserve o design.md como rascunho nesta etapa. --- briefing.md --- # Briefing do projeto Projeto: Cartão de links ## Nome e descrição Pendente de definição. ## Visitante e situação Pendente de definição. ## Objetivo e ação principal Pendente de definição. ## Links e destinos Pendente de definição. ## Textos e imagens disponíveis Pendente de definição. ## Escopo Pendente de definição. ## Fatos, hipóteses e pendências Pendente de definição. ## Critérios de conclusão Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- design.md --- # Direção visual do projeto Projeto: Cartão de links ## Intenção visual Pendente de definição. ## Organização e hierarquia Pendente de definição. ## Cores e suas funções Pendente de definição. ## Tipografia Pendente de definição. ## Alinhamento, formas e espaçamento Pendente de definição. ## Imagens, ícones e outras mídias Pendente de definição. ## Comportamento e adaptação Pendente de definição. ## Referência aprovada e revisões Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- Registros para esta revisão --- # Registros do projeto Projeto: Cartão de links ## Comparação dos esboços Pendente de definição. ## Registro de verificação Pendente de definição. ## Publicação e entrega Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. ``` #### Atividade Leia a orientação, faça a atividade e guarde os arquivos no seu projeto. - Nome e descrição: Como a pessoa ou iniciativa se identifica? Escreva uma frase curta sobre o que oferece. - Visitante e situação: Quem chega pelo link da bio e o que procura? Não precisa inventar idade ou renda. - Objetivo e ação principal: O que deve ser fácil fazer? Escolha um dos links como prioridade. - Links e destinos: Liste de três a cinco rótulos e URLs completas. Identifique os destinos ainda pendentes. - Textos e imagens disponíveis: Nome, descrição, foto ou marca opcional. Registre origem e autorização de uso. - Escopo: Uma página, sem cadastro, pagamento ou formulário. Defina se é pessoal, profissional ou fictícia. - Fatos, hipóteses e pendências: O que está confirmado? O que é sugestão? O que falta verificar antes da publicação? - Critérios de conclusão: Ex.: abrir todos os links, identificar a ação prioritária e ler no celular sem rolagem lateral. --- ### Dois esboços ### Desenhe duas organizações Use papel e caneta ou um aplicativo com retângulos, círculos e texto. Não precisa desenhar bem. Represente imagem, nome, descrição e links; escreva os rótulos reais quando possível. | Alternativa A | Alternativa B | | --- | --- | | Identificação no topo, descrição e lista de links com destaque no primeiro. | Identificação compacta, ação principal em um bloco separado e os demais links abaixo. | Os exemplos são pontos de partida. Mantenha o mesmo conteúdo nas duas opções e altere uma decisão de organização. Trocar só a cor não cria uma segunda estrutura. ### Como comparar - Consigo entender de quem é a página? - Consigo identificar a ação principal? - A ordem ajuda quem chega pelo celular? - Algum elemento disputa atenção sem necessidade? Fotografe os desenhos de frente, com boa luz, ou exporte as telas. Salve como `esboco-a` e `esboco-b`. Uma justificativa de duas frases é suficiente. #### Atividade Leia a orientação, faça a atividade e guarde os arquivos no seu projeto. - Comparação dos esboços: O que mudou entre A e B? Qual facilita a tarefa principal e por quê? --- ### Direção visual ### Design é organizar a atenção e facilitar o uso - **Hierarquia:** tamanho, peso, posição e espaço indicam o que ler primeiro. Dê destaque à ação principal e reduza a competição. - **Tipografia:** comece com uma família legível e poucos pesos. Compare título, texto e rótulos no tamanho real da tela; texto sobre foto exige atenção ao fundo. - **Cor:** atribua funções: fundo, texto e destaque. A cor não deve ser a única pista de um estado ou ação. Confira contraste com uma ferramenta, além de olhar. - **Alinhamento:** escolha um eixo e repita-o. Elementos que parecem próximos devem estar relacionados. - **Espaçamento:** use intervalos consistentes; aumente a separação entre grupos e mantenha próximos os elementos do mesmo grupo. - **Formas e ícones:** use padrões reconhecíveis e rótulos claros. Um ícone decorativo não substitui o nome de um destino. ### Uma direção inicial possível “Leitura tranquila; fundo claro; texto escuro; destaque só na ação principal; nome maior que a descrição; margens constantes; links com largura confortável e espaço entre eles.” Isso orienta uma geração melhor que “faça algo moderno”. Não é uma receita obrigatória. Registre a direção no caderno. Depois da imagem escolhida, acrescente as decisões concretas e o nome da referência. Se a ferramenta de imagens não devolver texto, use a conversa para revisar o documento. ### Pedido para a ferramenta O pedido inclui suas anotações atuais. Revise antes de copiar. As imagens e arquivos precisam ser anexados por você; copiar texto não os envia. Ver pedido e documentos incluídos ```text Com o briefing e meus dois esboços anexados, ajude a refinar o design.md inicial. Explique como hierarquia, cor, tipografia, alinhamento e espaçamento ajudam a tarefa principal. Proponha escolhas simples e marque sugestões como sugestões. Não altere fatos do briefing. Devolva design.md para eu revisar. --- briefing.md --- # Briefing do projeto Projeto: Cartão de links ## Nome e descrição Pendente de definição. ## Visitante e situação Pendente de definição. ## Objetivo e ação principal Pendente de definição. ## Links e destinos Pendente de definição. ## Textos e imagens disponíveis Pendente de definição. ## Escopo Pendente de definição. ## Fatos, hipóteses e pendências Pendente de definição. ## Critérios de conclusão Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- design.md --- # Direção visual do projeto Projeto: Cartão de links ## Intenção visual Pendente de definição. ## Organização e hierarquia Pendente de definição. ## Cores e suas funções Pendente de definição. ## Tipografia Pendente de definição. ## Alinhamento, formas e espaçamento Pendente de definição. ## Imagens, ícones e outras mídias Pendente de definição. ## Comportamento e adaptação Pendente de definição. ## Referência aprovada e revisões Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- Registros para esta revisão --- # Registros do projeto Projeto: Cartão de links ## Comparação dos esboços Pendente de definição. ## Registro de verificação Pendente de definição. ## Publicação e entrega Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. ``` #### Atividade Leia a orientação, faça a atividade e guarde os arquivos no seu projeto. - Intenção visual: Escreva duas ou três palavras e explique: acolhedor significa fotos naturais e linguagem próxima, por exemplo. - Organização e hierarquia: Qual conteúdo vem primeiro? O que recebe maior destaque? Qual esboço foi escolhido e por quê? - Cores e suas funções: Registre fundo, texto e destaque. Depois, confira contraste na página funcional. - Tipografia: Família ou característica, tamanhos relativos e pesos. Priorize leitura e consistência. - Alinhamento, formas e espaçamento: Defina margem, ritmo entre elementos, formato de botões e repetição de padrões. - Imagens, ícones e outras mídias: Quais recursos serão usados, onde e para quê? Registre origem e descrição alternativa. - Comportamento e adaptação: O que acontece ao tocar cada link? Como fica no celular e computador? Inclua foco visível e navegação por teclado. --- ### Visualizar com IA Use a geração de imagens disponível no ChatGPT ou Gemini para enxergar sua ideia e explorar variações. Os esboços e os documentos orientam o resultado. ### Gere sem perder a direção - Baixe os documentos atuais no caderno. - Anexe o esboço A e use o pedido abaixo. Confira se a ferramenta está no modo de geração de imagens. - Repita com o esboço B, mantendo os mesmos documentos. - Salve as duas propostas com nomes diferentes. - Compare identificação, leitura, prioridade e organização. Registre o que ajuda e o que precisa mudar. Limites de geração variam. Duas propostas úteis bastam para este exercício. Se só houver uma geração disponível, compare-a com os dois esboços e registre a limitação. Textos em imagens podem ficar incorretos. O texto aprovado no briefing continua valendo; confira e corrija na implementação. A imagem não prova que links funcionam ou que o layout é responsivo. ### Pedido para a ferramenta O pedido inclui suas anotações atuais. Revise antes de copiar. As imagens e arquivos precisam ser anexados por você; copiar texto não os envia. Ver pedido e documentos incluídos ```text Gere uma proposta visual de página a partir do briefing.md, design.md e esboço anexado. Preserve a organização do esboço e a prioridade do conteúdo. Mostre a proposta em tela de celular. Não acrescente serviços, depoimentos, preços ou contatos. Se o texto exato não puder ser reproduzido, use blocos identificados; o texto válido continua sendo o dos documentos. Esta é uma referência visual: não afirme que os links funcionam. Vou repetir este pedido com o outro esboço para comparar as alternativas. --- briefing.md --- # Briefing do projeto Projeto: Cartão de links ## Nome e descrição Pendente de definição. ## Visitante e situação Pendente de definição. ## Objetivo e ação principal Pendente de definição. ## Links e destinos Pendente de definição. ## Textos e imagens disponíveis Pendente de definição. ## Escopo Pendente de definição. ## Fatos, hipóteses e pendências Pendente de definição. ## Critérios de conclusão Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- design.md --- # Direção visual do projeto Projeto: Cartão de links ## Intenção visual Pendente de definição. ## Organização e hierarquia Pendente de definição. ## Cores e suas funções Pendente de definição. ## Tipografia Pendente de definição. ## Alinhamento, formas e espaçamento Pendente de definição. ## Imagens, ícones e outras mídias Pendente de definição. ## Comportamento e adaptação Pendente de definição. ## Referência aprovada e revisões Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- Registros para esta revisão --- # Registros do projeto Projeto: Cartão de links ## Comparação dos esboços Pendente de definição. ## Registro de verificação Pendente de definição. ## Publicação e entrega Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. ``` #### Atividade Leia a orientação, faça a atividade e guarde os arquivos no seu projeto. - Comparação dos esboços: O que mudou entre A e B? Qual facilita a tarefa principal e por quê? - Referência aprovada e revisões: Nome da imagem escolhida, ajustes necessários e decisões finais. Marque rascunho ou consolidado. --- ### Escolher e refinar ### Compare com o pedido Qual proposta mostra melhor quem é a pessoa e qual link importa mais? Qual cabe melhor em uma tela pequena? O que ficou bonito mas atrapalha a leitura? Escreva uma decisão: “Escolhi B porque separa o portfólio dos outros destinos; vou reduzir a imagem para o primeiro link aparecer antes.” Faça um pedido de ajuste específico, em vez de pedir apenas “mais bonito”. ### Consolide o documento Atualize o design.md com estrutura escolhida, funções das cores, tipografia, espaçamento, imagens e comportamento. Identifique a imagem aprovada pelo nome do arquivo. Confira se o documento e a imagem se contradizem; registre qual decisão deve prevalecer. Se a ferramenta de imagens não gerar o documento, descreva a proposta na conversa e revise o texto com apoio da IA. Você aprova as decisões. ### Pedido para a ferramenta O pedido inclui suas anotações atuais. Revise antes de copiar. As imagens e arquivos precisam ser anexados por você; copiar texto não os envia. Ver pedido e documentos incluídos ```text Refine a imagem anexada conforme os problemas que registrei na comparação. Preserve os fatos e a ação principal. Explique as alterações propostas e devolva uma versão revisada do design.md em texto, além da proposta visual se a ferramenta permitir. Não trate detalhes inferidos da imagem como decisões aprovadas. --- briefing.md --- # Briefing do projeto Projeto: Cartão de links ## Nome e descrição Pendente de definição. ## Visitante e situação Pendente de definição. ## Objetivo e ação principal Pendente de definição. ## Links e destinos Pendente de definição. ## Textos e imagens disponíveis Pendente de definição. ## Escopo Pendente de definição. ## Fatos, hipóteses e pendências Pendente de definição. ## Critérios de conclusão Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- design.md --- # Direção visual do projeto Projeto: Cartão de links ## Intenção visual Pendente de definição. ## Organização e hierarquia Pendente de definição. ## Cores e suas funções Pendente de definição. ## Tipografia Pendente de definição. ## Alinhamento, formas e espaçamento Pendente de definição. ## Imagens, ícones e outras mídias Pendente de definição. ## Comportamento e adaptação Pendente de definição. ## Referência aprovada e revisões Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- Registros para esta revisão --- # Registros do projeto Projeto: Cartão de links ## Comparação dos esboços Pendente de definição. ## Registro de verificação Pendente de definição. ## Publicação e entrega Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. ``` #### Atividade Leia a orientação, faça a atividade e guarde os arquivos no seu projeto. - Comparação dos esboços: O que mudou entre A e B? Qual facilita a tarefa principal e por quê? - Referência aprovada e revisões: Nome da imagem escolhida, ajustes necessários e decisões finais. Marque rascunho ou consolidado. - Organização e hierarquia: Qual conteúdo vem primeiro? O que recebe maior destaque? Qual esboço foi escolhido e por quê? - Comportamento e adaptação: O que acontece ao tocar cada link? Como fica no celular e computador? Inclua foco visível e navegação por teclado. --- ### Implementar ### Prepare a pasta e os insumos - Crie uma pasta para este projeto. Guarde `briefing.md`, `design.md`, esboços, imagem aprovada e materiais autorizados. - Abra essa pasta como projeto na ferramenta de implementação, por exemplo Antigravity. Trabalhe na pasta local do seu exercício. - Anexe ou indique os documentos e a imagem. Revise o pedido abaixo e envie. - Peça a prévia da página. Abra-a e compare o resultado com os requisitos, não apenas com a imagem. - Se houver erro, descreva o que aconteceu e o comportamento esperado. Peça uma correção em linguagem natural e verifique novamente. Você especifica e avalia o resultado. Não precisa escrever, colar ou editar código. A ferramenta pode gerar código internamente para construir a página. ### Imagem e página são entregas diferentes A imagem orienta a aparência. Os documentos dizem o que cada link faz, quais textos valem e como a página se adapta. É na prévia funcional que você confere navegação, leitura e comportamento. ### Se a ferramenta ficar indisponível Guarde os documentos e as referências. Continue a revisão visual e pratique a verificação no exemplo disponibilizado pelo professor. Registre a implementação como pendente até conseguir gerar e conferir sua versão. Não marque uma imagem como página publicada. ### Pedido para a ferramenta O pedido inclui suas anotações atuais. Revise antes de copiar. As imagens e arquivos precisam ser anexados por você; copiar texto não os envia. Ver pedido e documentos incluídos ```text Implemente uma página estática responsiva com base nos documentos abaixo e na imagem aprovada anexada. Não me peça para escrever ou editar código. Preserve textos e URLs confirmados. Não invente dados nem publique pendências como fatos. Use elementos adequados para títulos e links, descrições alternativas para imagens informativas, foco visível e operação por teclado. Faça a página funcionar em tela pequena sem rolagem lateral e em computador. Sem login, pagamentos, banco de dados ou formulário simulado como envio real. Mostre como abrir a prévia e entregue uma pasta pronta para upload estático, com index.html na raiz e todos os arquivos necessários, sem dependência de um servidor de desenvolvimento. Informe onde está essa pasta. Não publique automaticamente. --- briefing.md --- # Briefing do projeto Projeto: Cartão de links ## Nome e descrição Pendente de definição. ## Visitante e situação Pendente de definição. ## Objetivo e ação principal Pendente de definição. ## Links e destinos Pendente de definição. ## Textos e imagens disponíveis Pendente de definição. ## Escopo Pendente de definição. ## Fatos, hipóteses e pendências Pendente de definição. ## Critérios de conclusão Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- design.md --- # Direção visual do projeto Projeto: Cartão de links ## Intenção visual Pendente de definição. ## Organização e hierarquia Pendente de definição. ## Cores e suas funções Pendente de definição. ## Tipografia Pendente de definição. ## Alinhamento, formas e espaçamento Pendente de definição. ## Imagens, ícones e outras mídias Pendente de definição. ## Comportamento e adaptação Pendente de definição. ## Referência aprovada e revisões Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- Registros para esta revisão --- # Registros do projeto Projeto: Cartão de links ## Comparação dos esboços Pendente de definição. ## Registro de verificação Pendente de definição. ## Publicação e entrega Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. ``` #### Atividade Leia a orientação, faça a atividade e guarde os arquivos no seu projeto. - Referência aprovada e revisões: Nome da imagem escolhida, ajustes necessários e decisões finais. Marque rascunho ou consolidado. - Links e destinos: Liste de três a cinco rótulos e URLs completas. Identifique os destinos ainda pendentes. --- ### Verificar e corrigir ### Verifique a página funcional - **Conteúdo:** confira nomes, descrições e destinos contra o briefing. Remova fatos inventados e marque exercícios fictícios como demonstração. - **Links:** abra cada destino. Confira a URL antes de publicar, inclusive após pedidos de correção. - **Tela:** abra no celular e em uma janela estreita do computador; confira também uma janela larga. Nada importante pode sumir ou exigir rolagem lateral. - **Leitura:** amplie o texto ou use zoom de 200%. Confira cortes, sobreposições e texto sobre imagens. - **Teclado:** use Tab e Shift+Tab para percorrer os links, veja onde está o foco e use Enter para ativar. Não dependa só de passar o mouse. - **Contraste:** use um verificador de contraste. Para texto comum, adote pelo menos 4,5:1; confira as regras e exceções na etapa de acessibilidade do caso maior. - **Imagens:** confira proporção, qualidade e descrições alternativas adequadas. Registre um problema concreto: “a descrição corta na tela estreita” e “deve aparecer inteira”. Depois da correção, repita essa verificação. Este exercício introdutório não certifica conformidade integral de acessibilidade. ### Uma tarefa simples Sem explicar onde está o link, peça ao professor por escrito: “Encontre o portfólio e abra o destino”. Ele pode devolver uma observação escrita. Você também fará sua própria inspeção. Registre quem verificou; autoinspeção e revisão de IA não são teste com público real. ### Pedido para a ferramenta O pedido inclui suas anotações atuais. Revise antes de copiar. As imagens e arquivos precisam ser anexados por você; copiar texto não os envia. Ver pedido e documentos incluídos ```text Corrija somente os problemas do registro de verificação abaixo. Preserve conteúdo confirmado, destinos dos links e decisões aprovadas. Não me peça para editar código. Descreva o que mudou, mostre a prévia e atualize a pasta pronta para publicação. Informe como repetir a verificação. Se algum requisito depender de informação ausente, sinalize a pendência. --- briefing.md --- # Briefing do projeto Projeto: Cartão de links ## Nome e descrição Pendente de definição. ## Visitante e situação Pendente de definição. ## Objetivo e ação principal Pendente de definição. ## Links e destinos Pendente de definição. ## Textos e imagens disponíveis Pendente de definição. ## Escopo Pendente de definição. ## Fatos, hipóteses e pendências Pendente de definição. ## Critérios de conclusão Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- design.md --- # Direção visual do projeto Projeto: Cartão de links ## Intenção visual Pendente de definição. ## Organização e hierarquia Pendente de definição. ## Cores e suas funções Pendente de definição. ## Tipografia Pendente de definição. ## Alinhamento, formas e espaçamento Pendente de definição. ## Imagens, ícones e outras mídias Pendente de definição. ## Comportamento e adaptação Pendente de definição. ## Referência aprovada e revisões Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- Registros para esta revisão --- # Registros do projeto Projeto: Cartão de links ## Comparação dos esboços Pendente de definição. ## Registro de verificação Pendente de definição. ## Publicação e entrega Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. ``` #### Atividade Leia a orientação, faça a atividade e guarde os arquivos no seu projeto. - Registro de verificação: Tarefa → resultado observado → dificuldade → mudança → nova verificação. --- ### Publicar ### Antes do upload Peça à ferramenta uma pasta final para site estático, com `index.html` na raiz e os recursos necessários. A pasta do projeto pode conter documentos e arquivos de trabalho; publique somente a pasta final indicada pela ferramenta. ### Pedido para a ferramenta O pedido inclui suas anotações atuais. Revise antes de copiar. As imagens e arquivos precisam ser anexados por você; copiar texto não os envia. Ver pedido e documentos incluídos ```text Verifique se a pasta de publicação funciona como site estático: index.html na raiz, caminhos dos recursos válidos, nenhuma dependência da prévia local ou de servidor próprio. Gere ou atualize essa pasta sem me pedir para editar código. Informe o caminho e o que devo selecionar no upload manual. Não publique automaticamente e não inclua credenciais, arquivos pessoais ou anotações privadas. --- briefing.md --- # Briefing do projeto Projeto: Cartão de links ## Nome e descrição Pendente de definição. ## Visitante e situação Pendente de definição. ## Objetivo e ação principal Pendente de definição. ## Links e destinos Pendente de definição. ## Textos e imagens disponíveis Pendente de definição. ## Escopo Pendente de definição. ## Fatos, hipóteses e pendências Pendente de definição. ## Critérios de conclusão Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- design.md --- # Direção visual do projeto Projeto: Cartão de links ## Intenção visual Pendente de definição. ## Organização e hierarquia Pendente de definição. ## Cores e suas funções Pendente de definição. ## Tipografia Pendente de definição. ## Alinhamento, formas e espaçamento Pendente de definição. ## Imagens, ícones e outras mídias Pendente de definição. ## Comportamento e adaptação Pendente de definição. ## Referência aprovada e revisões Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- Registros para esta revisão --- # Registros do projeto Projeto: Cartão de links ## Comparação dos esboços Pendente de definição. ## Registro de verificação Pendente de definição. ## Publicação e entrega Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. ``` ### Caminho principal: upload manual no Netlify - Entre na conta permitida para a atividade. No painel de projetos, procure **Add new project → Deploy manually** ou a área de upload manual. - Arraste a pasta final para a área indicada. Não envie só uma captura de tela nem uma pasta que dependa do servidor de prévia. - Aguarde o processamento e abra a URL pública fornecida. - Repita a conferência dos links, imagens e ação principal nessa URL. Teste também no celular. - Depois de corrigir na ferramenta, gere novamente a pasta final e envie uma nova versão no mesmo projeto de hospedagem. Os nomes do painel podem mudar. Consulte a [documentação de criação de projeto do Netlify](https://docs.netlify.com/manage/projects/add-new-project/). Contas, cotas e funções devem ser verificadas pelo professor antes da aula. ### Alternativa: Cloudflare Pages No painel **Workers & Pages**, crie um projeto Pages por **Direct Upload** e envie os arquivos prontos pela área de arrastar e soltar. Abra a URL `pages.dev` e repita os testes. Para atualizar, crie um novo deployment no mesmo projeto. Veja o [guia oficial de Direct Upload](https://developers.cloudflare.com/pages/get-started/direct-upload/). Um endereço gratuito da plataforma é suficiente. Domínio próprio não faz parte desta entrega. Não é necessário GitHub, terminal ou configuração de servidor. ### Uso do cartão Copie a URL pública para o campo de website ou links da rede social, quando disponível. No WhatsApp, use um campo que aceite e exiba links na versão da sua conta; confirme abrindo pelo perfil. Não é obrigatório usar contas pessoais nem divulgar o exercício publicamente. Registre URL, data e eventuais pendências. Um upload concluído só conta como publicação verificada depois de você abrir a página pública. #### Atividade Leia a orientação, faça a atividade e guarde os arquivos no seu projeto. - Publicação e entrega: URL pública, data, arquivos entregues e pendências. Não coloque senhas ou credenciais. --- ### Meus documentos Os registros deste projeto ficam separados dos registros do outro. Os campos das atividades alimentam os documentos abaixo. Baixe `briefing.md` e `design.md` para a pasta do projeto. Guarde também os registros de comparação, testes e publicação. O backup JSON contém os dois projetos e permite continuar em outro navegador; os arquivos Markdown são os documentos para as ferramentas. Os dados ficam neste navegador. Não são enviados ao professor ou à IA automaticamente. Em computador compartilhado, baixe seu backup e apague os registros ao terminar. #### Atividade Leia a orientação, faça a atividade e guarde os arquivos no seu projeto. --- ### Entregar e continuar ### Entrega individual - `briefing.md` revisado e `design.md` consolidado. - Dois esboços e comparação curta. - Imagem escolhida e captura da página implementada. - Registro de verificações, correções e nova verificação. - Pasta final do site e URL pública conferida, ou pendência explicitamente registrada se a publicação não foi possível. Encaminhe os arquivos e a URL ao professor pelo canal indicado. Não há apresentação oral, trabalho em dupla ou obrigação de mostrar a página à turma. ### Guardar ou apagar Baixe o backup antes de sair de um computador compartilhado. O botão abaixo apaga os registros dos dois projetos deste navegador; os arquivos baixados permanecem. ### O próximo projeto Selecione **Página de negócio** para aprofundar público, conteúdo, recursos visuais, responsividade e usabilidade. Seus registros do cartão permanecem disponíveis. #### Atividade Leia a orientação, faça a atividade e guarde os arquivos no seu projeto. ### Modelos de documentos ```markdown # Briefing do projeto Projeto: Cartão de links ## Nome e descrição Pendente de definição. ## Visitante e situação Pendente de definição. ## Objetivo e ação principal Pendente de definição. ## Links e destinos Pendente de definição. ## Textos e imagens disponíveis Pendente de definição. ## Escopo Pendente de definição. ## Fatos, hipóteses e pendências Pendente de definição. ## Critérios de conclusão Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. ``` ```markdown # Direção visual do projeto Projeto: Cartão de links ## Intenção visual Pendente de definição. ## Organização e hierarquia Pendente de definição. ## Cores e suas funções Pendente de definição. ## Tipografia Pendente de definição. ## Alinhamento, formas e espaçamento Pendente de definição. ## Imagens, ícones e outras mídias Pendente de definição. ## Comportamento e adaptação Pendente de definição. ## Referência aprovada e revisões Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. ``` ```markdown # Registros do projeto Projeto: Cartão de links ## Comparação dos esboços Pendente de definição. ## Registro de verificação Pendente de definição. ## Publicação e entrega Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. ``` --- ## 2 · Página de negócio Aulas 5 a 20 · 48 horas ### Começar por aqui O segundo projeto amplia o que você já fez no cartão: uma página para um negócio, serviço ou iniciativa, com conteúdo organizado e uma ação principal clara. **O percurso nos dois projetos:** briefing → dois esboços → direção visual → visualização e escolha → implementação → verificação → publicação. O `briefing.md` acompanha todos os pedidos. O `design.md` começa como um rascunho curto e é consolidado após a escolha visual. Na primeira entrevista, ele pode conter apenas intenções e pendências. Anexe também os esboços ou a referência escolhida quando o pedido precisar deles. ### Escolha do caso Use um caso autorizado ou a Padaria Pão da Vila, fictícia, apresentada na etapa “Entender a solicitação”. O resultado será uma página responsiva com as seções necessárias ao pedido, sem pagamento, cadastro ou banco de dados. Cinco a sete seções podem ser um ponto de partida; não acrescente seções sem finalidade. ### Aulas 5 a 20 Briefing e conteúdo → esboços → fundamentos e mídias → direção e propostas visuais → implementação → teste e correções → publicação e entrega. As atividades continuam individuais e as escolhas podem ser explicadas por escrito. ### Prática e evidência Hipóteses de público ajudam a planejar, mas não equivalem a pesquisa com pessoas. Uma imagem ajuda a avaliar aparência, mas não prova funcionamento. Registre o que foi observado, quem verificou e o que continua pendente. A elaboração deste caso foi informada por fontes primárias de design, acessibilidade e usabilidade. Consulte a etapa de fontes para distinguir padrões, recomendações e adaptações feitas para o curso. #### Atividade Leia a orientação, faça a atividade e guarde os arquivos no seu projeto. - Nome do projeto: Um nome para identificar sua página e os arquivos. - O que o negócio ou iniciativa oferece?: Descreva o serviço, produto ou proposta sem inventar detalhes. --- ### Entender a solicitação “Quero uma página bonita” diz algo sobre uma expectativa, mas pouco sobre o problema. Nosso primeiro trabalho é entender o que está por trás desse pedido. #### Nosso caso de estudo · fictício “Tenho uma padaria de bairro. As pessoas perguntam pelo celular o horário, onde ficamos e como encomendar um bolo de aniversário. Quero uma página para mostrar o que fazemos e facilitar o contato.” Essa solicitação confirma o tipo de negócio, algumas dúvidas frequentes e o desejo de facilitar o contato. Ela não informa o endereço, o horário, os preços nem o prazo de encomenda. ### Pedido, interpretação e pergunta | Parte | Exemplo | | --- | --- | | Pedido recebido | “Facilitar o contato.” | | Interpretação inicial | Uma ação de contato visível pode ajudar. | | Pergunta necessária | Qual canal recebe os pedidos e quais dados o cliente deve enviar? | Uma interpretação é útil, mas precisa ser conferida. Não transforme “facilitar contato” automaticamente em “vender e cobrar pelo site”. ### Se você usar o caso fictício Abrir a ficha do cliente **Nome:** Padaria Pão da Vila. Negócio e informações criados para o exercício. - Oferece pães e bolos por encomenda. - Quer facilitar pedidos de orçamento de bolos de aniversário. - O público principal é formado por pessoas da região que pesquisam opções pelo celular. - Pedidos são tratados pelo contato comercial. O endereço ou número exato ainda não foi fornecido. - A retirada é na loja. Não há confirmação de entrega em domicílio. - O cliente possui logotipo; ainda vai fornecer fotos próprias. - Endereço, horários, prazo mínimo, opções e valores precisam ser confirmados. - A entrega do projeto é uma página para celular e computador, sem pagamento online. Os dados desta ficha são confirmados *dentro da simulação*. Não correspondem a um estabelecimento real. ### Faça agora Registre o pedido original e escreva três perguntas que mudariam suas decisões. Por exemplo: “Qual pedido você quer facilitar primeiro?”, “O que a pessoa precisa saber antes de entrar em contato?” e “Como esse contato acontece?”. #### Confira seu entendimento O cliente pediu uma página para facilitar o contato. Qual conclusão está sustentada pelo pedido? - A página deve aceitar pagamentos online. - Precisamos esclarecer qual canal de contato será usado. - A padaria entrega em toda a cidade. Conferência: Isso mesmo. Precisamos esclarecer o canal e os dados necessários para o contato. Pagamento e entrega não foram informados. #### Atividade Anote a solicitação inicial. Evite completar lacunas com suposições. - Solicitação inicial: Guarde o pedido original. Ele ajuda a perceber o que mudou na conversa. - Perguntas e informações pendentes: O que falta saber e quem pode confirmar? --- ### Quem vai usar? A página pertence ao cliente, mas precisa ser compreendida por quem a visita. Entender essa pessoa ajuda a escolher conteúdo e prioridades. ### Três perguntas suficientes para começar - **Quem?** Quem procura o serviço ou a informação? - **Para quê?** O que essa pessoa quer descobrir ou fazer? - **Em qual situação?** Ela está no celular, comparando opções, com pressa ou conhecendo o negócio pela primeira vez? #### De uma descrição vaga para uma útil **Vaga:** “Todo mundo que gosta de bolo.” **Útil:** “Pessoas da região que precisam encomendar um bolo de aniversário e querem saber prazo, opções e como pedir orçamento pelo celular.” A segunda descrição sugere informações concretas para a página. Não precisamos inventar idade, profissão ou renda quando esses detalhes não ajudam a decidir. ### Um negócio, duas situações | Visitante | Precisa encontrar | | --- | --- | | Está perto e quer comprar pão agora | Horário, endereço e como chegar. | | Está organizando um aniversário | Opções de bolo, prazo e como solicitar orçamento. | As duas situações podem existir. O briefing deve indicar qual é prioritária e quais necessidades secundárias também serão atendidas. ### Faça agora Complete: “Esta página é para ______, que precisa ______, enquanto ______.” Depois liste três dúvidas que essa pessoa terá antes de agir. E se eu ainda não conhecer o público? Registre uma hipótese e uma pergunta de confirmação. Exemplo: “Hipótese: a maioria pesquisa pelo celular. Confirmar com o cliente como os pedidos chegam hoje.” Uma hipótese ajuda a começar, desde que não seja apresentada como pesquisa realizada. #### Atividade Escreva quem chega à página, em qual situação e quais dúvidas precisa resolver. - Quem vai usar a página?: Descreva a pessoa pela necessidade e situação de uso, sem estereótipos. - Dúvidas e necessidades do visitante: O que a pessoa precisa descobrir para seguir adiante? --- ### Objetivo e ação principal O objetivo explica por que a página existe. A ação principal explica o que o visitante fará nela. | Decisão | Exemplo da padaria | | --- | --- | | Objetivo | Facilitar pedidos de orçamento para bolos de aniversário. | | Ação principal | Abrir o contato comercial para solicitar orçamento. | | Informações de apoio | Opções, prazo, retirada e dados necessários para o pedido. | | Verificação | Uma pessoa consegue descobrir como encomendar e abrir o contato pelo celular. | ### Evite objetivos que não ajudam a decidir “Ter um site moderno” descreve uma preferência. “Aumentar as vendas” é amplo e depende de fatores além da interface. Para este projeto, traduza essas intenções em algo que a página pode facilitar e que você consegue verificar. Por exemplo: “Apresentar o serviço e facilitar pedidos de orçamento” permite discutir conteúdo, localização da ação e dúvidas que precisam ser respondidas. ### Especifique o destino “Entrar em contato” precisa levar a algum lugar: canal comercial, endereço de e-mail ou outra forma confirmada. Se o destino não foi informado, registre a pendência. Não invente número de telefone nem use um contato de outra pessoa. ### Faça agora - Escreva um objetivo principal. - Defina uma ação prioritária e o resultado esperado ao acioná-la. - Escreva duas tarefas de verificação: “Encontrar…” ou “Conseguir…”. #### Qual tarefa é verificável? - Gostar da beleza da página. - Encontrar como pedir orçamento e acessar o canal de contato. - Garantir que as vendas aumentem. Conferência: Isso mesmo. Podemos observar se alguém encontra a orientação e acessa o contato. Gostar da aparência é subjetivo; aumento de vendas depende de outros fatores. #### Atividade Separe o objetivo do cliente da ação que o visitante poderá realizar. - Objetivo da página: Qual resultado ela deve ajudar a alcançar? - Ação principal: Escolha uma ação observável e indique seu destino. - Como vamos verificar o resultado?: Escreva duas ou três tarefas que alguém deverá conseguir realizar. --- ### Perguntar com apoio de IA A IA pode ajudar a formular perguntas e organizar respostas. Você continua responsável por conferir se o texto representa o pedido. ### Escolha um caminho **Com IA:** use uma ferramenta de conversa disponível, como ChatGPT, Gemini ou Claude. Não é necessário usar as três. **Sem IA:** escreva suas perguntas, consulte a ficha do cliente e organize as respostas com o mesmo modelo. ### Entrevista para seu projeto Se você tem uma ideia própria, use a IA como entrevistadora. Responda com o que sabe; quando não souber, diga que a informação está pendente. ```text Ajude-me a esclarecer um projeto de página de internet. Faça uma pergunta por vez, em linguagem simples, e aguarde minha resposta. Pergunte sobre o que ofereço, quem usará a página, objetivo, ação principal, conteúdo, materiais, restrições e informações pendentes. Não invente fatos. Ao terminar, separe informações confirmadas por mim, sugestões e pendências. Ainda não gere layout nem página. Minha ideia ou solicitação inicial: [cole aqui o pedido]. ``` ### Cliente fictício para praticar perguntas Se preferir o caso da padaria, forneça a ficha à IA e peça que simule o cliente. A ficha é a fonte; qualquer detalhe criado fora dela deve ser descartado ou marcado como sugestão. ```text Vou praticar a interpretação de um briefing. Simule o cliente usando somente a ficha abaixo. Responderei fazendo perguntas. Não acrescente fatos à ficha. Se eu perguntar algo não informado, diga que está pendente de confirmação. Não crie a interface nem escreva o briefing por mim antes que eu peça. Ficha do cliente: [cole a ficha da etapa Entender a solicitação]. ``` ### Três categorias que evitam confusão - **Confirmado:** o cliente informou ou a ficha contém. - **Hipótese ou sugestão:** uma possibilidade ainda não aprovada. - **Pendente:** falta uma resposta para decidir ou publicar corretamente. #### Exemplo de conferência A IA escreveu: “A padaria entrega bolos em toda a cidade em até 24 horas.” A ficha não informa isso. Remova a promessa e registre duas perguntas: existe entrega? Qual é o prazo mínimo? ### Faça agora Conduza a entrevista ou consulte a ficha. Registre pelo menos três fatos confirmados, uma sugestão e duas pendências. Revise a resposta antes de copiá-la para o briefing. Copiar um pedido aqui não inicia uma conversa com IA. Você escolhe a ferramenta e cola o texto nela. Compartilhe somente informações que pode usar no exercício. #### Atividade Registre os fatos, as sugestões e as perguntas que continuam abertas. - Informações confirmadas: Registre o que foi informado e sua fonte. No caso fictício, cite a ficha. - Sugestões e hipóteses: Ideias ainda não aprovadas devem ficar separadas dos fatos. - Perguntas e informações pendentes: O que falta saber e quem pode confirmar? --- ### Informações e materiais Uma página pode parecer pronta e ainda deixar perguntas importantes sem resposta. Antes de desenhá-la, liste o que o visitante precisa encontrar. ### Comece pelas dúvidas Para cada dúvida do público, pense em uma informação que ajuda a resolvê-la. “Posso encomendar para sábado?” exige um prazo confirmado. “Como retiro?” exige instruções sobre retirada. | Dúvida | Conteúdo necessário | Situação no caso fictício | | --- | --- | --- | | Como encomendar? | Canal e orientações de contato. | Canal comercial confirmado; destino exato pendente. | | Com quanto tempo de antecedência? | Prazo mínimo. | Pendente. | | Quais opções existem? | Produtos, imagens e descrições. | Bolos confirmados; opções e fotos pendentes. | ### Prioridade antes de seção Primeiro identifique as informações essenciais. A forma como serão distribuídas em seções será trabalhada na fase de wireframes. Aqui, evite decidir que todo site precisa ter a mesma lista de seções. ### Materiais não são apenas imagens - Nome e apresentação do negócio. - Logotipo e orientações de uso, se existirem. - Textos, fotos e informações sobre os serviços. - Endereço, horários e canais de contato. - Áudio ou vídeo, quando houver uma função clara. Registre o que foi fornecido e o que precisa ser obtido. Materiais gerados para estudo não devem sugerir que mostram produtos reais quando isso não é verdade. ### Referências com uma razão Você pode registrar uma referência visual nesta fase. Explique o que deseja aproveitar: legibilidade, organização, fotografia ou forma de apresentar uma informação. “Gosto desta página porque encontro o serviço rapidamente” ajuda mais que “quero igual”. ### Faça agora Liste cinco informações do seu projeto em ordem de prioridade. Ao lado de cada uma, indique: disponível, precisa de revisão ou pendente. Depois registre os materiais existentes e uma preferência visual fundamentada. #### Atividade Organize as informações pela necessidade do visitante e indique quais materiais existem. - Informações que precisam aparecer: Liste o conteúdo e sua prioridade. Marque o que ainda falta. - Materiais disponíveis: Fotos, textos, marca e dados já fornecidos. Registre também o que falta. - Referências e direção desejada: Explique o que agrada em uma referência e por quê. A aparência será aprofundada depois. --- ### Limites e pendências O briefing precisa deixar claro o que será feito. Isso ajuda a manter o projeto viável e evita promessas que ninguém combinou. ### O escopo deste curso Vamos criar uma página para celular e computador, com conteúdo organizado e uma ação principal funcional. A implementação será orientada por linguagem natural. Nesta fase, não é necessário escolher tecnologia nem gerar código. #### Um combinado concreto “Uma página para apresentar a padaria, esclarecer como encomendar e abrir o canal comercial de contato. Sem pagamento online, cadastro ou acompanhamento de pedidos.” ### Restrições que mudam decisões Um cliente pode pedir que sejam usadas apenas fotos próprias, que um texto seja mantido ou que uma informação não seja divulgada. Registre a restrição e sua origem. Também existem limites de tempo, material e ferramentas. Se algo depende de acesso que você ainda não tem, anote a dependência e combine uma alternativa com o professor. ### Uma pendência deve apontar o próximo passo Compare “falta coisa” com “falta confirmar o prazo mínimo de encomenda; o cliente precisa informar antes da publicação”. A segunda frase permite agir. #### Classifique esta informação A IA sugeriu mostrar opções de recheio. O cliente ainda não aprovou a ideia nem forneceu a lista. - Informação confirmada para publicação. - Sugestão a confirmar com o cliente. - Um tema que nunca pode aparecer na página. Conferência: Isso mesmo. A ideia pode ser útil, mas ainda é uma sugestão. Confirmar a lista e a aprovação evita publicar informações inventadas. ### Faça agora Escreva uma frase sobre a entrega e outra sobre o que ficará fora. Revise suas pendências para que cada uma tenha uma pergunta clara e uma fonte de confirmação. #### Atividade Registre a entrega, os limites e as decisões ainda abertas. - Escopo e restrições: O que será entregue? O que fica fora? Há alguma condição a respeitar? - Perguntas e informações pendentes: O que falta saber e quem pode confirmar? - Como vamos verificar o resultado?: Escreva duas ou três tarefas que alguém deverá conseguir realizar. --- ### Conteúdo e seções O visitante precisa entender a oferta, encontrar informações e saber como agir. Organize as seções pelo que ele precisa descobrir. ### Da dúvida à seção | Dúvida | Conteúdo possível | | --- | --- | | Vocês fazem o que procuro? | Oferta e exemplos confirmados. | | Como encomendar? | Passos, prazo confirmado e canal. | | Onde retiro? | Local e horário confirmados. | | Como pedir orçamento? | Ação com destino válido. | Um título como “Como encomendar” ajuda mais a localizar uma resposta que “Nossa essência”. Rótulos como “Ver opções de bolos” dizem mais que “Clique aqui”. Priorize a informação importante e use palavras familiares. ### Faça agora Liste as seções, escreva uma finalidade para cada uma e um primeiro texto curto. Corte repetições. Não crie depoimentos, preços ou prazos para completar um layout. No caso fictício, identifique explicitamente qualquer dado adicional criado para a simulação; ele não confirma dados de um negócio real. ### Pedido para a ferramenta O pedido inclui suas anotações atuais. Revise antes de copiar. As imagens e arquivos precisam ser anexados por você; copiar texto não os envia. Ver pedido e documentos incluídos ```text Organize o conteúdo confirmado do briefing em seções de uma página. Dê a cada seção um título claro e uma finalidade para o visitante. Priorize a ação principal e use textos de links que expliquem o destino. Preserve as pendências; não crie depoimentos, promessas, preços ou dados. Devolva a proposta de conteúdo para minha aprovação e indique mudanças sugeridas no briefing.md. --- briefing.md --- # Briefing do projeto Projeto: Página de negócio ## Nome do projeto Pendente de definição. ## O que o negócio ou iniciativa oferece? Pendente de definição. ## Solicitação inicial Pendente de definição. ## Objetivo da página Pendente de definição. ## Quem vai usar a página? Pendente de definição. ## Dúvidas e necessidades do visitante Pendente de definição. ## Ação principal Pendente de definição. ## Informações que precisam aparecer Pendente de definição. ## Materiais disponíveis Pendente de definição. ## Referências e direção desejada Pendente de definição. ## Escopo e restrições Pendente de definição. ## Informações confirmadas Pendente de definição. ## Sugestões e hipóteses Pendente de definição. ## Perguntas e informações pendentes Pendente de definição. ## Como vamos verificar o resultado? Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- design.md --- # Direção visual do projeto Projeto: Página de negócio ## Intenção visual Pendente de definição. ## Organização e hierarquia Pendente de definição. ## Cores e suas funções Pendente de definição. ## Tipografia Pendente de definição. ## Alinhamento, formas e espaçamento Pendente de definição. ## Imagens, ícones e outras mídias Pendente de definição. ## Comportamento e adaptação Pendente de definição. ## Referência aprovada e revisões Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- Registros para esta revisão --- # Registros do projeto Projeto: Página de negócio ## Comparação dos esboços Pendente de definição. ## Registro de verificação Pendente de definição. ## Publicação e entrega Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. ``` Referência: [GOV.UK — estrutura clara](https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/writing-guidelines/clear-structure/). Aplicamos o princípio de clareza; não copiamos a identidade visual do serviço. #### Atividade Leia a orientação, faça a atividade e guarde os arquivos no seu projeto. - Informações que precisam aparecer: Liste o conteúdo e sua prioridade. Marque o que ainda falta. - Ação principal: Escolha uma ação observável e indique seu destino. - Perguntas e informações pendentes: O que falta saber e quem pode confirmar? --- ### Dois wireframes Wireframe é um esboço de estrutura: indica seções, conteúdo, prioridades e navegação. Não precisa ter cores finais ou detalhes de fotografia. ### Desenhe duas organizações Use papel e caneta ou um aplicativo com retângulos, círculos e texto. Não precisa desenhar bem. Represente imagem, nome, descrição e links; escreva os rótulos reais quando possível. | Alternativa A | Alternativa B | | --- | --- | | Identificação no topo, descrição e lista de links com destaque no primeiro. | Identificação compacta, ação principal em um bloco separado e os demais links abaixo. | Os exemplos são pontos de partida. Mantenha o mesmo conteúdo nas duas opções e altere uma decisão de organização. Trocar só a cor não cria uma segunda estrutura. ### Como comparar - Consigo entender de quem é a página? - Consigo identificar a ação principal? - A ordem ajuda quem chega pelo celular? - Algum elemento disputa atenção sem necessidade? Fotografe os desenhos de frente, com boa luz, ou exporte as telas. Salve como `esboco-a` e `esboco-b`. Uma justificativa de duas frases é suficiente. ### No caso de negócio Adapte o exercício: A pode apresentar oferta → exemplos → como encomendar → contato. B pode apresentar necessidade → processo de encomenda → exemplos → contato. Mantenha os mesmos fatos e avalie qual responde melhor às dúvidas do briefing. Marque títulos, imagens, texto, links e destino da navegação. Faça ao menos um esboço de tela pequena e indique como a estrutura poderia mudar em tela larga. #### Atividade Leia a orientação, faça a atividade e guarde os arquivos no seu projeto. - Comparação dos esboços: O que mudou entre A e B? Qual facilita a tarefa principal e por quê? --- ### Fundamentos de design ### Design é organizar a atenção e facilitar o uso - **Hierarquia:** tamanho, peso, posição e espaço indicam o que ler primeiro. Dê destaque à ação principal e reduza a competição. - **Tipografia:** comece com uma família legível e poucos pesos. Compare título, texto e rótulos no tamanho real da tela; texto sobre foto exige atenção ao fundo. - **Cor:** atribua funções: fundo, texto e destaque. A cor não deve ser a única pista de um estado ou ação. Confira contraste com uma ferramenta, além de olhar. - **Alinhamento:** escolha um eixo e repita-o. Elementos que parecem próximos devem estar relacionados. - **Espaçamento:** use intervalos consistentes; aumente a separação entre grupos e mantenha próximos os elementos do mesmo grupo. - **Formas e ícones:** use padrões reconhecíveis e rótulos claros. Um ícone decorativo não substitui o nome de um destino. ### Uma direção inicial possível “Leitura tranquila; fundo claro; texto escuro; destaque só na ação principal; nome maior que a descrição; margens constantes; links com largura confortável e espaço entre eles.” Isso orienta uma geração melhor que “faça algo moderno”. Não é uma receita obrigatória. Registre a direção no caderno. Depois da imagem escolhida, acrescente as decisões concretas e o nome da referência. Se a ferramenta de imagens não devolver texto, use a conversa para revisar o documento. ### Exercício de revisão Escolha uma seção do seu esboço e faça duas versões: uma com prioridades pouco claras e outra com contraste de tamanho, alinhamento e agrupamento. Descreva o que ficou mais fácil encontrar. Use formas e texto, sem necessidade de código. Escalas de texto e espaço são exemplos de consistência, não números universais. Veja [tipografia](https://design-system.service.gov.uk/styles/type-scale/) e [espaçamento no GOV.UK Design System](https://design-system.service.gov.uk/styles/spacing/). #### Atividade Leia a orientação, faça a atividade e guarde os arquivos no seu projeto. - Organização e hierarquia: Qual conteúdo vem primeiro? O que recebe maior destaque? Qual esboço foi escolhido e por quê? - Cores e suas funções: Registre fundo, texto e destaque. Depois, confira contraste na página funcional. - Tipografia: Família ou característica, tamanhos relativos e pesos. Priorize leitura e consistência. - Alinhamento, formas e espaçamento: Defina margem, ritmo entre elementos, formato de botões e repetição de padrões. --- ### Imagens, ícones e mídias ### Imagem, gráfico e ícone Use fotos para mostrar algo relevante e verdadeiro sobre a oferta. Escolha enquadramento, recorte e tamanho sem distorcer. Registre origem e autorização. Uma imagem gerada não deve ser apresentada como foto de instalações, equipe ou produto real se não for. Ícones podem apoiar um rótulo; gráficos precisam representar dados com fonte e unidades. Não use um gráfico inventado como prova de resultado comercial. Formas podem separar grupos e dar destaque sem competir com a informação. ### Texto alternativo Imagem informativa: descreva o significado importante. Imagem funcional: descreva ação ou destino. Imagem puramente decorativa: peça alternativa vazia. Consulte a [árvore de decisão da WAI](https://www.w3.org/WAI/tutorials/images/decision-tree/). ### Áudio, vídeo e animação: exercício complementar - Escolha um trecho curto de vídeo ou áudio próprio/autorizado que explique uma tarefa, ou use o material fornecido pelo professor. - Planeje título, controles e alternativa textual. Vídeo com fala exige considerar legendas; conteúdo sonoro relevante precisa de uma alternativa acessível conforme o tipo de mídia. - Peça à ferramenta uma demonstração separada com reprodução controlada pelo visitante. Confira início, pausa, leitura da legenda/transcrição e uso por teclado. - Compare uma pequena animação de feedback com uma versão sem movimento; peça respeito à preferência de movimento reduzido e verifique se a informação permanece compreensível. - Registre se cada recurso ajuda o objetivo. Não é necessário inserir todas as mídias na página final. O exercício cobre seleção e avaliação dos recursos. As mídias não entram automaticamente no escopo do site. Orientação: [WAI — áudio e vídeo acessíveis](https://www.w3.org/WAI/media/av/). #### Atividade Liste recurso, função, origem, autorização, alternativa e decisão de uso. - Imagens, ícones e outras mídias: Quais recursos serão usados, onde e para quê? Registre origem e descrição alternativa. --- ### Design.md ### Design é organizar a atenção e facilitar o uso - **Hierarquia:** tamanho, peso, posição e espaço indicam o que ler primeiro. Dê destaque à ação principal e reduza a competição. - **Tipografia:** comece com uma família legível e poucos pesos. Compare título, texto e rótulos no tamanho real da tela; texto sobre foto exige atenção ao fundo. - **Cor:** atribua funções: fundo, texto e destaque. A cor não deve ser a única pista de um estado ou ação. Confira contraste com uma ferramenta, além de olhar. - **Alinhamento:** escolha um eixo e repita-o. Elementos que parecem próximos devem estar relacionados. - **Espaçamento:** use intervalos consistentes; aumente a separação entre grupos e mantenha próximos os elementos do mesmo grupo. - **Formas e ícones:** use padrões reconhecíveis e rótulos claros. Um ícone decorativo não substitui o nome de um destino. ### Uma direção inicial possível “Leitura tranquila; fundo claro; texto escuro; destaque só na ação principal; nome maior que a descrição; margens constantes; links com largura confortável e espaço entre eles.” Isso orienta uma geração melhor que “faça algo moderno”. Não é uma receita obrigatória. Registre a direção no caderno. Depois da imagem escolhida, acrescente as decisões concretas e o nome da referência. Se a ferramenta de imagens não devolver texto, use a conversa para revisar o documento. ### Pedido para a ferramenta O pedido inclui suas anotações atuais. Revise antes de copiar. As imagens e arquivos precisam ser anexados por você; copiar texto não os envia. Ver pedido e documentos incluídos ```text Com o briefing e meus dois esboços anexados, ajude a refinar o design.md inicial. Explique como hierarquia, cor, tipografia, alinhamento e espaçamento ajudam a tarefa principal. Proponha escolhas simples e marque sugestões como sugestões. Não altere fatos do briefing. Devolva design.md para eu revisar. --- briefing.md --- # Briefing do projeto Projeto: Página de negócio ## Nome do projeto Pendente de definição. ## O que o negócio ou iniciativa oferece? Pendente de definição. ## Solicitação inicial Pendente de definição. ## Objetivo da página Pendente de definição. ## Quem vai usar a página? Pendente de definição. ## Dúvidas e necessidades do visitante Pendente de definição. ## Ação principal Pendente de definição. ## Informações que precisam aparecer Pendente de definição. ## Materiais disponíveis Pendente de definição. ## Referências e direção desejada Pendente de definição. ## Escopo e restrições Pendente de definição. ## Informações confirmadas Pendente de definição. ## Sugestões e hipóteses Pendente de definição. ## Perguntas e informações pendentes Pendente de definição. ## Como vamos verificar o resultado? Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- design.md --- # Direção visual do projeto Projeto: Página de negócio ## Intenção visual Pendente de definição. ## Organização e hierarquia Pendente de definição. ## Cores e suas funções Pendente de definição. ## Tipografia Pendente de definição. ## Alinhamento, formas e espaçamento Pendente de definição. ## Imagens, ícones e outras mídias Pendente de definição. ## Comportamento e adaptação Pendente de definição. ## Referência aprovada e revisões Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- Registros para esta revisão --- # Registros do projeto Projeto: Página de negócio ## Comparação dos esboços Pendente de definição. ## Registro de verificação Pendente de definição. ## Publicação e entrega Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. ``` #### Atividade Leia a orientação, faça a atividade e guarde os arquivos no seu projeto. - Intenção visual: Escreva duas ou três palavras e explique: acolhedor significa fotos naturais e linguagem próxima, por exemplo. - Organização e hierarquia: Qual conteúdo vem primeiro? O que recebe maior destaque? Qual esboço foi escolhido e por quê? - Cores e suas funções: Registre fundo, texto e destaque. Depois, confira contraste na página funcional. - Tipografia: Família ou característica, tamanhos relativos e pesos. Priorize leitura e consistência. - Alinhamento, formas e espaçamento: Defina margem, ritmo entre elementos, formato de botões e repetição de padrões. - Imagens, ícones e outras mídias: Quais recursos serão usados, onde e para quê? Registre origem e descrição alternativa. - Comportamento e adaptação: O que acontece ao tocar cada link? Como fica no celular e computador? Inclua foco visível e navegação por teclado. - Referência aprovada e revisões: Nome da imagem escolhida, ajustes necessários e decisões finais. Marque rascunho ou consolidado. --- ### Gerar, comparar e refinar ### Procedimento - Anexe briefing.md, design.md inicial e esboço A. Gere uma referência visual. - Repita com B; mantenha objetivo, textos e materiais. - Compare pela tarefa principal, leitura, organização e adequação ao contexto. - Solicite ajustes concretos, conferindo se nada foi inventado. - Escolha a referência e consolide design.md antes da implementação. Você pode usar geração de imagens ou uma ferramenta de propostas de interface disponível. Se ela produzir algo interativo, teste essa versão também; uma captura continua sendo apenas evidência visual. ### Pedido para a ferramenta O pedido inclui suas anotações atuais. Revise antes de copiar. As imagens e arquivos precisam ser anexados por você; copiar texto não os envia. Ver pedido e documentos incluídos ```text Gere uma proposta visual de página a partir do briefing.md, design.md e esboço anexado. Preserve a organização do esboço e a prioridade do conteúdo. Mostre a proposta em tela de celular. Não acrescente serviços, depoimentos, preços ou contatos. Se o texto exato não puder ser reproduzido, use blocos identificados; o texto válido continua sendo o dos documentos. Esta é uma referência visual: não afirme que os links funcionam. Vou repetir este pedido com o outro esboço para comparar as alternativas. --- briefing.md --- # Briefing do projeto Projeto: Página de negócio ## Nome do projeto Pendente de definição. ## O que o negócio ou iniciativa oferece? Pendente de definição. ## Solicitação inicial Pendente de definição. ## Objetivo da página Pendente de definição. ## Quem vai usar a página? Pendente de definição. ## Dúvidas e necessidades do visitante Pendente de definição. ## Ação principal Pendente de definição. ## Informações que precisam aparecer Pendente de definição. ## Materiais disponíveis Pendente de definição. ## Referências e direção desejada Pendente de definição. ## Escopo e restrições Pendente de definição. ## Informações confirmadas Pendente de definição. ## Sugestões e hipóteses Pendente de definição. ## Perguntas e informações pendentes Pendente de definição. ## Como vamos verificar o resultado? Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- design.md --- # Direção visual do projeto Projeto: Página de negócio ## Intenção visual Pendente de definição. ## Organização e hierarquia Pendente de definição. ## Cores e suas funções Pendente de definição. ## Tipografia Pendente de definição. ## Alinhamento, formas e espaçamento Pendente de definição. ## Imagens, ícones e outras mídias Pendente de definição. ## Comportamento e adaptação Pendente de definição. ## Referência aprovada e revisões Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- Registros para esta revisão --- # Registros do projeto Projeto: Página de negócio ## Comparação dos esboços Pendente de definição. ## Registro de verificação Pendente de definição. ## Publicação e entrega Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. ``` ### Pedido para a ferramenta O pedido inclui suas anotações atuais. Revise antes de copiar. As imagens e arquivos precisam ser anexados por você; copiar texto não os envia. Ver pedido e documentos incluídos ```text Refine a imagem anexada conforme os problemas que registrei na comparação. Preserve os fatos e a ação principal. Explique as alterações propostas e devolva uma versão revisada do design.md em texto, além da proposta visual se a ferramenta permitir. Não trate detalhes inferidos da imagem como decisões aprovadas. --- briefing.md --- # Briefing do projeto Projeto: Página de negócio ## Nome do projeto Pendente de definição. ## O que o negócio ou iniciativa oferece? Pendente de definição. ## Solicitação inicial Pendente de definição. ## Objetivo da página Pendente de definição. ## Quem vai usar a página? Pendente de definição. ## Dúvidas e necessidades do visitante Pendente de definição. ## Ação principal Pendente de definição. ## Informações que precisam aparecer Pendente de definição. ## Materiais disponíveis Pendente de definição. ## Referências e direção desejada Pendente de definição. ## Escopo e restrições Pendente de definição. ## Informações confirmadas Pendente de definição. ## Sugestões e hipóteses Pendente de definição. ## Perguntas e informações pendentes Pendente de definição. ## Como vamos verificar o resultado? Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- design.md --- # Direção visual do projeto Projeto: Página de negócio ## Intenção visual Pendente de definição. ## Organização e hierarquia Pendente de definição. ## Cores e suas funções Pendente de definição. ## Tipografia Pendente de definição. ## Alinhamento, formas e espaçamento Pendente de definição. ## Imagens, ícones e outras mídias Pendente de definição. ## Comportamento e adaptação Pendente de definição. ## Referência aprovada e revisões Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- Registros para esta revisão --- # Registros do projeto Projeto: Página de negócio ## Comparação dos esboços Pendente de definição. ## Registro de verificação Pendente de definição. ## Publicação e entrega Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. ``` ### Conferência de fatos IA pode produzir informações falsas plausíveis. Compare oferta, endereço, horário, preços e contatos com suas fontes. Não aceite depoimentos ou certificações gerados como fatos. Veja o [AI Playbook do GOV.UK](https://www.gov.uk/government/publications/ai-playbook-for-the-uk-government/artificial-intelligence-playbook-for-the-uk-government-html#hallucinations). #### Atividade Leia a orientação, faça a atividade e guarde os arquivos no seu projeto. - Comparação dos esboços: O que mudou entre A e B? Qual facilita a tarefa principal e por quê? - Referência aprovada e revisões: Nome da imagem escolhida, ajustes necessários e decisões finais. Marque rascunho ou consolidado. --- ### Implementar e adaptar ### Prepare a pasta e os insumos - Crie uma pasta para este projeto. Guarde `briefing.md`, `design.md`, esboços, imagem aprovada e materiais autorizados. - Abra essa pasta como projeto na ferramenta de implementação, por exemplo Antigravity. Trabalhe na pasta local do seu exercício. - Anexe ou indique os documentos e a imagem. Revise o pedido abaixo e envie. - Peça a prévia da página. Abra-a e compare o resultado com os requisitos, não apenas com a imagem. - Se houver erro, descreva o que aconteceu e o comportamento esperado. Peça uma correção em linguagem natural e verifique novamente. Você especifica e avalia o resultado. Não precisa escrever, colar ou editar código. A ferramenta pode gerar código internamente para construir a página. ### Imagem e página são entregas diferentes A imagem orienta a aparência. Os documentos dizem o que cada link faz, quais textos valem e como a página se adapta. É na prévia funcional que você confere navegação, leitura e comportamento. ### Se a ferramenta ficar indisponível Guarde os documentos e as referências. Continue a revisão visual e pratique a verificação no exemplo disponibilizado pelo professor. Registre a implementação como pendente até conseguir gerar e conferir sua versão. Não marque uma imagem como página publicada. ### Pedido para a ferramenta O pedido inclui suas anotações atuais. Revise antes de copiar. As imagens e arquivos precisam ser anexados por você; copiar texto não os envia. Ver pedido e documentos incluídos ```text Implemente uma página estática responsiva com base nos documentos abaixo e na imagem aprovada anexada. Não me peça para escrever ou editar código. Preserve textos e URLs confirmados. Não invente dados nem publique pendências como fatos. Use elementos adequados para títulos e links, descrições alternativas para imagens informativas, foco visível e operação por teclado. Faça a página funcionar em tela pequena sem rolagem lateral e em computador. Sem login, pagamentos, banco de dados ou formulário simulado como envio real. Mostre como abrir a prévia e entregue uma pasta pronta para upload estático, com index.html na raiz e todos os arquivos necessários, sem dependência de um servidor de desenvolvimento. Informe onde está essa pasta. Não publique automaticamente. --- briefing.md --- # Briefing do projeto Projeto: Página de negócio ## Nome do projeto Pendente de definição. ## O que o negócio ou iniciativa oferece? Pendente de definição. ## Solicitação inicial Pendente de definição. ## Objetivo da página Pendente de definição. ## Quem vai usar a página? Pendente de definição. ## Dúvidas e necessidades do visitante Pendente de definição. ## Ação principal Pendente de definição. ## Informações que precisam aparecer Pendente de definição. ## Materiais disponíveis Pendente de definição. ## Referências e direção desejada Pendente de definição. ## Escopo e restrições Pendente de definição. ## Informações confirmadas Pendente de definição. ## Sugestões e hipóteses Pendente de definição. ## Perguntas e informações pendentes Pendente de definição. ## Como vamos verificar o resultado? Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- design.md --- # Direção visual do projeto Projeto: Página de negócio ## Intenção visual Pendente de definição. ## Organização e hierarquia Pendente de definição. ## Cores e suas funções Pendente de definição. ## Tipografia Pendente de definição. ## Alinhamento, formas e espaçamento Pendente de definição. ## Imagens, ícones e outras mídias Pendente de definição. ## Comportamento e adaptação Pendente de definição. ## Referência aprovada e revisões Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- Registros para esta revisão --- # Registros do projeto Projeto: Página de negócio ## Comparação dos esboços Pendente de definição. ## Registro de verificação Pendente de definição. ## Publicação e entrega Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. ``` ### Responsividade Comece conferindo uma coluna em tela pequena. Em tela larga, grupos podem se distribuir em colunas se a ordem de leitura continuar clara. Não peça apenas “responsivo”: diga o que pode mudar e o que precisa permanecer visível. #### Atividade Leia a orientação, faça a atividade e guarde os arquivos no seu projeto. - Comportamento e adaptação: O que acontece ao tocar cada link? Como fica no celular e computador? Inclua foco visível e navegação por teclado. --- ### Leitura e acessibilidade ### Verifique a página funcional - **Conteúdo:** confira nomes, descrições e destinos contra o briefing. Remova fatos inventados e marque exercícios fictícios como demonstração. - **Links:** abra cada destino. Confira a URL antes de publicar, inclusive após pedidos de correção. - **Tela:** abra no celular e em uma janela estreita do computador; confira também uma janela larga. Nada importante pode sumir ou exigir rolagem lateral. - **Leitura:** amplie o texto ou use zoom de 200%. Confira cortes, sobreposições e texto sobre imagens. - **Teclado:** use Tab e Shift+Tab para percorrer os links, veja onde está o foco e use Enter para ativar. Não dependa só de passar o mouse. - **Contraste:** use um verificador de contraste. Para texto comum, adote pelo menos 4,5:1; confira as regras e exceções na etapa de acessibilidade do caso maior. - **Imagens:** confira proporção, qualidade e descrições alternativas adequadas. Registre um problema concreto: “a descrição corta na tela estreita” e “deve aparecer inteira”. Depois da correção, repita essa verificação. Este exercício introdutório não certifica conformidade integral de acessibilidade. ### Referências WCAG 2.2 - **Contraste, AA 1.4.3:** texto comum 4,5:1; texto grande 3:1 conforme a definição do padrão, com exceções como logotipos e decoração. - **Reorganização, AA 1.4.10:** em largura equivalente a 320 CSS px, sem perda de informação/função nem rolagem em duas dimensões, ressalvado conteúdo que exige duas dimensões. - **Teclado e foco, A/AA:** funções operáveis por teclado e indicação visível do foco, considerando as exceções dos critérios. - **Alvos, AA 2.5.8:** mínimo de 24 × 24 CSS px ou atendimento às exceções de espaçamento e tipo de alvo. Maior conforto pode pedir alvos maiores. Leia as definições e exceções no [padrão WCAG 2.2](https://www.w3.org/TR/WCAG22/). Esses são critérios selecionados para o exercício, não uma auditoria completa nem uma declaração de conformidade legal. ### Pedido para a ferramenta O pedido inclui suas anotações atuais. Revise antes de copiar. As imagens e arquivos precisam ser anexados por você; copiar texto não os envia. Ver pedido e documentos incluídos ```text Corrija somente os problemas do registro de verificação abaixo. Preserve conteúdo confirmado, destinos dos links e decisões aprovadas. Não me peça para editar código. Descreva o que mudou, mostre a prévia e atualize a pasta pronta para publicação. Informe como repetir a verificação. Se algum requisito depender de informação ausente, sinalize a pendência. --- briefing.md --- # Briefing do projeto Projeto: Página de negócio ## Nome do projeto Pendente de definição. ## O que o negócio ou iniciativa oferece? Pendente de definição. ## Solicitação inicial Pendente de definição. ## Objetivo da página Pendente de definição. ## Quem vai usar a página? Pendente de definição. ## Dúvidas e necessidades do visitante Pendente de definição. ## Ação principal Pendente de definição. ## Informações que precisam aparecer Pendente de definição. ## Materiais disponíveis Pendente de definição. ## Referências e direção desejada Pendente de definição. ## Escopo e restrições Pendente de definição. ## Informações confirmadas Pendente de definição. ## Sugestões e hipóteses Pendente de definição. ## Perguntas e informações pendentes Pendente de definição. ## Como vamos verificar o resultado? Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- design.md --- # Direção visual do projeto Projeto: Página de negócio ## Intenção visual Pendente de definição. ## Organização e hierarquia Pendente de definição. ## Cores e suas funções Pendente de definição. ## Tipografia Pendente de definição. ## Alinhamento, formas e espaçamento Pendente de definição. ## Imagens, ícones e outras mídias Pendente de definição. ## Comportamento e adaptação Pendente de definição. ## Referência aprovada e revisões Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- Registros para esta revisão --- # Registros do projeto Projeto: Página de negócio ## Comparação dos esboços Pendente de definição. ## Registro de verificação Pendente de definição. ## Publicação e entrega Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. ``` #### Atividade Leia a orientação, faça a atividade e guarde os arquivos no seu projeto. - Registro de verificação: Tarefa → resultado observado → dificuldade → mudança → nova verificação. --- ### Teste de usabilidade Teste de usabilidade observa alguém tentando realizar uma tarefa. O resultado informa problemas concretos da interface. ### Prepare duas tarefas Use os critérios do briefing. Exemplo: “Você quer encomendar um bolo para sábado. Descubra como pedir orçamento.” Não diga “clique no botão verde”, pois isso entrega a solução. ### Atividade individual, sem trabalho em dupla - Envie a página e as tarefas ao professor pelo canal indicado. Ele pode executar as tarefas silenciosamente e devolver observações por escrito. - Registre tarefa, quem executou, resultado, hesitação ou erro e informação que faltou. - Interprete o problema sem culpar a pessoa: talvez o rótulo não explique o destino, ou a informação esteja escondida. - Peça uma mudança específica à ferramenta e repita a tarefa na versão corrigida. - Se não houver observador disponível no momento, analise o registro de teste fornecido pelo professor. Identifique problema e correção; deixe o teste da sua página pendente. Pesquisa com público exige pessoas reais ou prováveis usuárias. A avaliação do professor é didática e não valida o público quando ele não o representa. Revisão de IA e sua autoinspeção são complementos, não comportamento observado de usuários. Participação de terceiros fora da turma é opcional; não se exige gravação ou exposição pública. ### Exemplo de registro “Encontrar prazo de encomenda → professor não encontrou → só havia um texto genérico → incluí orientação confirmada na seção Como encomendar → na repetição, a informação foi encontrada.” Se o prazo segue pendente no briefing, a correção é solicitar a informação, não inventar um número. ### Pedido para a ferramenta O pedido inclui suas anotações atuais. Revise antes de copiar. As imagens e arquivos precisam ser anexados por você; copiar texto não os envia. Ver pedido e documentos incluídos ```text Faça uma revisão auxiliar da página ou capturas anexadas segundo o briefing.md e design.md. Liste dificuldades de leitura, hierarquia e clareza com justificativa. Separe problemas observados de suposições. Não diga que simulou usuários reais nem que uma captura comprova responsividade, funcionamento ou acessibilidade. Sugira tarefas para conferir no navegador. --- briefing.md --- # Briefing do projeto Projeto: Página de negócio ## Nome do projeto Pendente de definição. ## O que o negócio ou iniciativa oferece? Pendente de definição. ## Solicitação inicial Pendente de definição. ## Objetivo da página Pendente de definição. ## Quem vai usar a página? Pendente de definição. ## Dúvidas e necessidades do visitante Pendente de definição. ## Ação principal Pendente de definição. ## Informações que precisam aparecer Pendente de definição. ## Materiais disponíveis Pendente de definição. ## Referências e direção desejada Pendente de definição. ## Escopo e restrições Pendente de definição. ## Informações confirmadas Pendente de definição. ## Sugestões e hipóteses Pendente de definição. ## Perguntas e informações pendentes Pendente de definição. ## Como vamos verificar o resultado? Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- design.md --- # Direção visual do projeto Projeto: Página de negócio ## Intenção visual Pendente de definição. ## Organização e hierarquia Pendente de definição. ## Cores e suas funções Pendente de definição. ## Tipografia Pendente de definição. ## Alinhamento, formas e espaçamento Pendente de definição. ## Imagens, ícones e outras mídias Pendente de definição. ## Comportamento e adaptação Pendente de definição. ## Referência aprovada e revisões Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- Registros para esta revisão --- # Registros do projeto Projeto: Página de negócio ## Comparação dos esboços Pendente de definição. ## Registro de verificação Pendente de definição. ## Publicação e entrega Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. ``` ### Pedido para a ferramenta O pedido inclui suas anotações atuais. Revise antes de copiar. As imagens e arquivos precisam ser anexados por você; copiar texto não os envia. Ver pedido e documentos incluídos ```text Corrija somente os problemas do registro de verificação abaixo. Preserve conteúdo confirmado, destinos dos links e decisões aprovadas. Não me peça para editar código. Descreva o que mudou, mostre a prévia e atualize a pasta pronta para publicação. Informe como repetir a verificação. Se algum requisito depender de informação ausente, sinalize a pendência. --- briefing.md --- # Briefing do projeto Projeto: Página de negócio ## Nome do projeto Pendente de definição. ## O que o negócio ou iniciativa oferece? Pendente de definição. ## Solicitação inicial Pendente de definição. ## Objetivo da página Pendente de definição. ## Quem vai usar a página? Pendente de definição. ## Dúvidas e necessidades do visitante Pendente de definição. ## Ação principal Pendente de definição. ## Informações que precisam aparecer Pendente de definição. ## Materiais disponíveis Pendente de definição. ## Referências e direção desejada Pendente de definição. ## Escopo e restrições Pendente de definição. ## Informações confirmadas Pendente de definição. ## Sugestões e hipóteses Pendente de definição. ## Perguntas e informações pendentes Pendente de definição. ## Como vamos verificar o resultado? Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- design.md --- # Direção visual do projeto Projeto: Página de negócio ## Intenção visual Pendente de definição. ## Organização e hierarquia Pendente de definição. ## Cores e suas funções Pendente de definição. ## Tipografia Pendente de definição. ## Alinhamento, formas e espaçamento Pendente de definição. ## Imagens, ícones e outras mídias Pendente de definição. ## Comportamento e adaptação Pendente de definição. ## Referência aprovada e revisões Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- Registros para esta revisão --- # Registros do projeto Projeto: Página de negócio ## Comparação dos esboços Pendente de definição. ## Registro de verificação Pendente de definição. ## Publicação e entrega Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. ``` Referência: [GOV.UK — testes moderados](https://www.gov.uk/service-manual/user-research/using-moderated-usability-testing). #### Atividade Escreva duas tarefas, observe ou analise um registro fornecido e documente a nova verificação. - Registro de verificação: Tarefa → resultado observado → dificuldade → mudança → nova verificação. --- ### Publicar e conferir ### Antes do upload Peça à ferramenta uma pasta final para site estático, com `index.html` na raiz e os recursos necessários. A pasta do projeto pode conter documentos e arquivos de trabalho; publique somente a pasta final indicada pela ferramenta. ### Pedido para a ferramenta O pedido inclui suas anotações atuais. Revise antes de copiar. As imagens e arquivos precisam ser anexados por você; copiar texto não os envia. Ver pedido e documentos incluídos ```text Verifique se a pasta de publicação funciona como site estático: index.html na raiz, caminhos dos recursos válidos, nenhuma dependência da prévia local ou de servidor próprio. Gere ou atualize essa pasta sem me pedir para editar código. Informe o caminho e o que devo selecionar no upload manual. Não publique automaticamente e não inclua credenciais, arquivos pessoais ou anotações privadas. --- briefing.md --- # Briefing do projeto Projeto: Página de negócio ## Nome do projeto Pendente de definição. ## O que o negócio ou iniciativa oferece? Pendente de definição. ## Solicitação inicial Pendente de definição. ## Objetivo da página Pendente de definição. ## Quem vai usar a página? Pendente de definição. ## Dúvidas e necessidades do visitante Pendente de definição. ## Ação principal Pendente de definição. ## Informações que precisam aparecer Pendente de definição. ## Materiais disponíveis Pendente de definição. ## Referências e direção desejada Pendente de definição. ## Escopo e restrições Pendente de definição. ## Informações confirmadas Pendente de definição. ## Sugestões e hipóteses Pendente de definição. ## Perguntas e informações pendentes Pendente de definição. ## Como vamos verificar o resultado? Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- design.md --- # Direção visual do projeto Projeto: Página de negócio ## Intenção visual Pendente de definição. ## Organização e hierarquia Pendente de definição. ## Cores e suas funções Pendente de definição. ## Tipografia Pendente de definição. ## Alinhamento, formas e espaçamento Pendente de definição. ## Imagens, ícones e outras mídias Pendente de definição. ## Comportamento e adaptação Pendente de definição. ## Referência aprovada e revisões Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. --- Registros para esta revisão --- # Registros do projeto Projeto: Página de negócio ## Comparação dos esboços Pendente de definição. ## Registro de verificação Pendente de definição. ## Publicação e entrega Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. ``` ### Caminho principal: upload manual no Netlify - Entre na conta permitida para a atividade. No painel de projetos, procure **Add new project → Deploy manually** ou a área de upload manual. - Arraste a pasta final para a área indicada. Não envie só uma captura de tela nem uma pasta que dependa do servidor de prévia. - Aguarde o processamento e abra a URL pública fornecida. - Repita a conferência dos links, imagens e ação principal nessa URL. Teste também no celular. - Depois de corrigir na ferramenta, gere novamente a pasta final e envie uma nova versão no mesmo projeto de hospedagem. Os nomes do painel podem mudar. Consulte a [documentação de criação de projeto do Netlify](https://docs.netlify.com/manage/projects/add-new-project/). Contas, cotas e funções devem ser verificadas pelo professor antes da aula. ### Alternativa: Cloudflare Pages No painel **Workers & Pages**, crie um projeto Pages por **Direct Upload** e envie os arquivos prontos pela área de arrastar e soltar. Abra a URL `pages.dev` e repita os testes. Para atualizar, crie um novo deployment no mesmo projeto. Veja o [guia oficial de Direct Upload](https://developers.cloudflare.com/pages/get-started/direct-upload/). Um endereço gratuito da plataforma é suficiente. Domínio próprio não faz parte desta entrega. Não é necessário GitHub, terminal ou configuração de servidor. ### Uso do cartão Copie a URL pública para o campo de website ou links da rede social, quando disponível. No WhatsApp, use um campo que aceite e exiba links na versão da sua conta; confirme abrindo pelo perfil. Não é obrigatório usar contas pessoais nem divulgar o exercício publicamente. Registre URL, data e eventuais pendências. Um upload concluído só conta como publicação verificada depois de você abrir a página pública. #### Atividade Leia a orientação, faça a atividade e guarde os arquivos no seu projeto. - Publicação e entrega: URL pública, data, arquivos entregues e pendências. Não coloque senhas ou credenciais. --- ### Meus documentos Os registros deste projeto ficam separados dos registros do outro. Os campos das atividades alimentam os documentos abaixo. Baixe `briefing.md` e `design.md` para a pasta do projeto. Guarde também os registros de comparação, testes e publicação. O backup JSON contém os dois projetos e permite continuar em outro navegador; os arquivos Markdown são os documentos para as ferramentas. Os dados ficam neste navegador. Não são enviados ao professor ou à IA automaticamente. Em computador compartilhado, baixe seu backup e apague os registros ao terminar. #### Atividade Leia a orientação, faça a atividade e guarde os arquivos no seu projeto. --- ### Entrega individual ### Entrega individual - `briefing.md` revisado e `design.md` consolidado. - Dois esboços e comparação curta. - Imagem escolhida e captura da página implementada. - Registro de verificações, correções e nova verificação. - Pasta final do site e URL pública conferida, ou pendência explicitamente registrada se a publicação não foi possível. Encaminhe os arquivos e a URL ao professor pelo canal indicado. Não há apresentação oral, trabalho em dupla ou obrigação de mostrar a página à turma. ### Guardar ou apagar Baixe o backup antes de sair de um computador compartilhado. O botão abaixo apaga os registros dos dois projetos deste navegador; os arquivos baixados permanecem. #### Atividade Leia a orientação, faça a atividade e guarde os arquivos no seu projeto. --- ### Fontes e critérios A pesquisa foi realizada em fontes primárias em 7 de outubro de 2026. As orientações do GOV.UK são práticas de um serviço público que adaptamos ao exercício; não são regras universais para páginas comerciais. WCAG é um padrão de acessibilidade com níveis e exceções. O número de esboços, o cronograma e a entrega individual são escolhas pedagógicas. - [GOV.UK — necessidades das pessoas](https://www.gov.uk/service-manual/user-research/start-by-learning-user-needs) - [GOV.UK — prototipagem](https://www.gov.uk/service-manual/design/making-prototypes) - [GOV.UK — linguagem clara](https://guidance.publishing.service.gov.uk/writing-to-gov-uk-standards/writing-guidelines/clear-language/) - [GOV.UK — ação principal](https://design-system.service.gov.uk/components/button/) - [W3C — WCAG 2.2](https://www.w3.org/TR/WCAG22/) - [GOV.UK — testes de usabilidade](https://www.gov.uk/service-manual/user-research/using-moderated-usability-testing) - [Cloudflare — publicação de arquivos prontos](https://developers.cloudflare.com/pages/get-started/direct-upload/) Uma ferramenta pode mudar de nome, cotas ou interface. O que você aprende é organizar, orientar, avaliar e corrigir uma página com base em necessidades e evidências. #### Atividade Leia a orientação, faça a atividade e guarde os arquivos no seu projeto. ### Modelos de documentos ```markdown # Briefing do projeto Projeto: Página de negócio ## Nome do projeto Pendente de definição. ## O que o negócio ou iniciativa oferece? Pendente de definição. ## Solicitação inicial Pendente de definição. ## Objetivo da página Pendente de definição. ## Quem vai usar a página? Pendente de definição. ## Dúvidas e necessidades do visitante Pendente de definição. ## Ação principal Pendente de definição. ## Informações que precisam aparecer Pendente de definição. ## Materiais disponíveis Pendente de definição. ## Referências e direção desejada Pendente de definição. ## Escopo e restrições Pendente de definição. ## Informações confirmadas Pendente de definição. ## Sugestões e hipóteses Pendente de definição. ## Perguntas e informações pendentes Pendente de definição. ## Como vamos verificar o resultado? Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. ``` ```markdown # Direção visual do projeto Projeto: Página de negócio ## Intenção visual Pendente de definição. ## Organização e hierarquia Pendente de definição. ## Cores e suas funções Pendente de definição. ## Tipografia Pendente de definição. ## Alinhamento, formas e espaçamento Pendente de definição. ## Imagens, ícones e outras mídias Pendente de definição. ## Comportamento e adaptação Pendente de definição. ## Referência aprovada e revisões Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. ``` ```markdown # Registros do projeto Projeto: Página de negócio ## Comparação dos esboços Pendente de definição. ## Registro de verificação Pendente de definição. ## Publicação e entrega Pendente de definição. --- Documento de trabalho. Sugestões e pendências precisam de confirmação antes da publicação. ``` ## Checklist por projeto - [ ] Briefing revisado, com fatos e pendências separados. - [ ] Dois esboços com organizações diferentes e comparação registrada. - [ ] Design consolidado e referência visual identificada. - [ ] Textos, imagens e destinos conferidos; nenhum dado inventado publicado como verdadeiro. - [ ] Página verificada em celular, computador, zoom e teclado. - [ ] Links e ação principal verificados na URL pública. - [ ] Problemas observados, correções e nova verificação registrados. - [ ] Briefing, design, registros, arquivos e URL guardados para entrega individual.