Comunicación Digital Interactiva
Estructurar una interfaz web profesional utilizando el editor visual de Stitch, transformando contenido crudo en una experiencia de usuario (UX) atractiva.
Composición visual y el prototipado rápido sin que el código sea una barrera.
OBJETIVO
Puntos clave del diseño web:
Evita bloques de texto; utiliza párrafos cortos y puntos clave destacados.
El sitio debe transmitir profesionalismo en medio segundo (el "efecto halo").
Usa fotos reales; las imágenes de archivo genéricas dañan la confianza.
Puntos clave del diseño web:
Si el visitante no entiende qué haces o cómo comprar en segundos, el diseño ha fallado.
Menos es más: Reduce el texto al mínimo necesario; cada palabra debe aportar valor.
Diferenciación: Si te ves como todos, serás tratado como un producto básico (commoditiy).
En un mundo generado por IA todo tiene alma de plástico
Puntos clave del diseño web:
Todo debe sentirse HUMANO
Diferenciación: Si te ves como todos, serás tratado como un producto básico (commoditiy).
Puntos clave del diseño web:
Animaciones funcionales: Evita distracciones excesivas; las animaciones solo deben mejorar la experiencia, no ralentizarla.
Como evitar COSO
Jerarquía visual y componentes.
Introducción a Stitch
Jerarquía visual y componentes.
Stitch permite "dibujar" la web y la IA asiste en la creación de los componentes.
Mientras Gemini Canvas es para contenido, Stitch es para estructura y despliegue.
Jerarquía visual y componentes.
Nos copiamos un prompt de una página que nos guste y probamos la potencia de stitch
Jerarquía visual y componentes.
Podemos editar
Jerarquía visual y componentes.
Podemos editar
Jerarquía visual y componentes.
Podemos editar
Click en la imagen
Jerarquía visual y componentes.
Podemos editar
Editar texto
Editar texto
Editar la imagen
Se lo pedimos por prompt y subimos o generamos la nueva
Jerarquía visual y componentes.
Podemos previsualizar
Jerarquía visual y componentes.
Crear prototipo
Jerarquía visual y componentes.
Editar
Agregar secciones
Jerarquía visual y componentes.
Hacer una landing page para un documental de estilo minimalista
Etapas de "post-producción" web
"Power Prompts" diseñados para que ellos usen dentro del editor de Stitch, divididos por etapas de "post-producción" web
Los prompts los encontrarás en Notion debajo de esta presentación asi puedes copiar y pegar
Los 3 prompts se usan JUNTOS para la misma página
1. Prompts de Estructura (El "Montaje")
Dicta las "escenas" del sitio.
- Prompt base: "Crea una landing page para un documental de estilo minimalista. Necesito un Hero con una imagen a pantalla completa, una sección de sinopsis con texto a la izquierda y una galería de fotos tipo 'contact sheet' (hoja de contactos) de 3 columnas." - Prompt de variación: "Añade una sección de 'Créditos' al final, usando una tipografía monoespaciada que parezca el guion de una película."
2. Prompts de Estética (La "Dirección de Arte")
- Para un look cinematográfico: "Modifica el estilo visual: usa una paleta de colores de 'noche americana' (azules profundos y sombras marcadas), fuentes Serif elegantes y mucho espacio en blanco para que el contenido respire." - Para un estilo moderno/videoclip: "Aplica un diseño tipo 'brutalismo web': tipografías grandes y pesadas, bordes negros marcados, colores saturados y un fondo con una sutil textura de grano de película de 16mm." - Etc.
3. Prompts de Ajuste Fino (La "Corrección de Color" y Detalle)
Stitch permite seleccionar un elemento y pedir cambios específicos. Por ejemplo - Sobre un botón: "Haz que este botón de 'Ver Trailer' sea circular, con un borde fino y que cambie a color rojo neón cuando pase el mouse por encima." - Sobre el espaciado: "Aumenta el 'aire' (padding) entre las secciones para que la navegación se sienta pausada y contemplativa, como un plano secuencia."
Entrega 00
Crea en Notion la página Trabajo Práctico 05 y debajo del título Ejemplo pegas el enlace del resultado del prompt (con los cambios de texto e imagen hechos para practicar).
00
Entrega 01
Introduces la temática y nombre de tu Proyecto Audiovisual (tipo, imágenes, colores, temática) Debajo del título Landing page pegas el enlace + defensa estética. El sitio debe tener ademas del inicio 2 secciones mas. Debe ser navegable
01
Reto del Cambio de Género (no vos, el documental)
3. Prompts de Ajuste Fino (La "Corrección de Color" y Detalle)
1. Termina la sección anterior: 2. Luego, solo mediante prompts estéticos, transforma esa misma página: de una de "Terror psicológico" a una de "Comedia romántica indie" (por ejemplo).
Entrega 02
Debajo del título Landing page (Cambio de Género) pegas el enlace + defensa estética.
02
Fin
Del Guion al Layout
Lic. en Diseño Produccion y Realizacion
Created on April 30, 2026
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Essential Business Proposal
View
Project Roadmap Timeline
View
Step-by-Step Timeline: How to Develop an Idea
View
Artificial Intelligence History Timeline
View
Creative Presentation
View
Bricks Quiz
View
Mobile Phone Call
Explore all templates
Transcript
Comunicación Digital Interactiva
Estructurar una interfaz web profesional utilizando el editor visual de Stitch, transformando contenido crudo en una experiencia de usuario (UX) atractiva.
Composición visual y el prototipado rápido sin que el código sea una barrera.
OBJETIVO
Puntos clave del diseño web:
Evita bloques de texto; utiliza párrafos cortos y puntos clave destacados.
El sitio debe transmitir profesionalismo en medio segundo (el "efecto halo").
Usa fotos reales; las imágenes de archivo genéricas dañan la confianza.
Puntos clave del diseño web:
Si el visitante no entiende qué haces o cómo comprar en segundos, el diseño ha fallado.
Menos es más: Reduce el texto al mínimo necesario; cada palabra debe aportar valor.
Diferenciación: Si te ves como todos, serás tratado como un producto básico (commoditiy).
En un mundo generado por IA todo tiene alma de plástico
Puntos clave del diseño web:
Todo debe sentirse HUMANO
Diferenciación: Si te ves como todos, serás tratado como un producto básico (commoditiy).
Puntos clave del diseño web:
Animaciones funcionales: Evita distracciones excesivas; las animaciones solo deben mejorar la experiencia, no ralentizarla.
Como evitar COSO
Jerarquía visual y componentes.
Introducción a Stitch
Jerarquía visual y componentes.
Stitch permite "dibujar" la web y la IA asiste en la creación de los componentes.
Mientras Gemini Canvas es para contenido, Stitch es para estructura y despliegue.
Jerarquía visual y componentes.
Nos copiamos un prompt de una página que nos guste y probamos la potencia de stitch
Jerarquía visual y componentes.
Podemos editar
Jerarquía visual y componentes.
Podemos editar
Jerarquía visual y componentes.
Podemos editar
Click en la imagen
Jerarquía visual y componentes.
Podemos editar
Editar texto
Editar texto
Editar la imagen
Se lo pedimos por prompt y subimos o generamos la nueva
Jerarquía visual y componentes.
Podemos previsualizar
Jerarquía visual y componentes.
Crear prototipo
Jerarquía visual y componentes.
Editar
Agregar secciones
Jerarquía visual y componentes.
Hacer una landing page para un documental de estilo minimalista
Etapas de "post-producción" web
"Power Prompts" diseñados para que ellos usen dentro del editor de Stitch, divididos por etapas de "post-producción" web
Los prompts los encontrarás en Notion debajo de esta presentación asi puedes copiar y pegar
Los 3 prompts se usan JUNTOS para la misma página
1. Prompts de Estructura (El "Montaje")
Dicta las "escenas" del sitio. - Prompt base: "Crea una landing page para un documental de estilo minimalista. Necesito un Hero con una imagen a pantalla completa, una sección de sinopsis con texto a la izquierda y una galería de fotos tipo 'contact sheet' (hoja de contactos) de 3 columnas." - Prompt de variación: "Añade una sección de 'Créditos' al final, usando una tipografía monoespaciada que parezca el guion de una película."
2. Prompts de Estética (La "Dirección de Arte")
- Para un look cinematográfico: "Modifica el estilo visual: usa una paleta de colores de 'noche americana' (azules profundos y sombras marcadas), fuentes Serif elegantes y mucho espacio en blanco para que el contenido respire." - Para un estilo moderno/videoclip: "Aplica un diseño tipo 'brutalismo web': tipografías grandes y pesadas, bordes negros marcados, colores saturados y un fondo con una sutil textura de grano de película de 16mm." - Etc.
3. Prompts de Ajuste Fino (La "Corrección de Color" y Detalle)
Stitch permite seleccionar un elemento y pedir cambios específicos. Por ejemplo - Sobre un botón: "Haz que este botón de 'Ver Trailer' sea circular, con un borde fino y que cambie a color rojo neón cuando pase el mouse por encima." - Sobre el espaciado: "Aumenta el 'aire' (padding) entre las secciones para que la navegación se sienta pausada y contemplativa, como un plano secuencia."
Entrega 00
Crea en Notion la página Trabajo Práctico 05 y debajo del título Ejemplo pegas el enlace del resultado del prompt (con los cambios de texto e imagen hechos para practicar).
00
Entrega 01
Introduces la temática y nombre de tu Proyecto Audiovisual (tipo, imágenes, colores, temática) Debajo del título Landing page pegas el enlace + defensa estética. El sitio debe tener ademas del inicio 2 secciones mas. Debe ser navegable
01
Reto del Cambio de Género (no vos, el documental)
3. Prompts de Ajuste Fino (La "Corrección de Color" y Detalle)
1. Termina la sección anterior: 2. Luego, solo mediante prompts estéticos, transforma esa misma página: de una de "Terror psicológico" a una de "Comedia romántica indie" (por ejemplo).
Entrega 02
Debajo del título Landing page (Cambio de Género) pegas el enlace + defensa estética.
02
Fin