Design Trends: Ghost buttons in web design

I'm not sure we realize that http://www.aliyun.com/zixun/aggregation/33721.html "the most important trend of the >2014 year is coming." It's completely based on the tiny design elements of all the sites--buttons.

The Phantom button--the transparent, clickable object--suddenly becomes ubiquitous. In the field of web design by storm. Who would have thought that something as simple as a button could change the way we look at Web design?

References: Predicting Web page design trends

What is a phantom button?

The Phantom button has the simplest flat shape-squares, rectangles, circles, diamonds-with no fill, just a faint outline. In addition to the frame and text, it is completely (or almost completely) transparent. (hence the name "phantom")

These buttons are usually larger than the traditional clickable buttons on the Web, and are also placed in a prominent position, such as the center of the screen.

Ghost buttons can be found in various types of Web sites, including mobile apps, with a variety of design styles, almost all linked to single-page sites, as well as minimalist or nearly flat style designs. This style of buttons is also popular in Full-screen photo-background sites, unlike traditional buttons, a neat style that doesn't interfere with images.

Have you ever looked at the fillet button on your iphone (running iOS7)? Each design element is a ghost button.

This emerging trend is portrayed by a Designmodo designer:

The Phantom button appears, to some extent, with people keen to place the interface on a translucent full-screen background with the form. So, the time has come, it in the background image, product image and ghost form elements between the user's attention, so that the ghost button does not rely on the background to reflect the presence of their own, but still visible. ”

Design elements

The Phantom button has a series of typical constituent elements. Although this is not a complete guideline for use, most of them work when using ghost buttons.

The button is hollow, it has a contour around it, Usually only a little bit thicker it contains a short text color usually only black and white buttons are often larger than the traditional button the Ghost button generally occupies the page of the prominent position of the ghost button can be individually or in groups appear usually using a flat or near-flat design Ghost button inside can use small geometry icon, but it's rarely done,

.

The advantage of the Phantom button

So, what makes the Phantom button so useful? Is it necessary to apply this trend to your next project?

Ghost buttons give people a particularly clean look and feel. Simple and natural buttons, can make the main body of the page design more prominent. (especially in big pictures)

Ghost buttons can be paired with almost any design scheme because they are transparent. This allows the buttons to fundamentally take on the design features around them.

The Phantom button continues the evolution of the "2013 trend-flat design". The only way to become the mainstream of this design trend is to continue to evolve and embrace new concepts.

The Phantom button provides an element with a visual surprise because the button is different from what the user expects.

Designing and Creating Ghost buttons is simple. Remember to keep it simple. Phantom buttons should be subtle, not flashy.

The Phantom button does not have to be overly conspicuous enough to create an inspiring visual focus. In many web designs, the Phantom button is the only large element on the screen (which is why it works so well). Because of this, it catches the eyeball and lures the user to click the button. And it's also a feature of the excellent user interface.

Ghost Buttons help create high-end design styles. In design, simplicity is often elegant.

The disadvantage of the Phantom button

Although the Phantom button has many advantages in design, there are some disadvantages to consider. Before using any new trend, weigh its strengths and weaknesses before deciding whether to use it in a project.

The Phantom button may be too soluble in the background to confuse the user. Not all users are aware of the design, and some do not know what it is for a button that is difficult to identify with a non-traditional style.

Ghost buttons are difficult to handle in high contrast or color-rich pictures. These buttons are often either black or white. If you use a background image that is alternating black and white, the Phantom button is almost invisible and unreadable.

For ease of use, the Phantom button relies on a specific size and position. You need to be careful when placing a button, making it easy to spot and not obscuring the key parts of the picture.

The Phantom button sometimes has a noticeable effect on the image it matches.

The Phantom button's copywriting is more complicated than "click here". The text needs to be clear enough to be conceived and written, and placed in the context of the rest.

The Phantom button is now everywhere. Want to look like you're on the trend? Before choosing something fashionable, make sure it does help your project.

Ghost Button Case set

Remember, the key to mastering any trend is to use it well. As one Designmodo user says:

"I believe every trend in the design world has its far-reaching uses," he said. The most important thing is not to indulge in it, choose the golden mean. ”

In this sense, it is the key to using phantom buttons and other trends.

Next you'll get a set of phantom buttons that will inspire you to be creative. This set of cases is collected from a variety of online Web sites, ongoing projects, and the collection elements of Web sites such as Dribbble and Behance. (click on each picture to see the source for in-depth understanding)

Translator: 10 Realities Why the original author: Carrie Cousins