We continue with the series of articles in which we have been presenting some of the trends in the field of
web design, and analyzing its evolution, whether to consolidate or not, pros and cons, and so on. Small details that allow us to present a clean and neat web design, with pictures and colors, invites the user to continue browsing and discovering what the web offers.
One of the clearest changes of the last year in web design that has gone unnoticed by many, are the ghost buttons. The ghost buttons, also called transparent buttons, are unfilled flat shapes that are typically used for the call to action. In fact technically a ghost button is not exactly a button itself because it lacks filling. It would be best described as a framework, but this would be only semantics.
They are usually simple buttons, with fine track, unfilled, with simple texts and somewhat larger than the other buttons. Often they are camouflaged on photographs and in the central part of the screen. It is, in short, to lead the typical web buttons to a minimum: text, a box without filling and a hover effect, nothing more.
How to use them
First, and perhaps you haven’t come to realize, notice that most ghost buttons are larger than the normal buttons that can be found on the website. That’s posible because they never obstruct the rear of the screen.
It is a resource used especially on landing pages , since the main purpose of these pages is to capture the attention of visitors and get a response to the call to the action that we do to the user. Its use is common in webs with large format photography or video pages .
Pros
1. Zero obstruction of the screen: they don’t obstruct the view of the objects that are behind.
2. Smaller size of files: they are only frameworks, so its weight is much lower. This facilitates loading of the website, is better for the mobile navigation and improves SEO
3. Mobile friendly: in a mobile every inch of screen space is valuable, and we took advantage by placing ghost buttons to every corner
4. Useful: conversion rates and A / B tests have shown that they are effective to call the attention of the visitors.
5. Funnel: to place a transparent button in a strategic place, no size limit and allowing you to see the background, we will help make the user trace the navigation as we pretend.
6. Multipurpose: although this buttons initially applied especially on trends and fashion sites, its use has been extended to all kinds of web design, typography or sector.
7. Plus: theweb designer who use ghost buttons have a competitive advantage over those who don’t, therefore may be something unique to offer to your customer.
Cons
1. Like everything in life (and whether it is design), could be a fad, and its popularity may fade and make you redesign the website.
2. Some are abusing it: ghost buttons can’t match to all web designs, but some developers insist on using them anyway.
Some examples of how we have implemented the ghost button in web design are: Vila Hermanos, Fresh Laudry or Art&Servei.
