Spinners in Substance 6.0

October 29th, 2009

One of the items on the roadmap for version 6.0 of Substance look-and-feel (code-named Sonoma) is to polish the appearance of existing components. Today i’m going to talk about visual enhancements done for the spinners in the latest 6.0dev drop of the library.

These enhancements address two major points:

  • Adding more contrast to screens that use spinners – by creating an “inset” look
  • Modernizing the appearance of the spinners – by smoothing the corners and borders

The overall appearance of the spinners is consistent with that of text components and editable comboboxes – to create visual consistency across all types of text-based input controls.

Here is a screenshot with a few spinners under the Dust Coffee skin in release 5.3:

https://substance.dev.java.net/release-info/6.0/spinners-dustcoffee-old.png

and here is how they look under the latest 6.0dev:

https://substance.dev.java.net/release-info/6.0/spinners-dustcoffee-new.png

As with the comboboxes, the overall look is inset, and the buttons are flat. When the mouse is over one of the buttons, it fades in indicating that it is indeed a button:

https://substance.dev.java.net/release-info/6.0/spinners-dustcoffee-new-rollover.png

The same spinners under the Business skin in release 5.3:

https://substance.dev.java.net/release-info/6.0/spinners-business-old.png

and under the latest 6.0dev:

https://substance.dev.java.net/release-info/6.0/spinners-business-new.png

The same spinners under the Gemini skin in release 5.3:

https://substance.dev.java.net/release-info/6.0/spinners-gemini-old.png

and under the latest 6.0dev:

https://substance.dev.java.net/release-info/6.0/spinners-gemini-new.png

Finally, the same spinners under the Twilight skin in release 5.3:

https://substance.dev.java.net/release-info/6.0/spinners-twilight-old.png

and under the latest 6.0dev:

https://substance.dev.java.net/release-info/6.0/spinners-twilight-new.png

Note that this is still work on progress, and you’re more than welcome to leave comments on the new look.