Sitio web
Diseño web de precios SaaS
El diseño web de precios SaaS convierte la elección de plan en un recorrido de compra legible, con opciones de facturación, detalles de planes, filas de comparación y preguntas concretas.
Casos de uso de páginas de precios
- Diseño de páginas de preciosPresenta los planes sin ocultar detalles importantes de la compra
- Marketing de productos SaaSTraduce las diferencias del servicio en secciones web fáciles de escanear
- Flujos de decisión de compraAyuda a los visitantes a comparar costes, límites y soporte
- Diseño de comparación de funcionesOrganiza las capacidades compartidas y las específicas de cada plan
Aspectos destacados de la comparación de planes
- Selector de facturaciónLas opciones mensual y anual aparecen antes de elegir plan
- Diseño de tres planesSolo, Team y Enterprise usan estructuras de plan coherentes
- Tabla comparativaLas filas muestran diferencias que las tarjetas no pueden mostrar
- Preguntas concretasLas dudas sobre precios se convierten en desplegables nativos
De las etiquetas de facturación a las preguntas frecuentes
1 / 3
Diseño web de precios SaaS
Este ejemplo oficial incluido en OpenDesign presenta una página de precios y decisión de compra SaaS de Filebase. Su encabezado principal, “One flat rate. No throttling.”, establece una propuesta de precios directa antes de que el visitante vea los detalles de los planes.
La línea de apoyo, “Start free. Pick a paid tier the day you outgrow it. Switch yearly billing for two months off.”, da a la página una progresión: empezar, mejorar de plan cuando haga falta y valorar la facturación anual. Presenta la página como un camino de decisión y no como un catálogo de funciones aisladas.
El diseño usa un área de contenido centrada con un ancho máximo especificado de 1080px. Esa restricción mantiene el titular, el control de facturación, las tarjetas de planes, la tabla comparativa y las preguntas dentro de un mismo sistema horizontal legible, aunque limita cuánto detalle puede caber junto a cada plan.
Primero la decisión
El encabezado y el control de facturación estático aparecen antes de la información de los planes. Monthly tiene el estilo de selección inicial y Yearly se muestra como alternativa; el código fuente no implementa ningún cambio de precio.
Papel de cada plan
Solo se plantea para particulares, Team para grupos de hasta 50 personas y Enterprise mediante SSO, claves locales (on-prem) y un SLA del 99.99%.
Cómo elegir entre planes SaaS
Las tarjetas de planes están pensadas para visitantes que deben ajustar su contexto de trabajo a un nivel de compra. Solo muestra “$8 / month”, 1 TB de almacenamiento, dos dispositivos y soporte por correo. Team cambia la unidad de precio a “$14 / seat / month” y añade almacenamiento compartido, roles, información de auditoría y soporte prioritario.
Las tarjetas repiten un patrón útil: descripción del público, precio indicado o modalidad a medida, lista de capacidades y acción. Esa coherencia facilita comparar los planes, pero también implica una contrapartida: las etiquetas largas compiten con la zona de acción, sobre todo en la tarjeta Team.
Team lleva la marca “RECOMMENDED”, un contorno naranja y un botón relleno “Choose Team”. El énfasis propone una ruta preferida dentro del diseño, mientras que las acciones neutras de Solo y Enterprise conservan las alternativas. La etiqueta es una recomendación visual, no una prueba de que el plan rinda mejor.
Almacenamiento individual
Solo destaca un precio mensual fijo, la cantidad de almacenamiento, el límite de dispositivos y el soporte por correo.
Operaciones de equipo
Team combina facturación por puesto con almacenamiento compartido, carpetas compartidas, roles, registro de auditoría y analítica de uso.
Requisitos empresariales
Enterprise sustituye el precio listado por Custom y empieza con SSO, aprovisionamiento, claves de cifrado y soporte dedicado.
Comparación de planes y estructura de la página
La secuencia de la página es explícita: Solo, Team, Enterprise, Plan comparison y después Common questions. La sección comparativa repite los nombres de los planes como columnas en lugar de obligar al visitante a recordar las tarjetas mientras recorre las filas.
La tabla muestra primero las capacidades compartidas. La sincronización a nivel de bloque y el cifrado de extremo a extremo aparecen con marca en los tres planes, mientras que las carpetas compartidas empiezan en Team, SAML / SCIM aparece solo en Enterprise y el registro de auditoría empieza en Team. Este orden separa las capacidades básicas de las diferencias propias de cada mejora de plan.
La fila SLA usa valores distintos para Team y Enterprise, y la fila Support cambia de Email a Priority y a Dedicated CSM. Esas filas demuestran por qué existe la tabla: las tarjetas de precios resumen un plan, pero una tabla expone la dimensión exacta en la que los planes se diferencian.
| Función | Solo | Team | Enterprise |
|---|---|---|---|
| Sincronización a nivel de bloque | Sí | Sí | Sí |
| Cifrado de extremo a extremo | Sí | Sí | Sí |
| Carpetas compartidas | No | Sí | Sí |
| SAML / SCIM | No | No | Sí |
| Registro de auditoría | No | Sí | Sí |
| SLA | No | 99.9% | 99.99% |
| Soporte | Correo | Prioritario | CSM dedicado |
Preguntas frecuentes y límites de las capacidades
La sección final se titula “Common questions” y contiene tres preguntas visibles: “Can I change tiers mid-month?”, “Is there a free tier?” y “How does seat-based billing work for Team?”. Su orden sigue las dudas probables de compra: cambiar de plan, coste de entrada y, después, el modelo de facturación de la opción de equipo.
Cada pregunta usa el patrón nativo de desplegable details/summary del navegador y puede expandirse localmente. Los botones Monthly, Yearly, Choose Solo, Choose Team y Talk to sales no tienen controladores de eventos en este código fuente: ni cambian los precios ni abren flujos de compra o de ventas. La página no establece servicios conectados de facturación, cuentas, ventas o soporte.
Los nombres, cifras, afirmaciones sobre el producto y contenidos de la comparación son ilustrativos salvo verificación independiente. Las capturas muestran el diseño visual creado y los datos de muestra indicados; no prueban precios reales, límites operativos, respuestas de servicios externos ni el proceso de generación original.
Cómo crear un diseño web de precios SaaS en OpenDesign
Define la secuencia de compra
Empieza con una propuesta de precios breve, una frase de apoyo y una opción de facturación. Coloca el modo de facturación antes de las tarjetas de planes para que el visitante lea todos los precios en el mismo contexto.
Prompt sugeridoCrea un diseño web de precios SaaS para un producto de almacenamiento de archivos con un área de contenido centrada de 1080px. Usa el encabezado “One flat rate. No throttling.”, un control de facturación estático con Monthly y “Yearly · save 17%”, y tres planes llamados Solo, Team y Enterprise. Marca los precios y las promesas del producto como ilustrativos. Mantén los botones de compra como ejemplos sin conexión y usa details/summary nativo para desplegar las preguntas frecuentes; no impliques un cambio de precios implementado, facturación real ni datos operativos verificados.
Crea tarjetas de planes comparables
Da a cada plan el mismo ritmo de información: público, estado del precio, capacidades y acción. Mantén la recomendación de Team visualmente diferenciada, pero conserva caminos neutros hacia Solo y Enterprise. Comprueba que las etiquetas de funciones más largas de Team no desplacen la acción.
Añade evidencia para decidir
Después de las tarjetas, incluye una tabla comparativa que distinga las funciones compartidas de las exclusivas de planes superiores. Termina con tres preguntas breves sobre cambios de plan, acceso gratuito y facturación por puesto. Mantén las interacciones propuestas dentro del diseño y verifica por separado todas las afirmaciones sobre el producto.
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 web para estudios de diseño de IA
El diseño web para estudios de diseño de IA de OpenDesign convierte el concepto de un estudio local-first en una landing page editorial que facilita consultar habilidades, experimentos y método.
Sitio web
Diseño de sitios web de infraestructura de IA
Un concepto de landing page de infraestructura de IA de estilo suave, con métricas de ejecución de ejemplo, tarjetas de funciones anidadas, movimiento sutil y una única invitación comercial.
Sitio web
Diseño de sitio web para recorridos nocturnos por Bianjing
Un recorrido nocturno interactivo por una Bianjing imaginada de la era Song, que combina una ciudad fluvial persistente, poesía, faroles y un ritmo de capítulos multilingüe.
Sitio web
Diseño de sitio web de revista brutalista
Diseño de sitio web de revista brutalista convierte una edición con forma de publicación impresa en un sistema web de lectura legible, combinando tipografía contundente con una estructura editorial medida.
Sitio web