Redefinir estilo de sites restyling
Use o Agente de modernização de experiência para aplicar um design durante a migração ou alterar a aparência de um projeto existente do Edge Delivery Services. Copiar fielmente a aparência de um site de origem e substituí-lo deliberadamente por um novo design são solicitações diferentes. Estado que você deseja.
A aparência está no código do projeto: o CSS global define a aparência do conteúdo padrão e cada bloco tem seu próprio CSS e JavaScript. Juntos, eles podem fornecer o mesmo conteúdo semântico em qualquer design sem reestruturá-lo, pois o JavaScript pode reconstruir a marcação no navegador. Consulte Como seu site é criado e atualizado. Um reestilo puramente visual, portanto, altera o código no Git e deixa o conteúdo criado sozinho.
Este guia é para a pessoa que lidera um restyle. Se você for um designer fazendo alterações visuais individuais que um desenvolvedor analisa, comece com Fazer Alterações Visuais.
Concordar quais alterações e o que permanece prepare
Conecte o projeto e confirme a permissão para modificá-lo. Salve uma revisão de código da linha de base e preserve o conteúdo afetado antes de fazer alterações.
Fornecer:
- Fonte de conteúdo: páginas existentes cujo texto, imagens, links, metadados e significado devem ser preservados ou novo conteúdo deve ser aprovado.
- Referência de design: um componente ou quadro do Figma específico, um site de referência autorizado, uma captura de tela ou uma especificação de design. Nomeie a versão e os estados de desktop e dispositivos móveis que são importantes.
- Escopo: tokens globais (propriedades personalizadas de CSS para cores, tipografia e espaçamento) e conteúdo padrão, blocos selecionados, uma página ou todo o site.
- O que não deve ser alterado: Conteúdo, URLs, modelos de criação, comportamento de acessibilidade e integrações.
- Saída: Conteúdo que os autores podem editar, na opção de armazenamento usada pelo seu projeto ou em um protótipo de design estático, se for tudo o que você precisa.
As capturas de tela e os sites de referência podem deixar as interações e as regras responsivas não especificadas. Defina-os em uma página de exemplo antes de aplicá-los a todo o site.
Referências, protótipos e entrega design-output
O agente oferece suporte ao trabalho de design de sites de origem, Figma e referências fornecidas. A importação de figuras e o redesign guiado são recursos opcionais que ele oferece para serem ativados para o seu projeto quando uma solicitação precisa deles. Eles têm entradas e saídas diferentes; não suponha que eles funcionem da mesma maneira.
- Para um bloco Figma, forneça seu componente ou link de nó. Para uma nova página, forneça um quadro específico em vez de um arquivo inteiro.
- A importação do Figma precisa de um token de acesso e permissão do Figma para ler o arquivo. Consulte Trabalhar com um design de diagrama.
- Uma visualização estática do design do HTML mostra o novo design em cópias de suas páginas, o que ajuda a escolher uma direção. Os autores não podem editar essas cópias; elas não são documentos do site ou páginas do Experience Manager.
- Se os autores precisarem editar o resultado, solicite o conteúdo do site e bloqueie modelos na opção de armazenamento usada pelo seu projeto, depois verifique-os conforme descrito para conteúdo baseado em documento ou criação no Experience Manager.
Redesign guiado guided-redesign
O redesign guiado leva um site, ou um conjunto de suas páginas, para um novo design em estágios. Ele é fornecido pelo complemento Stardust, stardust@excat-extended. O agente captura o design atual, registra a direção desejada, cria protótipos antes e depois para revisão e transforma o design aprovado em blocos e conteúdo. Use-o para um redesign em várias páginas, em vez de reestilizar uma página ou bloco. O agente mantém os arquivos de trabalho e o progresso de um novo design no repositório, para que você possa continuar em uma conversa posterior.
Você não precisa conhecer os estágios por nome. Descreva o resultado desejado, por exemplo “Reprojete a página inicial e as páginas do produto em um estilo mais leve e editorial”, e o agente propõe as etapas. Você também pode solicitar uma etapa diretamente:
Ativar o redesign guiado também ativa o complemento de design ofício, que aplica orientação de qualidade de design de front-end a cada página. Revise cada estágio antes de continuar e valide o resultado implantado conforme descrito abaixo.
Redefinir estilo durante migração during-migration
Use esse caminho quando o conteúdo vier de um site existente, mas o design do público-alvo for diferente.
- Conclua o escopo do projeto e da migração, incluindo onde o conteúdo está armazenado.
- Defina o sistema de design de destino: tipografia, cores, espaçamento, conteúdo padrão e blocos reutilizáveis. Reutilizar convenções de projeto existentes onde elas se encaixarem.
- Para o Figma, configure o acesso e crie os blocos ou variantes necessários dos nós de componentes específicos. Consulte Reprojetar com Blocos de Figma e Criar um Bloco de Figma.
- Migre uma página de exemplo para cada modelo para essa coleção de blocos. Mantenha o site ativo como fonte de conteúdo e o Figma ou a referência aprovada como fonte de design.
- Comparar o conteúdo com o site de origem e a aparência com o design de destino. Não julgue a página reprojetada em relação à aparência do site antigo.
- Verifique se os autores podem editar o resultado e se ele funciona em cada largura de tela. Corrija mapeamentos ou modelos de conteúdo onde necessário, em seguida, continue em lotes.
Por exemplo:
Aplicar o design aprovado em
https://www.figma.com/design/AbC123/Brand-Refresh?node-id=12-345durante a migração dehttps://www.example.com/products/tents. As páginas ativas são a fonte de conteúdo; a referência define a nova aparência. Preserve o texto, os links, os metadados e as imagens relevantes. Verifique uma página de exemplo primeiro. Crie conteúdo que os autores possam editar no Experience Workspace. Não carregue, envie nem publique.
Substitua os URLs de exemplo pelos seus próprios e, para a criação no Experience Manager, diga que o conteúdo está armazenado no JCR.
Se uma nova página não tiver um site de origem, consulte Criar uma Nova Página no Figma: um quadro específico fornece o texto e os ativos, bem como o design. Isso é diferente de mapear o conteúdo existente do site para um novo design.
Redefinir Estilo de um Site Existente existing-site
Não é necessária uma nova migração.
-
Conecte o projeto existente e a ramificação pretendida. Peça ao agente que leia as convenções, os blocos e os modelos de criação do projeto.
-
Identificar páginas de linha de base que abrangem os modelos e variantes afetados. Registre sua aparência atual e interações importantes.
-
Especifique o escopo da alteração e o que deve permanecer. Por exemplo:
Reestilizar este projeto existente usando o design aprovado em
https://www.figma.com/design/AbC123/Brand-Refresh. Altere as cores globais, a tipografia e a apresentação de cartões em/e/products. Preserve o conteúdo, URLs, modelos, análises, comportamento do teclado e integrações. Reutilizar nossos tokens e blocos. Mostrar o escopo proposto primeiro; não reimporte conteúdo nem carregue, envie por push ou publique.Substitua o URL de exemplo e os caminhos por seu próprio URL.
-
Atualize os tokens compartilhados e os estilos globais primeiro onde a alteração for global. Aplique o estilo específico de bloco somente onde necessário.
-
Visualize todas as páginas de exemplo afetadas, não apenas a página usada para derivar o design. Inclua larguras móveis, cabeçalhos longos, conteúdo opcional ausente e variantes diferentes. Uma alteração de token global pode afetar páginas fora do exemplo original, portanto, inclua-as também.
-
Se o design exigir alterações estruturais ou de modelo, tome essa decisão separada e explícita. Planeje como o conteúdo existente será movido para a nova estrutura em vez de reescrever silenciosamente o conteúdo do autor.
-
Revise as verificações de comparação de código e de projeto, depois envie e entregue por meio do fluxo de trabalho do projeto existente. As alterações de estilo são código: elas chegam ao site ativo assim que a ramificação é mesclada em
main, portanto, verifique primeiro as páginas afetadas na URL de visualização da ramificação. Consulte Como As Alterações Entram Em Vigor.
Validar e recuperar validate
O reestilo é feito quando o conteúdo permanece correto, o design aprovado funciona em cada largura de tela, as interações permanecem utilizáveis e os autores ainda podem editar, salvar e reabrir as páginas de exemplo. Verifique o contraste, o foco, a ordem de leitura, o significado da imagem e os requisitos de desempenho do projeto. Uma pontuação de similaridade não decide isso para você.
Se um resultado estiver errado, identifique a página ou o bloco afetado e se o problema é um token, estilo compartilhado, estilo de bloco, estrutura ou mapeamento de conteúdo. Corrija essa camada e verifique novamente todas as variantes afetadas. Para erros de acesso ao Figma, verifique o link do nó, as permissões de arquivo, o token e se a importação do Figma está ativada para o projeto antes de tentar novamente.
Reverta código indesejado por meio do fluxo de trabalho Git do projeto. Restaure qualquer conteúdo remoto alterado separadamente; uma reversão de código não desfaz os uploads. Mantenha a linha de base até que o novo estilo seja aprovado.
Entregue a referência aprovada e sua versão, os arquivos alterados, as páginas afetadas, as alterações de modelo e conteúdo, os resultados da verificação, as lacunas conhecidas e como recuperar código e conteúdo usando a entrega do projeto.