Astra profundo · Capítulo 6 de 31 · 30 min
Projetar a composição pela tarefa do visitante
Você sai com um mapa de composição e uma abertura que conduz da proposta à escolha da visita.
Este capítulo faz parte do curso gratuito Astra profundo.
A landing page do Estúdio Aurora, estúdio fictício, precisa acolher quem chega e ajudar a escolher uma visita. A mesma tela apresenta título, fotografia, descrição e agenda. Você vai distribuir esses elementos pela ordem em que o visitante precisa deles, produzindo uma composição que tem função antes de receber acabamento visual.
Pense em uma mesa preparada para uma oficina. O material mais usado fica próximo da mão e os objetos de apoio ocupam outro lugar. Na página, tamanho, posição, proximidade e contraste distribuem atenção. Chamamos essa relação de hierarquia visual. Quando ela acompanha a tarefa, a pessoa percebe primeiro o que precisa compreender e depois encontra os elementos necessários para agir.
Composição que conduz o olhar
Título, área visual e próxima ação aparecem em uma ordem clara.
Transcrição
0:00O título assume a maior escala. Linhas de alinhamento organizam a abertura e criam espaço para o conteúdo respirar.
0:07A área visual entra ao lado do título. O enquadramento preserva uma zona tranquila para a leitura.
0:14Agenda e chamada para ação completam a página. A hierarquia conecta o interesse inicial ao próximo passo do visitante.
- Etapa 1 de 4: Compreender
Título e apresentação da visita
- Etapa 2 de 4: Imaginar
Fotografia e detalhe da experiência
- Etapa 3 de 4: Comparar
Horários apresentados em conjunto
- Etapa 4 de 4: Escolher
Ação associada ao horário
No exemplo resolvido, a abertura coloca o texto em uma área de leitura e a fotografia ao lado. O resumo da agenda aparece logo abaixo, com horários alinhados para comparação. A galeria vem depois e amplia a experiência. O espaço entre título e descrição é menor que o intervalo até a agenda, porque os primeiros elementos formam uma unidade de sentido. A geometria passa a comunicar relações.
Aprofunde as decisões desta aula
Como a tarefa organiza a composição?
Comece escrevendo a sequência de decisões. Para o Aurora, o visitante precisa compreender a experiência, imaginar como será a visita e escolher um horário. O título explica a proposta. A fotografia situa a atmosfera. A agenda oferece a escolha. Essas funções justificam a composição. A quantidade de seções nasce do conteúdo necessário à decisão, e cada uma deve acrescentar uma informação que a anterior ainda não ofereceu.
Como adaptar a hierarquia a diferentes áreas da página?
No celular, mantenha a prioridade mesmo quando a disposição muda. A fotografia pode aparecer abaixo da apresentação, com recorte que preserve o assunto. Os horários continuam próximos de sua ação. Você pode reduzir elementos simultâneos e permitir que a página cresça conforme o conteúdo. A adaptação deve ser julgada pela continuidade da tarefa, especialmente quando o título ocupa mais linhas. Uma composição editorial e uma área operacional pedem tratamentos próprios. A primeira conduz uma leitura; a segunda ajuda a localizar e comparar informações. Na agenda, alinhar horários e detalhes facilita a escolha. Na abertura, uma imagem ampla pode expressar atmosfera. Astra recebe uma orientação melhor quando o pedido explica essa diferença e atribui um papel a cada região da página.
O guia oficial de frontend reúne orientações de composição e implementação, mas seu texto foi preparado originalmente para GPT-5.5. Use-o como repertório geral aplicável ao trabalho com Astra. Nesta aula, a decisão didática é desenhar a sequência antes de expandir componentes. Isso permite revisar a estrutura com conteúdo real e evita descobrir tarde que a página dedicou muita atenção a uma informação secundária.
Faça agora: transforme conteúdo em composição
Use dez minutos para leitura e mapa e 20 para produzir e revisar o candidato.
Passo 1: Ordene as decisões
Escreva o que o visitante precisa compreender antes de escolher.
Deu certo quando: Cada informação possui uma posição justificada.
Passo 2: Desenhe as regiões
Marque texto, imagem, agenda e ação em um esboço simples.
Deu certo quando: A estrutura funciona mesmo sem decoração.
Passo 3: Aplique conteúdo real
Preencha o candidato com o título e os horários do exemplo.
Deu certo quando: A composição acomoda o material que será usado.
Passo 4: Confira a leitura
Examine tela larga e estreita e ajuste uma prioridade.
Deu certo quando: A tarefa permanece clara nas duas disposições.
No fim você tem: Um mapa de composição e uma prévia cuja ordem visual tem justificativa.
Cada região acrescenta informação à decisão. Proximidade e escala expressam relações de conteúdo. A prioridade permanece compreensível no celular.
Seu caderno neste capítulo
Abrir o caderno completoSelecione um trecho do capítulo para destacar ou anotar. Nos vídeos e áudios, use Anotar este momento. No teclado, selecione com Shift e as setas e use Alt+Shift+D para destacar ou Alt+Shift+N para anotar.
Salvo neste navegador. Entre na sua conta para levar o caderno a outros aparelhos.
Entre na sua conta para compartilhar o que aprendeu e convidar alguém para estudar com você.
Conexões deste capítulo
Veja o que estudar antes e para onde seguir depois, explore os conceitos e compare abordagens em outros cursos. Sugestões marcadas como “sugerido pelo grafo” vêm dos assuntos em comum, não do índice do curso.
Estude antes
- Frontend vs Backendsugerido pelo grafoApresenta o conceito “Frontend”, usado em “Projetar a composição pela tarefa do visitante”.
- CursoEscrever bem com IAsugerido pelo grafoAs primeiras aulas do Astra pedem um briefing com referências e dirigem cada iteração por texto. O curso de escrita ensina a decidir o que pedir, dar contexto e conferir a saída, que é a base dessas aulas. Ordem decidida quando o Astra ganhou uma página por aula (Etapa 4, wave 3), para que as 31 aulas mostrem o que estudar antes.
- CursoNode.js: JavaScript no Servidorsugerido pelo grafo4 capítulos de “Astra profundo” usam conceitos apresentados em “Node.js: JavaScript no Servidor”.
Conceitos deste capítulo
O mesmo assunto em outros cursos
- Frontends com VibecodingAplicar direção de arte, UX writing e padrões de códigoExaminar conexões de Aplicar direção de arte, UX writing e padrões de código
- Escrever bem com IAFechar retomando a promessa, com um pedido sóExaminar conexões de Fechar retomando a promessa, com um pedido só
- Autoridade Temática e SEO de EntidadesO que publicar, o que ignorar e quando pararExaminar conexões de O que publicar, o que ignorar e quando parar
- CRO: Otimização de Conversão e ExperimentaçãoLanding pages: clareza acima da dobraExaminar conexões de Landing pages: clareza acima da dobra
Leve uma ideia para a prática
Escolha uma atividade no painel e volte a este curso quando quiser.
Atividades e evolução ficam reunidas no painel da sua conta.
