What are these effects supposed to replicate ? Is it a reflection, a refraction, caustics ?

Glossy sphere

Glossy button

  • My money would be on reflection. It's just supposed to make the button "pop" more. – Hanna Nov 2 '12 at 13:58
  • It's candy!!!!! – DA01 Nov 2 '12 at 16:02

When you do photography you often reflect a Softbox (a square diffuser that makes the light more even) or an umbrella (also diffusing the light but gives a round reflection). When taking pictures of shiny objects these are often placed so they reflect in the object, together with white and black sheets of papers around setup to give a good 3D feel representing the true shape.

These glass buttons simulate that effect, the Softbox reflecting in the surface from top. As the even light isn't perfectly even the light is typical represented as a gradient where the edge of the softbbox is not so bright as the center of it.

The inner light in those button simulate both refraction and caustics.

Here's a walk-through how real-world shiny objects are photographed, the principle applies with glass (I add it here to show the principle):



Almost entirely the reflection from glass, or, shiny clear plastic. Imagine a smooth, curved physical glass/plastic button.

Sometimes, people go to town and simulate caustics and refraction as well, but usually reflection, and a gradient and optional counter reflection (like at the bottom of the first image) suggesting light from the underside therefore implying translucency, is usually enough.

Edit after rethinking from Horatio's comment -- When it implies a spherical or convex shape, as in the top example, much of the gradient will be simulating refraction, as would any added effect that implies the inverse of the background. Most real glass shapes have complex refraction that depends on the background, the angle of light, the material used and size and depth of any convex or concave curves; most examples of this effect keep it very simple with just a gradient going from dark at the top to light at the bottom.

This styling adds plenty of noise to a design already, so skipping refraction and caustics can be a legitimate design decision instead of (or, as well as...) laziness :)

As for the effect in general, glass effects in web UIs were very popular the mid/late 2000s, presumably using a mix of associations with shiny technology leaning on the concurrent trend for shiny, highly visible interaction points in gadgets of the time, and familiarity, due to the use of glass effects in the Windows 'Aero' UI theme which was popular at the time. It's an example of skeuomorphism - simulating properties of something from the physical world to suggest characteristics in something digital. Glass effects were also particularly popular in corporate websites (I imagine because shiny glass is associated with modern glass office buildings and so was used to set a modern corporate tone).

They are still quite widely used, but decreasingly so, presumably because:

  • ...of association with a trend that is now passing:

    • gadgets tend to be more minimalist with unobtrusive interaction points
    • corporate websites tend to be more keen on presenting warmth and approachability than corporate seriousness
    • in general skeumorphism, when it is used (and there's a strong argument that, as a reaction to sometimes obtrusive and excessive over-use by Apple in some software, the idea itself is in the process of going out of fashion in UI design in favour of 100% form-follows-function elements), tends to use low-key low-technology high-approachability tactile metaphors like furniture and fabrics or simple mechanical processes,
    • Windows - therefore the everyday experience of technology for the vast majority of white-collar corporate workers, therefore, familiarity for corporate things - is in the process of moving on to flat shiny tiles.
  • ...and also, because they add quite a lot of distracting noise to a design. Lots of different shades, and when used with text labels, the highlights or shading compete with the text

  • 1
    "due to the use of glass effects in the Windows 'Aero' UI theme" - surely it came from early OS X's Aqua theme? – e100 Nov 2 '12 at 15:11
  • Yea, the glossy buttons came from the initial release of OSX. Fortunately, Apple has been downplaying them more and more with each update to OSX. – DA01 Nov 2 '12 at 16:03
  • @e100 - Kinda: Aero was absolutely a reworked clone of Aqua taken to the extreme, but I think of them causing two separate styles - the more low-key 'jelly bean' style coming from Aqua, and that very widespread, OOT, excessively shiny style encouraged by clients whose main direct influence was Aero. But there's definitely overlap. The good news is, both are on the way out... :) – user56reinstatemonica8 Nov 2 '12 at 16:15
  • @user568458: the examples are definitely based directly on OS X 'Aqua' dialog buttons. – e100 Nov 2 '12 at 17:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.