Rediseñar sitios restyling
Utilice Experience Modernization Agent para aplicar un diseño durante la migración o cambiar el aspecto de un proyecto de Edge Delivery Services existente. Copiar fielmente la apariencia de un sitio de origen y reemplazarlo deliberadamente con un nuevo diseño son solicitudes diferentes. El estado que desee.
La apariencia reside en el código del proyecto: el CSS global establece el aspecto del contenido predeterminado y cada bloque tiene su propio CSS y JavaScript. Juntos, pueden dar el mismo contenido semántico a cualquier diseño sin reestructurarlo, porque JavaScript puede reconstruir el marcado en el explorador; vea Cómo se crea y actualiza su sitio. Por lo tanto, un estilo puramente visual cambia el código en Git y deja solo el contenido creado.
Esta guía es para la persona que lleva un estilo. Si usted es un diseñador que realiza cambios visuales individuales que revisa un desarrollador, comience por Realizar cambios visuales.
Aceptar los cambios y lo que permanece prepare
Conecte el proyecto y confirme el permiso para modificarlo. Guardar una revisión de código de línea de base y conservar el contenido afectado antes de realizar cambios.
Proporcionar:
- Origen del contenido: Páginas existentes cuyo texto, imágenes, vínculos, metadatos y significado deben conservarse o aprobar contenido nuevo.
- Referencia de diseño: Un componente o marco Figma específico, un sitio web de referencia autorizado, una captura de pantalla o una especificación de diseño. Asigne un nombre a su versión y a los estados de escritorio y móvil que importen.
- Ámbito: tokens globales (propiedades personalizadas de CSS para colores, tipografía y espaciado) y contenido predeterminado, bloques seleccionados, una página o todo el sitio.
- Lo que no debe cambiar: Contenido, direcciones URL, modelos de creación, comportamiento de accesibilidad e integraciones.
- Salida: Contenido que los autores pueden editar, en la opción de almacenamiento que usa su proyecto, o un prototipo de diseño estático si eso es todo lo que necesita.
Las capturas de pantalla y los sitios de referencia pueden dejar las interacciones y las reglas adaptables sin especificar. Configure estos elementos en una página de muestra antes de aplicarlos a todo el sitio.
Referencias, prototipos y envío design-output
El agente admite el trabajo de diseño desde sitios de origen, Figma y referencias suministradas. La importación y el rediseño guiado de Figma son funciones opcionales que ofrece para activar en su proyecto cuando una solicitud las necesite. Tienen diferentes entradas y salidas; no asuman que funcionan de la misma manera.
- Para un bloque Figma, proporcione su componente o vínculo de nodo. Para una página nueva, proporcione un marco específico en lugar de un archivo completo.
- La importación de Figma necesita un token de acceso de Figma y permiso para leer el archivo. Ver Trabajo a partir de un diseño de Figma.
- Una vista previa estática del diseño de HTML muestra el nuevo diseño en las copias de las páginas, lo que le ayuda a elegir una dirección. Los autores no pueden editar esas copias; no son los documentos del sitio ni las páginas de Experience Manager.
- Si los autores deben editar el resultado, solicite contenido del sitio y modelos de bloque en la opción de almacenamiento que utiliza su proyecto, y después compruébelos tal como se describe para contenido basado en documentos o creación en Experience Manager.
Rediseño guiado guided-redesign
El rediseño guiado lleva a un sitio o a un conjunto de sus páginas a un nuevo diseño por fases. Lo proporciona el complemento Stardust stardust@excat-extended. El agente captura el diseño actual, registra la dirección que desee, crea prototipos antes y después para revisarlos y, a continuación, convierte el diseño aprobado en bloques y contenido. Utilícelo para realizar un rediseño en varias páginas en lugar de para cambiar el estilo de una página o bloque. El agente mantiene los archivos de trabajo y el progreso de un rediseño en el repositorio, para que pueda continuar en una conversación posterior.
No hace falta que conozcas las etapas por su nombre. Describa el resultado que desea, por ejemplo “Rediseñe la página de inicio y las páginas de producto en un estilo más ligero y editorial”, y el agente propone los pasos. También puede solicitar un paso directamente:
Al activar el rediseño guiado también se activa el complemento de diseño artesanal, que aplica orientación de calidad de diseño de front-end a cada página. Revise todas las etapas antes de continuar y valide el resultado implementado como se describe a continuación.
Restablecer estilo durante la migración during-migration
Utilice esta ruta cuando el contenido provenga de un sitio web existente, pero el diseño del destinatario es diferente.
- Finalice el ámbito del proyecto y la migración, incluida la ubicación donde se almacena el contenido.
- Defina el sistema de diseño de destino: tipografía, colores, espaciado, contenido predeterminado y bloques reutilizables. Reutilice las convenciones de proyecto existentes donde se ajusten.
- Para Figma, configure el acceso y, a continuación, cree los bloques o variantes que necesite de nodos de componentes específicos. Ver Rediseño con bloques de Figma y Crear un bloque de Figma.
- Migre una página de muestra para cada plantilla a esa colección de bloques. Mantenga el sitio activo como fuente de contenido y Figma o la referencia aprobada como fuente de diseño.
- Comparar el contenido con el sitio web de origen y la apariencia con el diseño de destino. No juzgue la página rediseñada en función de la apariencia del sitio antiguo.
- Compruebe que los autores puedan editar el resultado y que funcione en cada ancho de pantalla. Corrija las asignaciones o los modelos de contenido donde sea necesario y, a continuación, continúe por lotes.
Por ejemplo:
Aplicar el diseño aprobado en
https://www.figma.com/design/AbC123/Brand-Refresh?node-id=12-345al migrarhttps://www.example.com/products/tents. Las páginas activas son el origen de contenido; la referencia define la nueva apariencia. Conservar texto, vínculos, metadatos e imágenes significativas. Compruebe primero una página de muestra. Cree contenido que los autores puedan editar en Experience Workspace. No cargue, inserte ni publique.
Reemplace las direcciones URL de ejemplo con las suyas propias y, para la creación de Experience Manager, diga que el contenido se almacena en el JCR.
Si una página nueva no tiene sitio web de origen, consulte Crear una página nueva a partir de Figma: un marco específico proporciona el texto y los recursos, así como el diseño. Esto es diferente a asignar el contenido del sitio web existente a un nuevo diseño.
Restablecer un sitio existente existing-site
No se requiere una nueva migración.
-
Conecte el proyecto existente y la rama deseada. Pida al agente que lea las convenciones de diseño, los bloques y los modelos de creación del proyecto.
-
Identificar las páginas de línea de base que abarcan las plantillas y variantes afectadas. Registre su aspecto actual y las interacciones importantes.
-
Indique el alcance del cambio y lo que debe permanecer. Por ejemplo:
Volver a diseñar este proyecto existente usando el diseño aprobado en
https://www.figma.com/design/AbC123/Brand-Refresh. Cambie los colores globales, la tipografía y la presentación de tarjetas en/y/products. Conservar contenido, direcciones URL, modelos, análisis, comportamiento del teclado e integraciones. Reutilice nuestros tokens y bloques. Muestre primero el ámbito propuesto; no vuelva a importar contenido ni cargue, inserte ni publique.Reemplace la dirección URL y las rutas de ejemplo por las suyas.
-
Actualice primero los tokens compartidos y los estilos globales donde el cambio sea global. Aplique un estilo específico del bloque solo donde sea necesario.
-
Previsualice todas las páginas de muestra afectadas, no solo la página utilizada para derivar el diseño. Incluya anchos móviles, encabezados largos, contenido opcional que falta y diferentes variantes. Un cambio de token global puede afectar a las páginas que no están en el ejemplo original, por lo que debe incluirlos también.
-
Si el diseño requiere cambios estructurales o de modelo, tome esa decisión de forma explícita y por separado. Planifique cómo el contenido existente se mueve a la nueva estructura en lugar de reescribir silenciosamente el contenido de autor.
-
Revise la diferencia de código y las comprobaciones de proyecto y, a continuación, inserte y realice la entrega a través del flujo de trabajo del proyecto existente. Los cambios de estilo son código: llegan al sitio activo en cuanto la rama se combina con
main, por lo que primero compruebe las páginas afectadas en la dirección URL de vista previa de la rama. Ver Cómo se activan los cambios.
Validar y recuperar validate
El nuevo estilo se realiza cuando el contenido sigue siendo correcto, el diseño aprobado funciona en cada ancho de pantalla, las interacciones siguen siendo utilizables y los autores pueden editar, guardar y volver a abrir las páginas de muestra. Compruebe el contraste, el enfoque, el orden de lectura, el significado de la imagen y los requisitos de rendimiento del proyecto. Una puntuación de similitud no decide esto por ti.
Si un resultado es incorrecto, identifique la página o el bloque afectado y si el problema es un token, un estilo compartido, un estilo de bloque, una estructura o una asignación de contenido. Corrija esa capa y vuelva a comprobar todas las variantes afectadas. Para errores de acceso a Figma, compruebe el vínculo del nodo, los permisos del archivo, el token y que la importación de Figma está activada para el proyecto antes de intentarlo de nuevo.
Revierta el código no deseado a través del flujo de trabajo Git del proyecto. Restaura cualquier contenido remoto cambiado por separado; una reversión de código no deshace las cargas. Mantener la línea de base hasta que se firme el reajuste.
Entregue la referencia aprobada y su versión, los archivos modificados, las páginas afectadas, los cambios en el modelo y el contenido, los resultados de la comprobación, los espacios conocidos y cómo recuperar código y contenido mediante el traspaso del proyecto.