Diapositivas
Diseño de presentación de producto
Un pitch de espacio de trabajo nativo para agentes en 3 diapositivas.
Ideas de diseño para
- Presentaciones de visión de productoIntroduce una idea de producto antes de explicar sus interfaces.
- Presentaciones conceptualesConecta una tesis amplia con una pantalla específica.
- Pitches de flujo de trabajo en equipoMuestra cómo el trabajo individual se amplía hacia operaciones compartidas.
Aspectos destacados de la presentación
- Tres cambios de escalaTransita desde una tesis del espacio de trabajo hasta un teléfono y una sala de control.
- Un teléfono junto a su explicaciónCombina el concepto de interfaz con tres puntos de apoyo breves.
- Controles de presentación visiblesLa presentación original incluye los controles de flechas, Auto y Full.
Vista previa del diseño de presentación de producto
1 / 3Una historia de producto en tres diapositivas
La presentación no sigue tres funcionalidades con tres capturas de pantalla casi idénticas. Cambia la escala del argumento: una tesis amplia sobre el espacio de trabajo, una interfaz móvil y luego una vista operativa más extensa. La diapositiva central es el eje. Sin ella, el salto de una afirmación abstracta a una sala de control densa le pediría al público que acepte el producto antes de ver un ejemplo manejable.
| Diapositiva | Contenido visible | Función narrativa |
|---|---|---|
| Tesis de apertura | Un titular, una vista previa del espacio de trabajo y la secuencia Prompt → Compose → Preview → Ship. | Nombrar el cambio propuesto y ofrecer al público un proceso breve que recordar. |
| Acompañante móvil | Una interfaz de teléfono junto a tres explicaciones del concepto. | Reducir el alcance a una sola pantalla para que la idea de producto sea más fácil de debatir. |
| Sala de control empresarial | Pistas de lanzamiento, traspasos de agentes, aprobaciones y una línea de tiempo de actividad. | Mostrar cómo la misma idea podría respaldar el trabajo coordinado en un equipo. |
Tres métricas y dos capas de navegación
El teléfono contiene tanto las pestañas Today / Agents / Exports cerca de la parte superior como la navegación Home / Files / Agents / Export en la parte inferior. Son dos niveles diferentes de interfaz, pero Agents aparece en ambos. Ese es un detalle útil para debatir en una presentación de producto: ¿la fila superior filtra la vista actual o lleva al usuario a otro destino?
No dejes que las etiquetas repetidas oculten el modelo de interacción
La fila inferior parece una navegación global de la aplicación; la fila superior se acerca más a pestañas de nivel de vista. La presentación no resuelve completamente su relación. Un refinamiento debería nombrar el alcance de cada capa —por ejemplo, un área global de Agents frente a un filtro para la actividad de la página actual— antes de añadir más pantallas.
Tres métricas describen tres cosas distintas
12 Active Artifacts es un recuento, 4× Review Velocity es una comparación y 86% Ready to Export es una proporción. Pueden compartir una fila visual, pero no pueden compartir una definición implícita. El recuento necesita un alcance, el multiplicador una línea base y el porcentaje un denominador. Ninguna de esas definiciones ausentes puede ser aportada únicamente por el tratamiento visual.
Cuatro tipos de información en la sala de control
La diapositiva final coloca cuatro tarjetas de contexto a la izquierda, un diagrama de enrutamiento de agentes en el centro, recuentos operativos a la derecha y la actividad reciente a lo largo de la parte inferior. No son widgets de panel intercambiables. Cada uno representa una relación diferente, y la presentación resulta más útil cuando el ponente explica esas diferencias.
| Estructura visible | Lo que representa | Lo que hay que explicar en el pitch |
|---|---|---|
| Brand, Legal, Localization y Assets | Cuatro conjuntos de restricciones o material de referencia. | El lugar donde el flujo de trabajo obtiene las reglas, no cuatro tareas consecutivas. |
| Briefs y Product Data hacia Agent Router | Entradas conectadas a un diagrama de orquestación. | Qué se desplaza entre los nodos y qué parte es únicamente conceptual. |
| 42 Queued, 11 Pending, 3 Risks, 7 Ready | Una instantánea del estado operativo. | Lo que incluye cada recuento; distintas etiquetas no los hacen totales comparables. |
| Layout, Brand QA, Locale y Export Activity | Agentes nombrados emparejados con acciones recientes. | Lo que ocurrió más recientemente, de forma separada de lo que aún requiere atención. |
Una referencia de presentación para demos de hackathon
Este es un ejemplo oficial del hackathon de OpenDesign, no una entrega de participante. Su estructura de tres diapositivas es una restricción útil para una demo: un argumento, una interfaz que inspeccionar y una explicación del flujo de trabajo más amplio. La densidad de la presentación debería aumentar solo después de que el público tenga un ejemplo concreto al que aferrarse.
Lo que demuestra la presentación
El artefacto proporcionado es una presentación HTML animada con tres diapositivas y controles de presentación. El acompañante móvil y la sala de control empresarial son conceptos dentro de esa presentación, no evidencia de aplicaciones en producción. Abrir la vista previa completa permite inspeccionar la presentación en sí; no conecta las interfaces a un flujo de trabajo en producción.
Cómo crear un diseño de presentación de producto en OpenDesign
Define tres diapositivas con funciones distintas
Comienza con la pregunta central del público y asigna a cada diapositiva un propósito independiente. Mantén el argumento de apertura lo suficientemente breve como para explicarlo antes de mostrar la interfaz.
Prompt sugeridoCrea un diseño de presentación de producto en tres diapositivas para un espacio de trabajo de diseño asistido por agentes. La primera diapositiva presenta la idea y un flujo de trabajo de cuatro etapas. La segunda combina un concepto de revisión móvil con tres explicaciones breves. La tercera muestra una sala de control de equipo con aprobaciones y actividad reciente. Usa datos de muestra claramente etiquetados, composiciones estáticas legibles y controles de diapositiva manuales. No insinúes que las interfaces conceptuales son productos en producción ni inventes resultados de rendimiento.
Refina la pantalla y su explicación al mismo tiempo
Pide a OpenDesign que haga legibles las etiquetas del teléfono manteniendo el argumento de apoyo fuera del dispositivo. Elimina cualquier frase que solo repita una etiqueta. Revisa la presentación al tamaño en que vas a presentar realmente, no solo en una captura de pantalla de resolución completa.
Revisa la presentación sin reproducción automática
Revisa las tres diapositivas con el movimiento detenido. Cada una debe conservar su titular, el elemento visual principal y la explicación de apoyo. Luego prueba la navegación manual para que el ponente pueda pausar ante una pregunta sin perder el hilo de la historia.
Exportar y obtener un enlace para compartir
Exporta tu diseño terminado y luego usa Compartir en OpenDesign para obtener un enlace. Abre el enlace en una ventana del navegador independiente y comprueba que la versión prevista y sus recursos estén disponibles antes de enviarlo.
Diseño de sitio web de empleo
Un estudio de empleo de Kimi construido a partir de ocho escenas lunares, con transiciones vinculadas al desplazamiento y un proceso de solicitud ilustrado.
Sitio web
Diseño de portafolio creativo
El portafolio ficticio de Maya Rowan conecta proyectos, métodos de trabajo y notas.
Sitio web
Diseño de Panel Personal
Life System coloca una puntuación semanal, métricas de mapa corporal, ritmos diarios y cinco experimentos en un panel de escritorio. Explora el diseño en detalle.
Aplicación de escritorio
Diseño de sitio web de currículum
El currículum ficticio de Tom Goodman combina experiencia con gráficos de capacidades y trabajos seleccionados. Explora su orden de lectura en dos columnas, tarjetas de trabajo compactas y una maquetación de impresión independiente.
Sitio web