Las tablas comparativa de precios se emplean mayormente en sitios web de empresas que ofrecen servicios o productos. De manera usual, ofrecen planes para cada tipo de usuario que visita el sitio, que podrían ser personas que necesitan un plan sencillo o compañías en busca de un producto más completo. Por esta razón, las tablas de precios se consideran necesarias en muchos sitios pues ofrecen información puntual y de gran interés para los usuarios.
Si tú también estás desarrollado un proyecto donde debes crear una tabla de precios y no sabes cómo comenzar, tal vez te puedas encontrar inspiración en alguna de las tablas de precios que listamos a continuación.
Pricing Page de Andree Blixt
Esta es una tabla de precios bastante minimalista que sólo contiene la duración de la suscripción, el precio con un puntaje mayor pues es la pieza de información más relevante para el cliente y la opción para seleccionar el plan. Si se elige alguno de ellos vemos que en la parte inferior aparece un visto bueno al lado de la palabra “Purchase”.
No es muy común ver este tipo de tablas, ya que la mayoría de empresas ofrecen diferentes planes. En este caso, el plan es el mismo y sólo debes elegir la cantidad por la que deseas contar con el servicio.
Existe un buen contraste entre el color azul y el amarillo empleado para resaltar la opción de “Purchase”, sin mencionar que luce muy profesional.
Avantgarde – Pricing Table de Claudiu Fagadar
Esta tabla de precios diferencia cada plan por el color empleado como fondo en ciertas partes de cada tabla. Tanto el nombre del plan como el precio tienen protagonismo. Bajo este título, vemos la lista de características que posee cada plan y el botón de llamada a la acción para elegir un plan.
Lo que realmente diferencia esta tabla de precios de otras es que se han empleado figuras geométricas como fondo en los botones de cada plan, esta figuras también destacan el precio y el nombre de cada plan.
Pricing – Day 030 #dailyui de Ennio Dybeli
Esta tabla de precios coloca una ilustración representativa de cada plan. El más simple tiene un avión de papel, le sigue un avión y por último un cohete. Obviamente, se hace una comparación entre las características del plan y los tres aparatos voladores.
La ilustración es lineal y destaca el uso del color celeste en todo el diseño. Se puede ver en el fondo, en las fuentes e incluso como formas decorativas bajo las ilustraciones.
Pricing Table de Erigon
Esta tabla comparativa destaca el precio de cada plan encerrándolo en un círculo. Los botones de inscripción que acompañan cada plan son los populares “botones fantasma” pues no poseen relleno. Por otro lado, se ha destacado el plan favorito o el más popular haciendo uso de dos colores, uno de ellos se ha colocado como fondo en el título del plan y el botón de llamada a la acción, mientras que el otro está como fondo en el círculo que encierra el precio. De esta manera, la atención se sigue manteniendo en el precio.
El diseñador ha hecho variaciones de colores, en total tenemos tres propuestas que presentan el mismo diseño, pero diferentes colores. Cabe destacar que los colores que se emplean para destacar los planes son los mismos colores principales que se han usado en la gradiente de fondo.
Handsome Price Table PSD Freebie de Vladimir Kudinov
Estas tablas presentan una textura como fondo, sólo en la parte donde aparece el nombre de cada plan. Se logra un gran diseño haciendo uso de grises, se hace una buena diferenciación en las secciones que conforman cada tabla. A diferencia de los ejemplos mostrados previamente, estas tablas presenta una etiqueta en vez de un botón de suscripción.
Se destaca el plan popular no sólo por el color que se aplica en las textura de fondo que decora el título del plan, sino también se coloca una flecha y se explica que ese es el precio que se determinó mientras el representante de ventas estaba de vacaciones. Esto indica que el precio es una ganga y que los visitantes deberían aprovechar tal oportunidad.
Pricing Table de Alex Botic
Esta tabla presenta una foto con color de filtro que sirve como fondo sólo en la zona donde se encuentra el tipo de plan. Se destaca el nombre de plan al encerrarlo en un botón de puntas redondeadas. Este botón posee como fondo una gradiente celeste y verde, ambos colores utilizados como fondo y de acento para las fuentes.
Se destaca el plan popular al agrandar la tarjeta en donde se coloca la información del propio plan. Además, para que exista un equilibrio se ha colocado al medio. El botón es fantasma en dos de las tablas, sólo la del plan que se destaca posee un botón con color de fondo.
Pricing Table de Muslim Mahin
Esta tabla hace uso de dos colores principales que generan un gran contraste entre sí. Se emplea una fuente sencilla y de color blanco para maximizar el contraste con el fondo de color gris oscuro. Como color de acento se emplea un magenta que se aplica a los botones de llamada a la acción de cada plan. Además, para destacar el plan más popular, se encierra el mismo en un recuadro usando una línea de color magenta. De esta manera, aunque se utilice el mismo color y puntaje en la fuente, el plan que se encuentra en el medio llama más la atención de los visitantes.
Daily UI Challenge #30 – Pricing de Alexander Cafa
Esta tabla de precios posee iconos minimalistas. Se hace uso de una combinación de colores monocromática que vemos reflejada en varios tonos azules en las líneas para los iconos, las fuentes y el color ligeramente más oscuro que se ha empleado como relleno para los iconos. Cada icono está relacionado al nombre del plan y ayuda a reforzar el mensaje. Además, permite que los visitantes entiendan y elijan más fácilmente el plan más adecuado según el uso que piensan darle al servicio.
Pricing Table Concept de Greg Lapin
En esta tabla se añaden iconos que se relacionan con el nombre que se la puesto a cada plan, pero se hace destacar el precio al encerrarlo en un recuadro. Se destaca el plan popular al invertir los colores del precio y el botón de llamada a la acción.
Como fondo se emplea un color salmón, las fuentes y los iconos lineales son de color blanco y se genera un buen contraste entre ambos colores elegidos.
Yet Another Pricing Table de Hasin Hayder
En estas tablas sólo se emplean dos colores principales: blanco y negro. El fondo es de color blanco y las fuentes empleadas de color negro. Se han destacado los precios modificando el puntaje de la fuente y se han invertido los colores en el plan popular para hacerlo más notorio que los otros planes, de forma que en este plan el fondo es negro y las fuentes blancas. Adicionalmente, se añade una etiqueta de color rojo que lo indica como el mejor plan disponible.
Pricing Table UI for Subscription de Nathan Alspaugh
En esta tabla se emplean dos colores que generan un buen contraste entre sí: naranja y negro. No sólo se ha colocado el nombre del plan, sino que bajo éste se ha colocado una ilustración lineal que hace referencia al propio nombre. Debajo de esta ilustración vemos el precio y la lista de características.
Se destaca el plan del centro como el más popular pues el recuadro que lo encierra es ligeramente más grande que el de los otros planes que se encuentran a su lado. Todas las cajas poseen una sombra paralela.
Pricing Table UI de Stephanie Nakamae
Esta tablas poseen un diseño minimalista que se refleja en la combinación de colores y la fuente elegida. Como muchos otros ejemplos mostrados previamente, se ha decidido destacar el precio en cada tabla. El botón de llamada a la acción posee un fondo de gradiente que lo hace destacar aún más del resto de la composición.
Se destaca el plan popular por medio del tamaño, ya que la caja que encierra la información del plan es ligeramente más grande que las que se encuentran a su lado. Adicionalmente, se le ha colocado una etiqueta circular que lo señala como el plan más conveniente.
Responsive Pricing Table CSS3 PSD and HTML de Abid Soufiane
Para estas tablas se ha decidido colocar la lista de características a un lado y señalar las que posee cada plan por medio de símbolos conocidos. Se hace uso de dos colores principales: gris y púrpura que se intercalan en las tablas de precios línea a línea. También se hace uso de iconos sencillos para reforzar el nombre de cada plan y se destaca el precio mediante el tamaño (se coloca a un puntaje mayor).
Flat style pricing table de Dani B
Al igual que el ejemplo anterior, para esta tabla también se ha decidido colocar la lista de características a un lado y marcarlas según la disponibilidad en cada plan. Se destaca tanto el nombre como el precio del plan pues ambos han sido encerrados en figuras geométricas. Además, se puede presenciar un ligero cambio de color en cada plan donde se transiciona de un color claro a uno oscuro.
El diseñador ha creado 4 propuestas de colores para estas tablas: azul, naranja, verde y rojo.
En conclusión…
Colocar el precio y el botón de llamada a la acción es usual en las tablas de precios. Pero encontramos algunas tablas que no colocan nombre o las planes o la lista de características de cada uno de ellos. Si se han obviado estos datos es porque no son necesarios realmente, pero esta condición varía de proyecto en proyecto. Te recomendamos analizar seriamente bajo que categoría se encuentra tu tabla de precio para que puedas incluir sólo la información más relevante en ella, tal como hemos visto en los ejemplos mostrados en este artículo.
