»

Botones Fantasma. La tendencia más anticipada del diseño web para 2015


Tal vez ha pasado mucho tiempo desde que escuchaste hablar a un desarrollador web sobre el uso de botones como parte de su plan general en la construcción de una página web.

La mayoría de los diseñadores dejaron de usarlos como elementos de diseño desde, aproximadamente, el año 2003/2004, y emplearon sistemas de menú dinámicos y CSS para adornar las cosas. Pero, en un giro de eventos extraños, estos botones han regresado en los círculos de desarrolladores web, con excepción de que ahora se les conoce como ghost buttons (botones fantasma).

¿Qué es un ghost button con exactitud?

Seguro has visto los cuadros o rectángulos transparentes en las páginas web y das clic en ellos para hacer algo específico. Aquellas figuras son llamadas botones fantasma. El ghost, o fantasma, es por el hecho de que son transparentes y el resto se explica por sí solo, son botones. Para ser sinceros, un ghost button no es exactamente un botón en sí porque carece de relleno. Sería mejor describirlo como un marco, pero esto sería solo semántica.

Tal vez hayas notado que la mayoría de los ghost buttons son más grandes que los botones normales que puedes encontrar en otra parte de la página web, pero nunca obstruyen la parte trasera de la pantalla.

¿Quién los usa?

Ya que toman un espacio significativo de la pantalla, verás que estos botones son generalmente usados en páginas web de estilo aterrizaje (landing pages) porque capturan la atención del visitante y brindan una respuesta a la llamada a la atención tan funcional que motivan que los visitantes den clic. En pocas palabras, mientras más minimalista sea el diseño en cualquier página web, más probabilidades tienes de encontrar ghost buttons en posiciones claves en páginas específicas.

 Los sistemas operativos más populares de los smartphones también tienden a hacer un uso generoso de los ghost buttons en el diseño su interfaz de usuario (IU). Apple hace esto de una gran manera. Desde el punto de vista de los desarrolladores web, los ghost buttons les permiten sacar provecho del campo visual de una pantalla, así que tiene sentido usarlos.

Los beneficios

Aparte del hecho que los ghost buttons están actualmente a la moda entre los diseñadores web, ¿existen otros beneficios en usarlos? Veamos algunas que vienen a la mente:

  • Cero obstrucción de pantalla: No obstruyen la vista de los objetos que se encuentran detrás de ellos.
  • Menor tamaño de archivos: Ya que solo son marcos, su peso es mucho menor.

ghost buttoms 1

  • Aplicaciones móviles: Cada pulgada del espacio de la pantalla tiene valor, así que colocar los ghost buttons en los fondos de pantalla es muy útil.
  • Más atención: Como funcionan muy bien desde el punto de vista estético, son capaces de llamar la atención del visitante.
  • Embudo del visitante: Poder colocar botones grandes de este tipo en un lugar estratégico te permite tener un mejor “control” del embudo de navegación de tus visitantes en tu página web.
  • Genérico: No importa qué tipo de esquema de diseño o tipografía decidas usar, siempre sabrás que los ghost buttons encajan muy bien por su buena apariencia.
  • Funcional: No hay nada peor para un usuario que tener de descubrir dónde se encuentra el menú de navegación, algo que no ocurre con los ghost buttons.
  • Único: Los diseñadores que usan los ghost buttons tendrán una ventaja competitiva sobre los que no. Es algo único que ofrecer a tu cliente.

ghost buttoms 2

¿Alguna desventaja?

Un hombre sabio alguna vez dijo todo lo  que sube, baja; y esto se puede aplicar a las tendencias web como los ghost buttons. ¿Existe alguna desventaja desde el punto de vista a largo plazo de una empresa? La primera que se debe considerar es que estos botones pueden ser una moda pasajera y su popularidad puede desvanecerse al punto de que tengas que rediseñar tu página web.

En segundo lugar, puede no ser que todos los esquemas de diseño necesiten los ghost buttons, pero algunos desarrolladores insisten en usarlos de todos modos; usarlos donde se necesitan tiene más sentido. Y, finalmente, si quieres que estos botones sean un elemento funcional en tu diseño web, entonces necesitarás seguir las reglas de mantenerlo limpio y leíbles, y evitar cualquier tipo de sinsentido vistoso.

ghost buttoms

¿Cómo crear un ghost button?

Abajo podrás ver algunos ejemplos que puedes recrear con HTML y CSS. 

Ejemplo 1

ghost buttoms 10

Ejemplo 2

ghost buttoms 15

Ejemplo 3

ghost buttoms 20

Ejemplo 4

ghost buttoms

Ejemplo 5

ghost buttoms 40

¿Qué piensas de los ghost buttons? ?Alguna vez has creado alguno? ¡Deja tu comentario!

Artículo cortesía de: Staff Creativa - agencia digital en Lima, Perú

Autor: Luiggi Santa María es CEO de Staff Creativa

Volver arriba
ACEPTO

Este sitio utiliza cookies para almacenar información en tu ordenador.
Las cookies son necesarias para que algunas de las funcionalidades de nuestra web estén disponibles y otras nos ayudan a mejorar, puesto que nos da una idea de cómo se utiliza el sitio. Infórmate más en nuestra página de Política de cookies.