Sea Glass look and feel

October 1, 2009

I’ve teamed up with Kathryn Huxtable on a new look and feel for Java we’re calling “Sea Glass”. The look was inspired by the following image:
sea_glass
I’ve been working on the artwork, while Kathryn has been doing the hard part of converting the art into an actual Java look and feel. We’ve only just begun the project, so there is much yet to be done, but I’d like to share the following glimpses of the artwork with you:
controls
scroll_bars
The colors will likely be tweaked as we go, but the images above give you a feel for what we’re going for. I’ll provide a link for the project shortly, which will be open source.

If you have comments or suggestions, be sure to leave them below.

Advertisements

114 Responses to “Sea Glass look and feel”

  1. victor herrera Says:

    Seems it will be a beauty Look and Feel.

  2. Brendon Says:

    Hi Ken,

    Looks fantastic. Looks like you could end up surpassing Apple here (which could be a tad embarrassing). Keep up the good work.

    Brendon.

  3. José Says:

    Looks incredible promising!


  4. […] Sea Glass look and feel « Exploding Pixels explodingpixels.wordpress.com/2009/10/01/sea-glass-look-and-feel – view page – cached I’ve teamed up with Kathryn Huxtable on a new look and feel for Java we’re calling “Sea Glass”. The look was inspired by the following image: I’ve been working on the artwork, while Kathryn… (Read more)I’ve teamed up with Kathryn Huxtable on a new look and feel for Java we’re calling “Sea Glass”. The look was inspired by the following image: I’ve been working on the artwork, while Kathryn has been doing the hard part of converting the art into an actual Java look and feel. We’ve only just begun the project, so there is much yet to be done, but I’d like to share the following glimpses of the artwork with you: The colors will likely be tweaked as we go, but the images above give you a feel for what we’re going for. I’ll provide a link for the project shortly, which will be open source. (Read less) — From the page […]

  5. Richard Osbaldeston Says:

    Looking great! what’s it based on? Synth?


    • Yes, it’s based on Synth. At the moment, we’re skinning Nimbus, which, it turns out, isn’t really set up to be skinned.

      Actually, although Synth is a good base, if you want to change the *feel*, and not just the look, you’ll end up re-implementing a lot of Synth. I suspect we’ll end up just extending Basic.

      But at the moment, we’re based on Synth.

      -K


  6. Can’t wait to see it in action!

  7. Tristan Says:

    Ohhh… Shiny!

    What licence will it be released under? I would like to use this L&F in my app as a second choice other than Java L&Fs and QuAqua

  8. Tristan Says:

    Sorry. Forgot to ask this.

    Could you use someone to help? I would love to contribute to this L&F!

  9. tb Says:

    Way sweet! Very very nice :-)

  10. Gerrit Grunwald Says:

    Well done !!! Looks really nice, keep up the good work. Can’t wait to get this laf for my swing apps.

  11. patrick17 Says:

    Cool! Where i can download it????

  12. Panayotis Says:

    A perfect combination of the new apple l&f with the old aqua l&f!

  13. Andrew McVeigh Says:

    looks delicious, i like the conceptual focus on sea-eroded glass. can’t wait. any timescales?

  14. JC Says:

    Fabulous if you can create a Nimbus skin.

  15. PhiLho Says:

    I love the depolished (?) look, a nice change from the all shiny interface trend.
    Looks very nice, professional look, remaining sober. Excellent;

    • Ken Says:

      I wanted to create more visual interest than the plain a gradient (which are all the rage right now), but not be so gaudy as the “shiny” looks — hence, sea glass.

  16. Suhail Says:

    Amazing! much better than any L&F i have seen. well done.

  17. Tristan Says:

    I *LOVE* this L&F! Maybe I could make a GTK theme from this sometime.

  18. obinna Says:

    this is soooo fantabulous!!. cant wait to have it for my applications.


  19. Wouhouuuu! That’s a great effort! I’m really looking forward to play with the first release!

    From your slides, it looks like it could blend in well with Windows and Mac OS X, but I fear that depending on the used desktop and/or theme, it could look a bit too shiny when using Linux. I know, for now it’s just a concept, but I wonder whether you’re planning to provide some kind of color tweaking facility or a theme feature to allow for some minor adjustments.

    Anyway, best wishes for your project. I will definitely track its progress. Thanks.


    • I suppose it depends on the desktop, but I run Gnome 2.26.1 on Ubuntu (Jaunty Jackalope) with my titlebar and desktop set to various green tones with the Human theme.

      It looks fine.

      In a couple of weeks when we feel comfortable enough to let people have a crack at it, we’ll see what you think.

    • Ken Says:

      Hi Marco,

      I’m not much of a Linux user, so I don’t have a good sense of what would look good on that platform — I’ll definitely spend some time looking at it though.

      We will provide minor tweaks on each platforms for things like window chrome. In general, I try to avoid the ability to tweak things as I feel like it can be a cop-out for *really* thinking about the design. But your absolutely right that sometimes this is unavoidable.

      Thanks for the feedback Marco.
      -Ken


      • See http://www.kathrynhuxtable.org/blog/2009/10/04/sea-glass-laffy-example-linux/ for a screen shot of Laffy with the Sea Glass L&F on Ubuntu Linux.


      • Thanks, Ken. I absolutely second your opinion. If you can come up with something that blends in well across platforms out-of-the-box, this would be ideal! And I agree that it’s more important that the application looks and feels great, than to match the platform look. And that should be your focus, of course.

        It’s just that there is sometimes a huge gap between platform appearance, and while Mac OS X and recent Windows versions both look “modern”, your typical Gnome desktop does not. Incidentally, I’m currently using a blueish Clearlooks theme on Ubuntu, but I can see me changing to a more dark appearance. A shiny blue app would contradict the overall theme here. Tolerable of course, but not ideal.

        You might want to provide the option to honor the desktop colors in order to provide some kind of automatic adjustment. Just an idea.

        Katryn, great to hear that you are already testing on Gnome. I don’t know how many users can stand the default appearance when using Ubuntu, your theme is obviously customized and might therefore not be representative. Not that I know which theme is most widely used. The diversity in the Linux world should be way higher than on other platform. That’s why I think a color adaption could be beneficial.

        Anyway, thanks for both of your for a brace effort!


      • Marco, your comments make sense to me.

        I’m using Human, which is the default look for Ubuntu, with the desktop and title set to green tones.

        I’ve used Clearlooks. In fact, I’ve tried just about everything before Gnome finally made Human have customizable colors instead of Elephant Dung Orange.

        At the moment, we’re using actual PNG images to get us up and running more quickly and to do quick prototyping. We could, I suppose, dynamically change the color balance of the images, but I’m not sure that’s the way we’d want to go.

        In the long run, I expect us to use Graphics2D operations to create the controls.


      • Thanks for the screenshot. The overall appearance looks nice.

        I don’t like the colored window control buttons, that’s one reason why I prefer the toned down Graphite theme on Mac OS X. Theming here we are again ;)

        BTW, currently the L&F seems to be image based. Is it already decided to stick with that? I already mentioned Substance on your blog as a possible basis for a custom implementation. What about that? Thanks.


      • Marco, we probably won’t stick with images. They’re just a way of getting up and running quickly.

        I haven’t ever tried to do anything with Substance, but I don’t like any of its existing skins in the demo. So there’s a visceral thing going on here. Maybe it’s the strong borders on controls, but it looks a bit clunky to me.

        Sort of like Linux. ;-)


      • Kathryn, your are too fast for me ;) Unfortunately threading seems to be limited and the posts got a bit messed up. Oh well.

        Adjusting colors should be no big deal when using Graphics2D. That’s what I had hoped for :)

        AFAIK, Java provides support for getting the platform colors, but I don’t know how reliable that is. Once I have something to play with, I might investigate here.


      • Kathryn, regarding Substance, I don’t like its appearance either. Obviously the developer is not so much a designer than a programmer, plus he only uses Windows (no offense, Kirill, I really like your outstanding work!), but it’s a complete and technically sound, Graphics2D based implementation that might really save you a lot of work or at least give you inspiration. I don’t have a link at hand, but I remember some blog posts outlining insane care to get the painting details right.

        Maybe you could even team up and bring Substance to a whole new level. I know, sounds less thrilling than a new project, but I believe the developer knows an awful lot about implementing Look&Feels and all things Java graphics, that this could really be beneficial to all parties interested ;)


      • Marco, I think Ken has threading limited to three levels on his WordPress blog. I set it to five on mine, but whatever you do it’s a fixed limit on WordPress.

        Obviously, Kirill has done a lot with L&F. You make good points.

        We’ll think on this.


      • I did a quick peek on his blog and came over this entry where he talks about some challenges and improvements:

        http://www.pushing-pixels.org/?p=1065

        There is more if you search for “resolution” or “dpi”. AFAIK, he gave a presentation with Mike Swingler at JavaOne last year on this very topic.


      • Marco, I think I prefer my pixels to be exploding rather than pushed. ;-)


      • Kathryn, duly noted ;)

        It will be interesting to compare the different implementations. Substance shows a long history of constant improvements, and it seems technically mature.

        Just like Kirill, you can be only applauded for your work and I’m really looking forward to play with the results


  20. […] Orr posted that he and Kathryn Huxtable are working on a new (and very good looking) look and feel for Swing called Sea Glass. A day later, Kathryn posted a bit more information about their […]

  21. henk Says:

    Looks nice. Somehow it makes me remind of how Mac OS X looks, not sure why that is though. But once again, it looks nice! Good luck with the project :)


  22. […] It that mocks Mac-kind look inspired by different colored stones. You can checkout the details here. Info Look And Feel This one is based on the Metal look and feel. This is the one that you will […]

  23. henner Says:

    Absolutely amazing style! This might turn out to look better than Aqua!


  24. Before I get too exited about this, what Java version will be required? I really hope you stick with 5.0, yes?


    • Well, at the moment, we’re going with 6.0, because we’re extending Nimbus. I don’t think we’ll continue with Nimbus, though, because it has too many default scoped packages and it’s actually more difficult to extend than I think Jasper and Richard thought it would be.

      If we drop Nimbus, I see no reason we couldn’t drop back to 5.0.


      • Thanks, that’s what I feared. Substance requires Java 6.0 as well. Totally understandable for a FOSS project without any revenue, but it limits the usefulness in certain areas. I have customers who are still on 1.4…


      • Well, I’m not willing to fall back to before 5.0 because I’m not willing to give up generics, for/each, and enum. Especially generics, though for/each is a big deal to me.

        1.4.2 was the workhorse for a long time, but its time has passed.


    • Sure, 1.4 is no option. I’m specifically interested in 5.0 support


  25. Congratulations, looks great!

    Are you planning to have a generic API so that one could easily extend their custom controls to use your look and feel?


    • We haven’t thought much about that aspect yet. We know we want to support client properties a la Aqua to customize appearances, but we haven’t thought a lot beyond that.

      We’ll definitely be supporting segmented buttons and search textfield, because I want them and so does Ken.

  26. Daniel Says:

    Wow, looks awesome! Does it have to be LGPL though? Unfortunately many companies can’t use LGPL libraries due to the “reverse engineering” clause. If the license has not yet been finalized, it would be great if you considering dual licensing it under MPL as well. It’s basically the same as LGPL, but keeps the lawyers happier :)


    • How would you feel about the Apache 2.0 license? That tends to be my default license, but since Ken already had MacWidgets licensed under LGPL and I figured we’d use some of the code, and we are, I figured I’d stick with LGPL.


    • I should also add that most of those companies’ lawyers are not correct. LGPL’s reverse engineering clause generally isn’t an issue for a library such as a Look and Feel.

      We’ll eventually have mechanisms to allow you to add it to your custom controls without reverse engineering it. It’ll either be a derived class, which need not be LGPL’d according to the LGPL or an API call.

  27. marioyohanes Says:

    nice…. I really can’t wait to use this L&F…

    great job for both of you…

  28. Barry van Someren Says:

    Looks lovely!


  29. Are we there yet? :)

    Looks very nice.


    • Not even close. We have buttons, checkboxes, radio buttons, and scroll bars done. Ken says he’ll get spinner designs to me shortly.

      I’m engaged in refactoring my original code, which was too closely based on Nimbus to be extended, especially if we want to support client properties, and we do.

      I’ve made some good progress on the first step of three towards where we want to be. Once that’s done, my work will be simpler. Ken’s won’t, though.

      Once the refactoring is done I won’t be embarrassed to show the code, and we’ll release our Laffy test, even if it still uses Nimbus controls for the stuff we haven’t yet done. Which is which will be obvious, because the colors and styles are different.


  30. Hi Ken, Kathryn,

    this looks very promising and I have the feeling that this L&F might come in very handy for my own project, which relies heavily on MacWidgets. Problem there is, that you end up having a great looking app on Mac but making it look equally nice on Windows become a very difficult task. I started using Nimbus for this and made good progress on it, but had to struggle with these things, which I hope your L&F will cover for me:

    – A unified titlebar and toolbar
    – Window decorations (Nimbus does not have them for JFrame and JDialog, only for internal frames and dialogs) … this of course overlaps with the first item on this list
    – Segmented buttons (ideally using the same client properties that Apple is using)
    – A search field (once again … like Apple)
    – A table with optional alternating row colors that actually fills the viewport all the way to the bottom (I know Ken knows how to do that)
    – A table header that fills the god-damn upper right corner
    – A table header that knows how to render icons out of the box (come on Apple, come on Sun/Nimbus)
    – Rounded window corners using transparency

    This is it, my wishlist for Christmas …. speaking of timeframes …. :-)

    Dirk

    P.S.: I volunteer for beta testing!


    • Hi Dirk,

      We’ll definitely have the unified title/toolbar for all OSs.

      We’ll definitely have segmented buttons and we’ll have some sort of variant that will look good in the toolbar.

      I want a search field, so we’ll have it.

      Yes, we’ll be able to fill the viewport with the alternating rows, and of course we’ll fill the upper right corner.

      Hmmm…. I guess I hadn’t thought about rendering icons in the header, but why not?

      Rounded window corners with transparency is very problematic on Mac OS X due to the window resizing bug. But I think we can do it on Windows/Linux.


  31. Oops, just red Kathryns comment on segmented buttons and search fields. Check, check ….

    Dirk

  32. Ken Says:

    Hi Dirk,

    We plan to address pretty much everything you referenced, including nice looking window chrome on Windows which supports the concept of a unified toolbar.

    Stay tuned for more blog updates about our progress.

    -Ken

  33. Vekaz Says:

    May I have this yesterday, please? :)

    Beautiful. Hurry up! :)


  34. One more thing: please make sure that the components can be laid out consistently. Meaning, don’t make the mistake Apple made where some text components have the blurry blue focus border and others don’t. Block aligning a textarea and a textfield on a Mac is almost impossible.

    Dirk


  35. I have an example of a table from Laffy rendered in Sea Glass at:

    http://www.kathrynhuxtable.org/blog/2009/10/13/another-sea-glass-example-tables/

    I’m interested in comments on it, in particular the rendering of the striping around the checkboxes.


  36. […] Ken’s site for more information. Comment (RSS) […]

  37. Arturo Munive Says:

    Hey look beautiful.

    One thing, be careful with focus, i see many look and fells with focus treatment is poor, many user of my apps, hate using mouse then focus it’s very important.

    GOOD LUCK


  38. […] Sea Glass look and feel […]


  39. A quick update.

    We’re working on non-Mac title panes. Because of the Mac programmatic resizing bug, we’ll use Mac title bars on a Mac. Otherwise the window shudders when you resize.

    For everything else, we’ll look a bit like iTunes in that we’ll put the menu bar in the title pane.

    Ken has designed some nice Chrome-ish iconify/maximize/close buttons.

    I’m wondering if we want to use the close button a la Mac to indicate that the document has changed. On a Mac, the close button gets a dark dot in the middle which shows even when you mouse over instead of the “x”.

    I had also thought of putting something in the title itself, but since applications frequently have structure in the title, that’s problematic.

    I suppose (this just occurred to me) that we could put an indicator to the left of the iconify button…

    Ideas?

  40. Paul Taylor Says:

    So looks nice enough but what is the point of this new LAF. Every single Mac user I’ve come across has wanted Java apps to act as a native app and I try to keep quiet about my app being Java – so I hope work is still continuing on MacWidgets,

    This new LAF isn’t going to help on Macs, and I’m not sure Windows users would want their application to look less Windows like.

    Am I missing the point of this …

  41. Ken Says:

    I disagree — I’m an avid Mac user and don’t mind when things are different so long as they are at least as good if not better than the platform look. Case in point:

    http://labs.adobe.com/technologies/lightroom3/

    It doesn’t look like any Mac app I’ve seen, but that doesn’t bother me at all.

  42. Paul Taylor Says:

    Maybe , but your example is NOT a Java application. As soon as your average Mac user finds out an application is written in Java they are looking to find differences with the way it works to ‘Native’ Apps.


  43. […] time has passed since Ken Orr has announced that he has teamed up with Kathryn Huxtable to work on a new Sea Glass look-and-feel for Swing […]


  44. […] to pay attention to. Finally, Kirill wrote a Sea Glass skin for Substance, based on the details outlined by Ken Orr and Kathryn […]

  45. artrash Says:

    ??? How to install SEa Glass.?
    IDe: eclipse
    os:ubuntu


  46. […] had a whole lot of time recently, but I’ve updated the color palette (see the original colors back here) and drawn some new artwork for the Sea Glass look and feel. Kathryn has been plugging away on the […]

  47. vsrikarunyan Says:

    Beautiful. Eager to use them on a project.

  48. Manohar Dondlapally Says:

    Excellent … Keep up the good work.


  49. […] O as cores suave do Sea Glass: […]

  50. Dan Says:

    I cant find the download link… :-S


  51. […] Sea Glass This is relatively anew theme under development. This one is among the best I’ve seen around. It that mocks Mac-kind look inspired by different colored stones. You can checkout the details here. […]

  52. Distorzija Says:

    Absolutely amazing!!! Keep up with the good work ;)

  53. Pankaj Says:

    sea glass is very beautyful. please send me class code for developing my third year project.pls………

  54. Olly Says:

    is this finished yet? I want to try it out on some of my apps


  55. nice theme, thanks,I will try

  56. Amit Dhall Says:

    @ ken simply outstanding job.

  57. zxprince Says:

    Great work i m going to use it… thank u so much

  58. vicks Says:

    hey can u plz tell me, once downloaded how can i apply this look and feel to my java application??

  59. sathish Says:

    great….
    i want also look and feel like in windows 7…..

  60. Tobi Says:

    Hey port it to JavaFX2 :)

  61. nassar Says:

    its butiful


  62. This is an awesome look n feel, hope that, inshallah ! it will bring good marks in my project !!!! :D :D :D

  63. sangnd Says:

    Thank you! I’m looking for this :)


  64. So… where’s the download?

  65. Fer Says:

    where can i download and try it?

  66. Sohaib Says:

    Is it ready? Or left in the middle of development?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: