En algunos sitios web donde se ofrecen suscripciones a servicios se añaden las tablas de precios. Estas útiles tablas permiten organizar las características y el soporte de cada plan, asimismo los usuarios pueden comparar lado a lado cada plan para que puedan seleccionar más fácilmente el tipo de suscripción que les conviene.
Para estas tablas de precios se emplea tanto HTML como CSS para poder darle un aspecto único que vaya acorde a los colores y el estilo del sitio. También se puede emplear JavaScript para incluir animaciones o ciertos efectos especiales.
En este artículo te mostramos algunos ejemplos de tablas de precio de Codepen que te pueden servir como inspiración para crear tu propia tabla de precios con un buen diseño.
Responsive Flip Pricing Table de Shane Heyns
See the Pen Responsive Flip Pricing Table by Shane Heyns (@shaneheyns) on CodePen.0
Esta tabla de precios posee un diseño flat y se hacen uso colores que hacen un buen contraste. Se emplea el verde para hacer que el diseño luzca más moderno y se complementa con un azul oscuro.
Se destaca uno de los planes al invertir los colores usuales: se emplea verde para el título y precio y azul para el icono de dólares y la indicación de que el pago es mensual. Adicionalmente se ha destacado el plan al colocar un borde en el recuadro.
La particularidad de esta tabla es que puedes seleccionar entre ver el precio de planes mensuales y anuales. Para cambiar entre estas opciones se utiliza un diseño de un interruptor.
#1464 – Pricing Table de LittleSnippets.net
See the Pen #1464 – Pricing Table by LittleSnippets.net (@littlesnippets) on CodePen.0
Esta tabla de precios utiliza colores oscuros. Se destaca el nombre de cada plan y el precio no sólo por tamaño de la tipografía, sino también porque se ha colocado sobre un listón azul que destaca del resto de la tabla. Este es el mismo color que se emplea en los botones de llamada a la acción para cada plan.
Se destaca uno de los planes al hacer la caja que encierra todas sus características ligeramente más grande. No sólo la caja se ve más amplia, sino que le da cierto efecto 3D al colocarla en primer plano.
Flat Pricing Table de Andy Tran
See the Pen Flat Pricing Table by Andy Tran (@andytran) on CodePen.0
Aunque esta tabla de precios contiene un solo plan es bastante interactiva. En primer lugar, es desplegable de modo que para ver todas las características debemos pinchar sobre el nombre del plan. Asimismo, se ha colocado un icono sobre este nombre y posee una simple animación: el icono se hace expande y se encoge ligeramente todo el tiempo.
Una vez que se pincha sobre el nombre del plan tenemos acceso al precio y las características. Se hace uso de dos tonos de grises que se intercalan en cada línea de texto. También se utilizan dos tonos de azul: uno como fondo y el otro como color de acento para destacar el botón CTA.
Pricing Table de Daniel Riemer
See the Pen Pricing Table by Daniel Riemer (@zitrusfrisch) on CodePen.0
Esta tabla de precios tiene un diseño un tanto distinto: se ha añadido una columna para nombrar y describir características, mientras que en las filas correspondientes a los planes se especifica el nivel de funcionalidad o el tipo de característica. Es de utilidad cuando las funciones del servicio son variadas y se ofrecen varios niveles de soporte.
Se destaca uno de los planes al agrandar el recuadro donde se encuentra este plan, además se encierra con una línea de color celeste que se utiliza en el nombre del plan y los botones CTA. También se emplean dos colores para intercalar entre las filas. De esta manera, es más sencillo distinguir y leer ciertas filas que sean de interés.
Pricing Tables de Gerta Xhepi
See the Pen Pricing Tables by Gerta Xhepi (@xhepigerta) on CodePen.0
Esta tabla de precios también hace uso de colores oscuros, pero solo como acento pues en el cuerpo de las tablas se emplea blanco. El precio de cada plan se destaca pues se ha utilizado un fondo púrpura que contiene algunas decoraciones semicirculares. Es decoraciones se asemejan a nubes y se mueven ligeramente si el cursor se posa sobre ellas.
Se destaca el plan del medio al hacer la caja que lo contiene ligeramente más grande. Para los botones CTA se ha utilizado negro, aunque hubiera sido preferible utilizar el mismo púrpura que se aprecia en el fondo para los títulos.
Bootstrap Pricing Table de Sahar Ali Raza
See the Pen Bootstrap Pricing Table by Sahar Ali Raza (@mrsahar) on CodePen.0
Esta tabla de precios utiliza tonos grises y un tono verde para destacar algunos elementos, como el plan preferido o el más popular y los botones CTA. Se distingue tanto el nombre del plan como el precio en cada cuadro, pero en el plan preferido se emplea un fondo verde en el nombre del plan y en el botón CTA, mientras que en los otros cuadros podemos apreciar un botón fantasma que posee este mismo color.
Posee efectos cuando el cursor se posa sobre el nombre de los planes cambia de color el fondo, este mismo efecto se aplica cuando el cursor se coloca en los botones CTA y cuando se marcan las características.
Practice with Corwin Harrel’s Pricing Table de MadeleineLe
See the Pen Practice with Corwin Harrel’s Pricing Table by MadeleineLe (@madeleinele18) on CodePen.0
Esta moderna tabla de precios destaca el plan popular mediante el color celeste: todo el fondo del cuadro posee una gradiente de este color. Para los otros planes se emplea blanco, pero se mantiene la paleta de colores coherente pues se emplea celeste en los nombres de los planes y botones de llamada a la acción.
No sólo el uso de gradientes hace que esta tabla se vea moderna, sino también la tipografía empleada. Es interesante como se destaca el precio por medio del tamaño en cada plan.
Pricing Table de kichichan
See the Pen Pricing Table ( InVision + Bootstrap 3 ) by kichichan (@kristalacida) on CodePen.0
Esta tabla de precios minimalista posee 4 recuadros, en cada uno de ellas se encuentra el nombre y precio del plan, así como las características. En este caso se ha añadido solo una de ellas.
Se utiliza un tono grisáceo en la fuente y también en la línea que encierra cada recuadro. Se destacan ciertas palabras por el uso de mayúsculas, negritas y el puntaje. Si el cursor se posa sobre algún plan, tanto el nombre como la línea que encierra el recuadro se vuelven de un color magenta, un efecto interesante y que ayuda a informar al usuario sobre el plan que se está seleccionando.
Pricing Tables de Eric Thayer
See the Pen Pricing Tables by Eric Thayer (@ericthayer) on CodePen.0
Esta tabla de precios tiene un diseño sencillo, pero interesante. En todas las columnas se colocan las mismas características, pero en algunos casos se emplea un tono gris en vez del negro usual. Esta es una pista visual que indica que dichas características no se encuentran disponibles en dicho plan.
Lo que más destaca es el precio, por el tamaño y uso del color de acento. También se coloca al lado del precio la palabra “Monthly”, pero esta encerrada en un recuadro. Es un recurso bastante interesante que permite enfocarse en esa palabra, sin que el precio pierda protagonismo. Por último, se destaca uno de los planes mediante el color: se emplea celeste como fondo en vez de gris y se cambia de color el botón CTA para que se distinga del resto. Asimismo, el recuadro que encierra este plan es ligeramente más grande que el resto.
Price de catcod
See the Pen Price by catcod (@catcode) on CodePen.0
Esta tabla de precios es sencilla y hace uso de 4 colores de acento, uno por cada plan. Estos colores se utilizan en el icono decorativo, el nombre del plan, el precio y el botón CTA. La característica más notoria de esta tabla es que el precio no se encuentra directamente bajo el nombre del plan como es usual, sino bajo la lista de características.
Aunque se hacen uso de 4 colores, se podría destacar uno de los planes por el tamaño o el color de línea que encierra el recuadro. La fuente seleccionada y el color gris que se utiliza para ella permite que el diseño luzca simple, también es de ayuda los espacios en blanco que se han empleado.
En conclusión…
Existe ciertas pautas para crear tablas de precio efectivas, como diferentes maneras de organizarlas según el volumen de información con el que cuentes y los datos que quieras destacar. Analiza estas dos características para que identifiques qué tipo de tabla necesitas. Luego, puedes tomar como ejemplo algunas de las tablas de precio de Codepen que hemos mencionado en este artículo.
