Sobre esta plantilla
Kova Mobile App conserva el rastro de sus decisiones: el brief que hay detrás de flujo de onboarding ocupa 3.523 caracteres. El titular de la propia página dice “Turn your ideas into cinematic scenes”, y la composición se construye alrededor de esas palabras exactas. El esquema de color es blanco #FFFFFF de base, negro #000000 para la tipografía y índigo #2E1065 para los acentos, y la página está compuesta en Helvetica Neue. Se entrega como un único componente, así que el conjunto de flujo de onboarding se puede trasladar a un proyecto sin traspaso de diseño. El movimiento se limita a transiciones de 800ms y un vídeo en bucle de fondo. Toma prestada la estructura, no el tema: las cifras y el orden de flujo de onboarding pasan a tu marca sin cambios.
Pensado para
- Este diseño de flujo de onboarding va dirigido a equipos que ya conocen un único componente y solo necesitan dejar un único componente por escrito.
- Este diseño de flujo de onboarding está pensado para agencias que necesitan que el marco de 1252x864 sobreviva a tres rondas de cambios del cliente.
- Este diseño de flujo de onboarding sirve a diseñadores que tienen que entregar una implementación en un único componente a un desarrollador y quieren el movimiento por escrito.
Qué incluye
- Los enlaces colapsan a un ancho. La fila gasta el contraste en un solo punto: la acción #2E1065, con la marca y los enlaces retenidos sobre el color del texto. Los enlaces se componen a un tamaño menor que la marca, y la acción en #2E1065 es el único elemento de la barra con peso. Mantén el número de enlaces en cuatro o cinco; la fila está dimensionada para eso.
- Medido, no estimado a ojo. En la maquetación nada queda a la intuición: el brief cita secciones de 100vh, pasos de espaciado de 24px y transiciones de 800ms y el montaje tiene que dar esos valores. Los valores se citan del prompt capturado y no se deducen, por eso sobreviven a un nuevo render. Las cifras son el diseño; el resto es disposición.
- Clip sin márgenes tras el tipo. El vídeo de 1252x864 se reproduce en bucle durante 8s detrás del texto, silenciado y en línea, sin ninguna capa de tinte entre ambos. El bucle es lo bastante corto (8s) para que el ojo lo lea como textura y no como una línea de tiempo.
- Pesos nombrados por papel. Aquí el tipo es el sistema de estilo: Helvetica Neue al tamaño display, la misma fuente en toda la interfaz y ningún segundo color de acento haciendo el trabajo. Los pesos se especifican por papel, así que la jerarquía no depende de la improvisación al montar.
Movimiento e interacción
Un lienzo vivo en el centro
Lo visual se produce en tiempo de ejecución (un lienzo WebGL) y no se carga como imagen fija, así que el marco de 1252x864 tiene un recurso menos. La composición tiene que aguantar que el render falle, porque nada más llena ese espacio.
Tiempos cortos y parejos
El presupuesto de animación es pequeño y explícito: 800ms, aplicado a cambios de estado y no a entradas. Nada espera a una posición de scroll, así que la página responde en cuanto la tocas.
Cómo ordena Kova Mobile App la primera lectura
Una página así suele enterrar la acción bajo una cuadrícula de funciones. Esta coloca navegación, el titular, la fila de cifras y el clip de fondo en una secuencia fija, con la acción dentro de la primera pantalla y no después de tres pantallas de scroll. Quien busca SaaS recibe la oferta antes que las opciones.
Por qué esta composición funciona para SaaS
Si tu primera pantalla explica hoy tres cosas, esta es la versión que explica una. Aquí navegación, el titular, la fila de cifras y el clip de fondo se colocan en orden de lectura, con secciones de 100vh y pasos de espaciado de 24px marcando el ritmo. Da a quien lee páginas de SaaS el camino más corto y honesto hasta la oferta.
Los tiempos detrás de flujo de onboarding
Los tiempos son explícitos: transiciones de 800ms, un bucle de 8s y estados hover y pulsados, todo escrito en el brief y no ajustado a ojo. Nada se anima por gusto en este tipo de flujo de onboarding.
Preguntas frecuentes
¿Puedo reconstruir este diseño de flujo de onboarding de Kova Mobile App con otro stack?
Kova Mobile App se construyó en un único componente, y la ficha lo dice por procedencia. El brief describe posiciones, tamaños y tiempos, así que se puede reconstruir en cualquier framework capaz de componer tipografía y colocar elementos.
¿El prompt de Kova Mobile App es una especificación cerrada o un punto de partida?
Es un brief de construcción, no una descripción de ambiente: fija la escala tipográfica, el espaciado y los valores de movimiento en 1252x864. En ningún punto la imagen renderizada funciona como fuente de la verdad.
¿De dónde sale el diseño de Kova Mobile App?
El brief es una descripción, no una licencia para redistribuir los recursos de otra persona. Conserva la estructura y los números, sustituye los medios y las marcas, y acredita la procedencia si un cliente pregunta de dónde sale la maqueta. La captura de la referencia es de 1252x864.
