From ghost buttons to hollow elements, they have been in fashion.

2018-07-31

From ghost buttons to hollow elements, they have been in fashion.

Ghost buttons and similar hollow elements are still rather thin in many design trends. Their conversion seems not to be prominent, and they are more attractive than other fixed forms, and their visual effects depend mainly on the surrounding contrast and the environment itself, and in a word, there are many shortcomings. Even so, they did not disappear quickly, but on the contrary, they were still active in the front line of design.

They can be so largely because we are accustomed to these elements. When they first appeared on the UI interface, the confusion and confusion that users felt was gradually disappearing. As we all know, it was a button.

Now the ghost buttons and similar elements have been accepted by the market and the users, and are not uncommon in the commercial design, even the function of the call of behavior, which is enough to attract the user’s view.

From ghost buttons to hollow elements, they have been in fashion.

From ghost buttons to hollow elements, they have been in fashion.

Delta   Ignite  Online

Ignite  the use of the ghost button in the Online web page is a very typical way in the past, and now its use strategy has been improved, look at the Climazone page in Adidas below.

From ghost buttons to hollow elements, they have been in fashion.

Delta   Climazone by  Adidas

Here, the ghost button has more release controls, not only has a good hover effect, but also makes the relationship clearer and more stable through the typesetting, and the round element on the left strengthens the consistency of the design.

Based on these cases, we want to make good use of this design trend. We need to consider the following points:

  • Make sure that there is enough whiten around it.
  • Make sure it is big enough;
  • The ghost button and the background should be sufficiently contrasted.
  • Use the appropriate graphics to carry it.
  • Use hover effects to enhance visual guidance.

Although this is a bit strange, the ghost button, a linear style button design, can really enhance user experience. Looking at the web site below, the designer uses a split screen design, two huge but less significant ghost buttons placed in the center of two blocks, with an immersive experience through overlapping. For users, the whole design is clear and intuitive, and the two parallel explorations are in front of them.

From ghost buttons to hollow elements, they have been in fashion.

Delta   Pholc

The warming of linear art

The ghost button has the characteristics of linear art, but it is not the only linear element. In the whole design, the use of hollow linear elements has become a popular trend. The content of this design trend is rich and varied. For example, adding a delicate border around the title and a subtle contrast to the background not only makes the whole design more elegant, but also gives the title additional visual attention, like the design of the two sites of the lower Drawlight and Domaine Direct.

From ghost buttons to hollow elements, they have been in fashion.

Delta   Drawlight

From ghost buttons to hollow elements, they have been in fashion.

Delta   Domaine  Direct

The design of the Feudi di San Gregorio site is also particularly noteworthy, although it also uses a fine line border to encapsulate the title, but the design team behind it allows the title layer to have a true sense of hierarchy through excellent visual design, and the unique design is more likely to capture the attention of the user.

From ghost buttons to hollow elements, they have been in fashion.

Delta   Feudi di San  Gregorio

It is very worthwhile to learn only by making subtle adjustments in vision. Next, look at the ContraryCon site.

From ghost buttons to hollow elements, they have been in fashion.

Delta   ContraryCon

The font section of the first screen center of the site uses a relatively hyperbole failure effect. The surrounding borders seem to limit the exaggerated effect to this range. It cleverly inhibits the category of the failure effect and lets the users notice the key information of the block, such as menus, CTA and LOGO.

爱上海419论坛 爱上海