Una web para tu SaaS que enseña el producto
¿Cómo es por dentro? La web de cualquier software tiene que contestarlo antes de que alguien empiece una prueba. Este kit contesta con tu producto: tus pantallas en un portátil y en móviles, en 3D.
Muchas webs de producto responden con ilustraciones, formas abstractas o un vídeo tras un botón de play. Aquí la imagen es la interfaz: tus capturas, con sus colores, en dispositivos sin logos, iluminadas y en movimiento. Quien entra ve lo que va a usar.
Al final llegan tus planes, con el precio y lo que incluye cada uno, y cada botón va adonde empieza ese plan: tu registro, un enlace de cobro de Stripe, una página para hablar con ventas. La web no crea cuentas ni cobra: eso sigue en tu producto.
Qué muestra tu web
Tu producto, en el portátil
La apertura pone tu pantalla de escritorio en un portátil de 14 pulgadas, con un móvil delante girándose hacia tu vista móvil. Es lo primero que se ve; el portátil se retira al bajar.
Cuatro vistas, una tras otra
Luego, cuatro vistas de tu producto en móviles dispuestos en arco: inicio, lista, resumen y detalle. Mientras la visita baja, el arco gira y cada vista pasa por delante a su turno.
Lo que entra en tu producto
Elementos cortos que eliges tú — contactos nuevos, incidencias, facturas, lo que reciba tu producto — entran desde los bordes y aterrizan en tu lista vacía como sus filas, una tras otra, hasta llenarla.
Un resumen y un primer plano
Detrás de tu vista de resumen, bloques de color se levantan en una cuadrícula como de calendario. Después, una sola vista de detalle, con el fondo apagándose alrededor. Cada sección lleva tu título y tu texto.
Planes que se comparan de un vistazo
Por último, tus planes, en hasta cuatro tarjetas y con los móviles a un lado: nombre, precio, la unidad — al mes, por usuario —, qué incluye y su propio botón. Puedes destacar el que recomiendas.
Ten esto a mano
- Una captura de escritorio a 1440 × 900: la vista que mejor explica tu producto, con datos de ejemplo
- Cinco vistas a tamaño móvil (390 × 844), de tu versión móvil o tu app: inicio, una lista (llena y vacía), una vista de resumen y otra de detalle
- Unas cuantas cosas que recibe tu producto (hasta diez), en pocas palabras
- De uno a cuatro planes, con nombre, precio, unidad, qué incluye y el texto y el enlace de su botón
- Tu página de registro o de prueba, para el botón principal
- El nombre y el eslogan del producto, y la frase para debajo del titular
- Los colores de marca en hexadecimal: fondo y tres de acento
Conviene saber
La pantalla de escritorio que vende
El portátil lleva una sola pantalla: elige la vista en la que un cliente nuevo vería por qué darse de alta, a media tarea, no los ajustes ni un estado vacío. Llénala de datos inventados, nunca de un cliente real.
Planes fáciles de comparar
Mantén el mismo orden de líneas en todos los planes, empieza los mayores con «Todo lo de…» y di exactamente qué cubre el precio: por usuario, al mes, al año. Destaca el que elegirías para la mayoría.
La frase bajo el titular trabaja doble
El texto bajo tu titular es también la descripción de la página para los buscadores, la que Google suele enseñar bajo tu enlace. Di qué hace el producto y para quién, con palabras normales.
Preguntas
- Nuestro producto se usa sobre todo en el ordenador. ¿Se ve en el kit?
- Tu pantalla de escritorio abre la página, en el portátil detrás del móvil. Luego la historia se cuenta en móviles, que también necesitan pantallas: hasta cinco, y un móvil sin la suya muestra otra de las tuyas. Sirve la versión móvil de tu app web; sin ella, el kit enseñará menos de tu producto de lo que querrías.
- ¿Gestiona registros, pruebas gratuitas o cobros?
- No. Es la web comercial: el botón principal abre tu registro, donde empieza la prueba; el de cada plan, adonde se contrata — un enlace de Stripe, tu propio checkout, una página de contacto. Cuentas, pruebas y facturas siguen en tu producto.
- ¿Podemos poner precio por usuario y un plan gratis?
- Sí. Cada plan tiene su precio y una línea libre para la unidad — «por usuario / mes», «al mes, pago anual» —, además de la lista de lo que incluye. Un plan gratis es un plan con precio cero y el botón apuntando a tu registro.
- ¿Cuánto nos cuesta mantenerla?
- 500 € por el kit, una sola vez; después Promti no cobra nada. El plan gratis de Cloudflare aloja una web estática como esta, así que el único gasto anual es el dominio, entre 10 y 15 €. Cuando el botón de un plan va a Stripe, Stripe se queda una pequeña parte de cada pago; Promti, nada de tus suscripciones.
- ¿Puede llevar documentación, blog o changelog?
- Dentro del kit, no: es una sola página, más la legal y una 404. Si tu documentación o tu blog viven fuera, caben en los enlaces del pie, con el nombre que elijas. Y como son archivos HTML, CSS y JS corrientes, un desarrollador puede añadir páginas.