Prepare una página de servicio y su versión móvil con textos reales y medios autorizados.
trabajar en un entorno de copia o demostración. Defina los datos utilizados y el resultado esperado antes de comenzar. Mantenga sus decisiones y las dificultades encontradas para poder explicar el proceso.
Identifique la pregunta principal a la que responde cada página.
Organizar títulos, pruebas y acciones antes de los detalles decorativos.
Compare la representación con la imagen que falta y los textos más largos.
Transmita opciones visuales y restricciones de contenido al equipo.
Entrega y verificaciones
Una composición de página, adaptaciones de pantalla y reglas de reutilización.
La lectura de los contenidos y la acción esperada permanecen visibles sin depender de un efecto o de una sola imagen.
Para cada cheque, tenga en cuenta el contexto, la acción, el resultado esperado y lo que se ha observado. distinguir una verificación exitosa de una hipótesis restante. Otra persona debe ser capaz de entender el entregable sin asistir a toda su fabricación.
Una captura de pantalla atractiva no demuestra ni la comprensión de la oferta ni la calidad de un curso. Compruebe la jerarquía con una tarea real.
Colaboración para explorar: UI de diseño.
Especifique el intercambio de responsabilidades: quién proporciona la información, quién decide, quién verifica y mantiene el resultado. Un buen traspaso conserva las restricciones y decisiones, no solo el archivo final.
Ejercicio práctico detallado y entregables esperados
Ejercicio profundo: Configure una página de servicio con introducción, foto, evidencia disponible y contacto. Compare el renderizado a 390, 768, 1440 y 1920 píxeles de ancho. Use un título largo y un párrafo del doble de la longitud proporcionada para probar las columnas. Explique cómo el ancho de lectura, el tamaño del título y el cambio de lugar de la foto. Mantenga las mismas prioridades editoriales entre el teléfono inteligente y la computadora, incluso cuando el diseño cambia.
Elementos que deben acompañar al trabajo
Contenido validado y prioridad de bloque
Maquetas con texto corto y texto largo
Reglas de ancho, columnas y espaciados
Lista de opciones de encuadre y variantes receptivas
Criterios de aceptación
Estos criterios son una base de trabajo para adaptarse al contexto. Para cada uno, tenga en cuenta la acción tomada, el resultado esperado, el resultado observado y la información que queda por confirmar.
El título mantiene una clara jerarquía en todos los anchos.
Una foto no hace retroceder el texto útil en un espacio excesivo.
Las columnas se reorganizan en un orden de lectura comprensible.
Los contenidos largos no producen truncamiento o desbordamiento horizontal.
Pase las reglas de diseño con las maquetas. Especifique los límites de ancho, los puntos de cambio de columna y el encuadre de cada imagen. Compruebe la integración en el contenido real y en una traducción más larga. Mantenga una captura por formato para discutir una discrepancia concreta: una indicación como "hacerlo más equilibrado" no es suficiente para reproducir una decisión de diseño.
Una propuesta visual debe funcionar dentro de las restricciones del sitio web. Una dirección visual exploratoria y una maqueta lista para la implementación requieren diferentes niveles de detalle.
Exploración de la dirección visual
Cuándo elegir esta opción
Útil para discutir la jerarquía, la atmósfera y el tratamiento de los medios. Use contenido representativo e identifique elementos exploratorios.
Qué hay que prever
Prepare varias situaciones de lectura. Las fotografías seleccionadas deben estar disponibles y su uso permitido compatible con el proyecto.
Maqueta con reglas de adaptación
Cuándo elegir esta opción
Adecuado cuando se definen los flujos de trabajo y el contenido. Cambios de anchos de documentos, espaciado, recorte y cambios de diseño.
Qué hay que prever
Mostrar contenido largo y elementos faltantes. Discuta los comportamientos con el equipo de implementación cuando no se pueden deducir de una imagen estática.
un riesgo de anticipar
Una maqueta puede ocultar una fotografía pesada, un título corto insostenible o una columna que no puede adaptarse a las traducciones. Pruebe estas restricciones antes de la aprobación.
como decidir
Cree una página representativa en HTML o un prototipo adecuado. Compare la lectura en teléfonos y pantallas grandes, luego registre reglas compartidas.
¿Este ejercicio demuestra una cualificación profesional?
Le permite mostrar un enfoque y sus límites. No es un diploma, ni una certificación, ni prueba de una experiencia de producción.
¿Cómo presentar el trabajo en una cartera?
Especifique que este es un ejercicio, su función, restricciones, decisiones y controles. Utilice datos de prueba y medios cuyos derechos estén establecidos.
¿Cómo evaluar la calidad del entregable?
La lectura de los contenidos y la acción esperada permanecen visibles sin depender de un efecto o de una sola imagen. Sumar las dificultades encontradas y lo que queda por verificar en lugar de presentar una validación absoluta.
¿Se necesita una maqueta para cada ancho de pantalla?
Defina las reglas que conectan los diseños y muestran cambios significativos. Luego verifique la implementación entre los anchos ilustrados, utilizando contenido e interacciones reales. Las capturas de pantalla por sí solas no pueden describir cada comportamiento.