Uso de Botones Ghost en el diseño de Páginas Web

Botones Ghost

El diseño gráfico web evoluciona y como buenos diseñadores tenemos que enterarnos hacia donde van los tiros. En este artículo del blog de Coco School, hablaremos del diseño de botones web estilo Ghost. Un tipo de botón que queda muy bien en los diseños actuales web. Vamos para allá…

¿Qué son los Botones Ghost?

Los Ghost Button o Botones Fantasma es un diseño de botón (clicable o no clicable) para la web que consiste en un cuadro transparente donde se ve el fondo de la imagen que esta detrás del botón.

Creo que la mejor forma de entenderlo es viendo un ejemplo clásico de un Botón Ghost. Aquí lo tienes:

botones ghost ejemplo

 

Como puedes ver en la imagen de ejemplo es un botón transparente, con su texto de llamada a la acción y su borde de color

¿Por qué se han puesto de moda?

La tendencia del diseño gráfico web es hacia el uso de imágenes panorámicas grandes. Imágenes rectangulares horizontales de calidad. Dichas imágenes quedan muy sosas y vacías si no le ponemos una capa de texto encima que diga algo relacionado con la imagen.

Al final un buen diseño gráfico web se consigue con una web con fondo blanco y una efectiva combinación de fotografías grandes de calidad.

Los botones se han usado toda la vida como elementos para motivar al usuario a hacer clic en el botón y aterrizar en otra página o sección de nuestra web. También el botón se puede usar como un recuadro para destacar alguna información de interés. Sin embargo los usuarios cuando ven un botón ghost suele creer que es un botón clicable y en consecuencia, harán clic sobre él.

Consejos de cómo usar los Botones Ghost

  • El color del texto y borde deberían ser iguales.
  • Tiene que haber un alto contraste de color entre el color del borde y letra del botón ghost con la imagen de fondo. Una apuesta muy segura es utilizar imágenes oscuras de fondo y poner el borde y texto en color blanco.
  • No siempre se usan imágenes de fondo. También podemos poner un fondo de 1 solo color debajo del botón ghost.
  • Tiene que haber un espacio importante entre el texto y el borde del botón (espacio padding). Hay que dejar respirar los espacios dentro del botón. De esa forma se lee mejor el texto
  • Se recomienda que el texto dentro del botón ghost sea un verbo de acción o que incite a realizar una acción. Por ejemplo: ver más, leer más, más información, descargar, inscribirse, comprar, pedir información, etc.
  • Ojo con la resolución en el móvil. La imagen de fondo se nos puede mover en la resolución móvil y es posible que impida que se vea bien el botón.
  • No es recomendable poner 2 botones muy cerca; sobretodo en la versión móvil aumentamos el riesgo de hacer clic en el botón equivocado.
  • ¿Esquinas cuadradas o esquinas redondas en el botón? En los últimos años se usa más los botones con esquinas cuadradas pero si el diseño de nuestra marca combina mejor con botones de esquinas redondas, perfectamente lo podemos usar así.
  • Hay algunos botones Ghost que incluyen un pequeño icono al lado derecho del texto de llamada a la acción. Esto ayuda un poco al usuario a hacer clic sobre el botón.

formas botones fantasma

La ley de Fitts para el diseño de Botones en una Web

En el año 1954 Paul Fitts sacó una ley vinculada al tema de la usabilidad en interfaces gráficas. Sus leyes sirven de referencia para ver cómo se tiene que diseñar el tamaño de un botón. Parte de su teorema dice así:

  • Los botones y otros widgets que hayan de ser señalados en las interfaces gráficas deben tener un tamaño razonable, siendo muy difícil pinchar en los que sean pequeños.

Esto se traduce en algo tan sencillo en que tenemos que hacer los botones grandes para que el usuario haga clic sobre él. Lo mejor de todo es que la tendencia en el diseño gráfico web es en hacer iconos y botones grandes.

También tenemos que recordar que aproximadamente un 50% de las visitas que llegan a una web, lo hacen a través del móvil, por lo que usar botones de este tipo nos viene muy bien.

Si te gusta el diseño gráfico web te invitamos a que conozcas nuestro Master en Diseño Gráfico de Coco School.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Descárgate ya la app de Coco School para workshops y tutoriales exclusivos

SUSCRÍBETE A NUESTRO NEWSLETTER:

MANTENTE INFORMADO DE LOS NUEVOS MASTERS, TUTORIALES MUY ÚTILES Y ENTREVISTAS A INFLUENCERS DEL SECTOR

He leído y acepto la política de privacidad

Coco School, la Escuela Europea para la Comunicación en Diseño y Artes Visuales S.L. como responsable del tratamiento y legitimado por su consentimiento tratará sus datos con la finalidad de gestionar la resolución de consultas, informarle de nuestras publicaciones, promociones de productos y/o servicios, becas, eventos y recursos exclusivos. No cedemos la información a terceros salvo por imperativo legal. Tiene derecho a acceder, rectificar, oponerse y suprimir los datos, así como otros derechos, como se detalla en la segunda capa de información. Puede consultar información adicional y más detallada acerca de Política de Privacidad y Protección de sus datos personales.