diseño web
03 / 06 / 2015

Tendencias diseño web: botones fantasma

SectorHablamos de
Tendencias diseño web: botones fantasma
Proseguimos con la serie de artículos en los que venimos presentando algunas de las tendencias en el ámbito del diseño web, y analizando su evolución, si van a consolidarse o no, pros y contras, etcétera. Pequeños detalles que nos permitan presentar una web limpia bien montada y ordenada, con fotos y estilos, invita a seguir navegando e ir descubriendo qué nos ofrece.

Uno de los cambios más claros de este último año en diseño web, que ha pasado desapercibido para muchos, son los llamados botones fantasma. Los botones fantasma, también llamados botones transparentes o ghost buttons, son formas planas sin relleno que se suelen usar para el call to action (llamada a la acción). De hecho técnicamente 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.

Acostumbran a ser botones simples, con trazado fino, sin relleno, con textos simples y algo más grandes que el resto de botones. Suelen camuflarse sobre fotografías y en la parte central de la pantalla. Se trata, en definitiva, de llevar los típicos botones web a la mínima expresión: texto, un recuadro sin relleno y algún efecto hover, nada más.

¿Cómo se usan?

En primer lugar, y quizá no hayas caído en la cuenta, fíjate 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. Esto nos lo permiten porque nunca obstruyen la parte trasera de la pantalla.

Se trata de un recurso utilizado sobre todo en landing pages (webs de aterrizaje), ya que el objetivo principal de estas páginas es capturar la atención del visitante y conseguir una respuesta a la llamada a la atención que hago al usuario. Su uso es habitual en páginas donde se presenta fotografía o vídeo de gran formato, para no taparlo.

Pros

  1. Cero obstrucción de pantalla: no obstruyen la vista de los objetos que se encuentran detrás.
  2. Menor tamaño de archivos: Ya que solo son marcos, su peso es mucho menor. Esto facilita la carga de la web, y lo agradece el usuario (sobre todo móvil) y mejora el SEO
  3. Mobile friendly: en un móvil cada pulgada del espacio de la pantalla tiene valor, y colocando ghost buttons aprovechamos cada rincón
  4. Útiles: las tasas de conversión y tests A/B realizados demuestran que funcionan muy bien desde el punto de vista estético, son capaces de llamar la atención del visitante.
  5. Embudo: poder colocar un botón transparente en un lugar estratégico, sin límite de tamaño y permitiendo ver el trasfondo, nos va a ayudar a hacer que el usuario trace su navegación como nosotros pretendemos
  6. Todoterreno: aunque inicialmente se aplicaron sobre todo en webs sobre tendencias y moda, su uso se ha extendido a todo tipo de diseño web, tipografía o sector.
  7. Plus: los diseñadores que usan los ghost buttons tendrán una ventaja competitiva sobre los que no, por lo tanto puede ser algo único que ofrecer a tu cliente.

Contras

  1. Como todo en esta vida (y más si se trata de diseño), podríamos estar ante una moda pasajera, y su popularidad puede desvanecerse al punto de que tengas que rediseñar tu página web.
  2. Algunos están abusando de ello: 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. 
  3. Funcionalidad: 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.
Algunos ejemplos de cómo hemos implementado los ghost button en diseño web son: Vila Hermanos, Fresh Laudry o Art&Servei.

¿Te ha gustado el artículo? ¡Suscríbete a nuestro blog!

Noticias relacionadas

¿Tienes un proyecto en mente? Cuéntanoslo

Finalidades de la protección de datos: Envío de nuestro boletín comercial y de comunicaciones informativas y publicitarias sobre nuestros productos o servicios que sean de su interés, incluso por medios electrónicos. Legitimación: Consentimiento del interesado. Destinatarios: No están previstas cesiones de datos. Derechos: Puede retirar su consentimiento en cualquier momento, así como acceder, rectificar, suprimir sus datos y demás derechos en info@latevaweb.com. Información Adicional: Puede ampliar la información en el enlace de Política de Privacidad.

Utilizamos cookies propias y de terceros para ofrecerte un mejor servicio. Más información

Aceptar