Revisiting the Raven Graphite skins, round 2

June 11th, 2009 | 8 Comments »

Release 5.2 of Substance look-and-feel made a few visual changes to the Raven Graphite skins, but these did not address the overall usability of these skins – especially the contrast between the background and the controls, and the background / foreground contrast of text components.

The latest drop of version 5.3dev (code named Reykjavik) features significant overhaul of both Raven Graphite skins, aiming to address the contrast usability issues raised by the users.

Here is a screenshot of a sample application under the Raven Graphite skin in the latest stable 5.2 release:

https://substance.dev.java.net/release-info/5.3/ravengraphite1-old.png

And here is the same application under the 5.3dev drop:

https://substance.dev.java.net/release-info/5.3/ravengraphite1-new.png

Here is another screenshot of the same application under the old Raven Graphite visuals:

https://substance.dev.java.net/release-info/5.3/ravengraphite2-old.png

and the new visuals under the latest 5.3dev drop:

https://substance.dev.java.net/release-info/5.3/ravengraphite2-new.png

The main changes are:

  • Removing the watermark that contributed significant visual noise
  • Darker border color for controls, bringing more delineation to check boxes and radio buttons
  • Darker background color for text components, resulting in better readability

The same changes were made for the Raven Graphite Glass skin. Here is the sample application under the stable 5.2 release:

https://substance.dev.java.net/release-info/5.3/ravengraphiteglass1-old.png

and here is the same application under the latest 5.3dev drop:

https://substance.dev.java.net/release-info/5.3/ravengraphiteglass1-new.png

In addition to the visual changes above, the Raven Graphite Glass skin has removed the glass arc gradient from the toolbars and added a two-tone separator to delineate the title bar / menu bar from the rest of the application content.

To illustrate the visual difference in a larger content, here is a screenshot of a big UI under the stable 5.2 release (click to see the full-size view):

and the same application under the 5.3dev branch:

If you want to take the new visuals for a spin, click on the WebStart button below and change the skin to Raven Graphite and Raven Graphite Glass from the “Skins” menu:

You’re more than welcome to take the latest 5.3dev drop for a spin and leave your comments.

Related posts:

  1. Revisiting the Raven Graphite skins Raven Graphite and Raven Graphite Glass skins were added to the Substance look-and-feel about two...
  2. New Substance skins The latest drop of Substance 4.0dev (code-named Key Largo) features four new experimental toned down...
  3. New Graphite Aqua skin for Swing applications In addition to the usual bug fixes and getting the internal implementation ready for the...
  4. Performance comparison of Substance skins As a follow up to the previous post that showed how LightBeam tool can be...

8 Comments on “Revisiting the Raven Graphite skins, round 2”

  1. 1 Frank B said at 6:03 am on June 12th, 2009:

    Hey Kirill,

    nice work.
    one comment though:
    ‘Darker background color for text components’ is ok, but the text itself should keep the brighter color. now the text has a more subdued color and it has become less readable (at least in my view).

    Best regards

    Frank

  2. 2 Kirill Grouchnikov said at 7:31 am on June 12th, 2009:

    Frank,

    Are you talking about the foreground color of the text components? It is the same and has not been changed.

    Thanks
    Kirill

  3. 3 Ivan said at 8:45 am on June 13th, 2009:

    Hi Kirill!

    You have a great blog!

    But it is VERY hard to find something specific.
    For example, this entry is filed under:
    Desktop, Substance, Swing, UI.

    If I want to read something about Swing and I browse this category, 90% of the articles are related to some minor updates of Substance or similar projects. Same for UI and Desktop.

    Couldn’t you change it? (I don’t know if it’s too time consuming to re-tag most Substance posts, because I don’t use wordpress, but I hope it is doable).

    Keep up the good work!

  4. 4 Frank Beullens said at 1:39 am on June 14th, 2009:

    Hey Kiril,

    it is the foreground color.
    For some reason, the text of labels and text components now looks darker (anti-aliasing?). Maybe it should have the same color as the check of the checkboxes or the system-buttons (minimize…).

    Best regards

    Frank

  5. 5 Fadil said at 2:37 pm on June 14th, 2009:

    Hi Kirill,

    I really love your works and dedication to the UI world, they inspire me always !!

    Keep up the great work as Ivan said :)

    Best Regards,
    Fadil

  6. 6 Kirill Grouchnikov said at 7:03 pm on June 14th, 2009:

    Frank,

    The old FG color was #B4B4B4 and the new one was #B0B0B0. The change was not on purpose and the new color is #B4B4B4 (the screenshots in this entry have been updated).

    Please note that there are additional factors. For labels you need to take into account the darker surrounding color (no watermark). For text fields, the surrounding color is darker as well.

    The question is, is there enough contrast? If you think that the colors need tweaking, please continue the discussion on the project forums / mailing lists.

    Thanks
    Kirill

  7. 7 Stolsvik said at 1:45 am on June 22nd, 2009:

    Personally, I think these changes were an overall slight step backwards. I find that in the screenshot, locating what is a text field or dropdown is now more difficult: They stood out on themselves before, while now nearly gliding into the background. Also the sliders were cooler before. Additionally, the alternating pixel backdrop was a nice, “rich” touch that in my opinion didn’t contribute an iota of “visual noise”, as the two pixels were rather similar in color value. The inversion of selection color was pretty good, though.

    However, there was (and is) a contrast issue. What about simply increasing contrasts throughout instead of lots of other types of changes?

    But lastly – I am ambivalent on the negative side, towards changing existing themes in these rather big ways. Wouldn’t such changes nearly require a new theme? I think introducing new themes should be noted as “in progress – expect radical changes”. But after a theme is formally introduced, only _marginal_ changes should be allowed, pretty much only if addressing actual “physical” usability concerns, like e.g. some control becoming unusable when used in a Mac context.

    At least, the old version should be available under some older versions package, so that if a maintainer of some package wants to update the LaF for speed and correctness, but NOT because of visuals (he might get massive negative reactions from his user base), it would at least be possible. Think of something as mundane as the documentations: “When clicking on the filename you want to change, it goes dark to show that it is now the one you edit”, or “the name of the item having a dark background is the one you are changing the price of” or whatever – and all of a sudden, the item in question is pretty much white! Not to mention all the screenshots.

  8. 8 Kirill Grouchnikov said at 8:12 am on June 22nd, 2009:

    Endre,

    Applications that are interested in high-fidelity visuals that do not change between core library releases should create their own skins. Just as operating systems (Win, Mac, Linux, …) make visual updates to the default control skins, the same applies to Substance.

    Some changes may be minor, some changes may be more pronounced. It is a work in progress, and as trends in visual design are ever changing, so is the visual aspect of core Substance skins. If you want full control over the visuals, Substance skinning layer provides a rich set of APIs to control almost every aspect of the UI (including colors and watermarks).

    Thanks
    Kirill