Today’s post highlights the design of 204Beech.com by Geoff Teehan. A deceptively simple design weaves images and text to tell a story about designing a building a new house. Clever use of oversized leading images converted to a desaturated monochrome palette makes them feel an integral part of the design. Slightly desaturated translucent salmon red for image captures and highlights keep the site palette down to a minimum, while still adding a splash of color. The same salmon red is used consistently for the main logo, navigation menu highlights, links and the footer separator. It is a fascinating visual journey that keeps text paragraphs readable, adds helpful breaks inside long entries and maintains simplicity through consistent use of color, overlays and highlights.

Related posts:

1. Design, uninterrupted #11 Today’s post highlights the design of TheHouseMedia.com. A dark and slightly textured background is offset...
2. Design, uninterrupted #22 Today’s post highlights the design of SimpleBits.com, a design studio by Dan Cederholm. True to...
3. Design, uninterrupted #37 Today’s post highlights the design of 15june.com. Beautifully styled header features clean typography and precise...

Today’s post highlights the design of DavidHellmann.com. With plenty of white space around the elements and a strong alignment highlighted by the dash gridlines, the main page features a lot of material and links, including the portfolio thumbnails, snippets from the last articles and an oversized footer with elaborate illustrations. A rather unusual choice of using two different colors for links – dark red and dark teal (also used in the main logo) adds some visual noise to an otherwise consistent color palette. Even more noise is added by using saturated green as rollover color for “Check out the portfolio” and “Read more articles” buttons. Rollover effects are pervasive throughout the design – move the mouse over the main logo, portfolio thumbnails and the big “Top” arrow in the right side of the footer.

Related posts:

1. Design, uninterrupted #49 Today’s post highlights the design of KeanRichmond.com. The site header uses a simple noise texture...
2. Design, uninterrupted #10 Today’s post highlights the design of serj.ca, the personal portfolio site of Serj Kozlov. The...
3. Design, uninterrupted #13 Today’s post highlights the design of SarahLongnecker.com done by FortySeven Media. Sepia and washed blue...

• Trident 1.3 (code-named Diamond In The Sky)
• Flamingo 5.0 (code-named Imogene)
• Substance 6.1 (code-named Trinidad)
• Substance Flamingo plugin 6.1

Flamingo 5.0 release candidate contains:

• New scroller panel component
• New color selector popup
• Full right-to-left (RTL) support
• Toggle menu buttons
• Dock icon for ribbon frame on Mac
• Dynamic resize of ribbon components

Substance 6.1 release candidate contains:

• Platform specific keyboard shortcuts
• New Mariner skin
• New Office Black 2007 skin
• Better visual integration in Substance Flamingo plugin for ribbon under all core Substance skins

Trident 1.3 is mainly maintenance release with a few minor API additions to the repaint timelines. Flamingo uses Trident for some of the animations, and you will need to add the latest Trident jar to the classpath. If you’re running your Flamingo-based application under Substance, add the latest Substance Flamingo plugin jar to the classpath for consistent visual appearance and animation effects.

The final releases for all the projects are scheduled for August 9. Only bugs will be fixed until that date.

Related posts:

1. It’s time for… release candidates It’s my great pleasure today to announce the availability of release candidates of the following...
2. Trident 1.2 official release It is a great pleasure to announce the availability of the final release or version...
3. Release candidate for Flamingo 4.1 I am pleased today to announce the availability of release candidate for version 4.1 of...

All this talk about not being able to create something that looks good in JavaFX is hot air. JavaFX has the functionality to do so, you just have to know how. What JavaFX needs is for the preview controls and layouts to be finished, controls such as a table implemented, and the Prism renderer implemented. When this is done it will be easy to write any application that could be written in Swing quicker, looking much better and with far greater performance. Personally i would of rathered investment in Swing instead, but Sun/Oracle have invested in JavaFX and in many ways its already far better than Swing, except for missing components.

Modern programming languages provide abstraction layers and higher level concepts to shield the programmers from the low level drudgery of writing assembly code. In much the same way modern UI toolkits provide component libraries, image composition, transformations, animations and many other tools that make it simpler to translate the intended design into a living and breathing reality. But eventually, it’s pixels. All the way down.

Just as the vast majority of the programming languages are Turing complete, the vast majority of UI toolkits are what i call pixel complete. If the specific toolkit exposes the ability to control every single pixel in the window (with, say, paintComponent in Swing, onDraw in Android, paintControl in SWT or updateDisplayList in Flex just to name a few), there are no limits to what can be put on the screen. Modulo support for translucent and shaped windows, you can take any design and turn it into reality. Indeed, if you know how to do it, you can do anything. But that’s not the point.

How about this – instead of asking what people can do with JavaFX, ask what people are actually doing with it.

Related posts:

1. Soft clipping and per-pixel translucency for Swing windows The entry on translucent and shaped windows in Swing has generated quite a lot of...

Today’s post highlights the design of EnlivenLabs.com. Set on the backdrop of dark olive denim texture, the site uses a earthen palette of brick red, golden brown and light ochre set early on in the decoration strip that runs along the top edge and applied consistently to all visual elements. The main emphasis is placed on large portfolio thumbnails that use beautifully crafted explanation boxes. Note how much visual attention went into the lighting model of the borders, drop shadows and depressed dash separators.

Irregular lighter spots in the background texture can hurt legibility even for larger font sizes, and the design address this issue by using darker drop shadows. The brick red color is used for two main design elements – the anchored navigation menu and the main action button. Move the mouse over the darker bird outline in the navigation menu vertical ribbon to see a full-color Twitter bird. A simple one-line footer completes this single page design.

Related posts:

1. Design, uninterrupted #41 Today’s post highlights the design of Branded07.com by Rob Palmer. Set in soothing bluish gray...
2. Design, uninterrupted #34 Today’s post highlights the design of JosephPayton.com. Set in various shades of steel blue, the...
3. Design, uninterrupted #13 Today’s post highlights the design of SarahLongnecker.com done by FortySeven Media. Sepia and washed blue...

JavaFX provides a unified development and deployment model for building rich client applications that integrate rich immersive media such as audio and video, graphics, rich text and web services. JavaFX allows creative developers to program in a visual context thus helping them to bring their ideas to life quicker and better.

In addition, following in the footsteps of Apple, Adobe and Microsoft that have all realized the importance of bringing professional designers as equal partners in the process of creating new wave of user-facing products, JavaFX has placed significant effort into making the collaboration between developers and designers easy:

JavaFX allows designers and developers to simply and swiftly combine graphics and media assets to unleash their creative potential with significantly reduced effort. Using the JavaFX Production Suite, a suite of tools and plugins for Adobe Photoshop and Adobe Illustrator, designers seamlessly create and export graphics from their existing tools into the JavaFX format. The plugins allow One-click conversion and provide a preview enabling designers to make any necessary modifications prior to conversion. Also included is the JavaFX Media Factory, enabling designers to use Scalable Vector Graphics (SVG) editors such as Inkscape with JavaFX as well.

In this world, a designer continues to use the tools that he is fluent with (Photoshop and Illustrator), and a developer continues to use the tools that he is fluent with (code editor). And while the final product contains the work of both sides, they can continue working in parallel, refining and tweaking the UI and the business logic as they go. In fact, one of the earliest demos shown at JavaOne showed a designer exporting a layered background to be used in a UI and a developer importing the visual assets to be used in the application. After the developer had added a few listeners, the designer changed the visuals, which were then re-imported into the application without any change in the application code.

And that was one of the main promises to the companies considering the choice of a UI toolkit for their next big application. That  there’s this large pool of professional creative talent, and you can tap into it without forcing them to abandon the familiar set of tools. In addition, you don’t need to fear that the developers will cut corners and miss all the fine visual details when they implement the UI mocks – the visuals are imported from the design tools, untouched by the developers that toil away at the business logic.

Judging by how well this promise has translated into reality, JavaFX is a train wreck.

No matter what your opinion on Microsoft, you cannot deny that they have mastered the fine art of promoting their UI toolkits. When WPF was announced a few years ago (slightly before JavaFX), Microsoft forged agreements with a number of third-party companies that have created visually rich and aesthetically pleasing business applications that focused mainly on showcasing the full graphic capabilities of the UI toolkit. Companies such as thirteen23 and Infragistics have created WPF applications to browse Netflix, Amazon, Flickr, Twitter and many more.

Apple’s obsession with design has not gone unnoticed with the designer community. Not a week passes by without yet another round of beautifully designed applications for Mac, iPad or iPhone. People obsess over the placement and color of each pixel, and spend untold hours refining and polishing every single element that is displayed on the screen. Applications are judged on the appearance as much as they are judged on the functionality – if not more.

What has happened with JavaFX in the meantime? Nada. I am yet to see a single significant JavaFX application that looks good. And while developers obsess over semantics of sequences and null pointer exceptions, designers just don’t care. The “rich” part of JavaFX-powered RIAs is just not happening. Jim Weaver had an interesting idea when he required all teams participating in the JavaFX RIA exemplar challenge to have one developer and one designer. After a few weeks the rules were changed to no longer require the participation of a designer. Nine months after the competition has been announced, no news on the participants or the winner.

If the simplest explanation is also the correct one, then i would assume that the competition has failed to attract any significant number of professional designers. Extrapolating that, publishing screenshots of the existing entries (presumably designed by the developers) would not sit well with what this competition meant to achieve – showing the world that JavaFX is a viable and strong alternative for companies that want to create rich business applications. Depending on your personal opinion, the last statement may have never been true.

Related posts:

1. Swing, RIA and JavaFX – interview with David Qiao Meet David Qiao, the founder of JIDE Software, as the interview series on Swing, RIA...
2. Swing, RIA and JavaFX – interview with Amy Fowler This year’s JavaOne placed a significant emphasis on client Java. The name Amy Fowler should...
3. Swing, RIA and JavaFX – interview with Mikael Grev A fighter pilot by day and a professional Swing developer by night. Meet Mikael Grev...

Related posts:

1. Screenshots of Square for Android Square application is out, and here are a few screenshots taken on my Nexus:...
2. Screenshots of doubleTwist Player for Android A few screenshots of doubleTwist Player running on Nexus (UI by Sebastiaan de With):...
3. Screenshots of Seesmic for Android A few screenshots of Seesmic running on Droid:...

In this example, the “Applications” ribbon band hosts three comboboxes, and each combobox has an icon and a caption next to it. To address different monitor and window sizes, as well as the user resizing the application window hosting the ribbon, Flamingo provides built-in support for dynamically resizing the content of the ribbon bands to best fit into the available space. As the user makes the window smaller, ribbon galleries show less buttons, and command buttons switch from big to small icons and hide the caption. Eventually, when there is not enough space to show the controls at the smallest visual state, the entire ribbon band becomes collapsed.

Support for dynamic resizing of the ribbon content has now been extended to the JRibbonComponents as well. Call the new JRibbonComponent.setResizingAware(true) API to turn the dynamic resizing on for the specific component. If this API is not called, the existing behavior is preserved.

Once the API is called, and the user starts resizing the ribbon, the wrapped component will hide the caption and icon as necessary before the band will go to the collapsed state. If you start with the ribbon band displayed above – where all comboboxes show the icons and captions, the next state will be

where the captions are gone, and the comboboxes fill the available space if JRibbonComponent.setHorizontalAlignment(HorizontalAlignment.FILL) was called when the component was created. If the user continues making the ribbon smaller, the next state is

where the icons are gone as well. At this point the next state is to collapse the entire ribbon band:

This is the last planned new feature for Flamingo 5.0. Release candidate is planned for July 19, with the final release planned for August 9. Now is the best time to migrate your application to the latest 5.0dev drop of the library and help me find the remaining bugs.

Related posts:

1. Flamingo ribbon component: support for core Swing components The latest addition in the Flamingo component suite is support for core Swing components. This...
2. Flamingo ribbon component: pluggable resizing policies The latest addition in the Flamingo component suite is support for pluggable resizing policies on...
3. Flamingo ribbon component: small buttons in ribbon galleries As mentioned in the JavaOne presentation on the Flamingo ribbon component, there are a few...

• -Dswing.defaultlaf=org.pushingpixels.substance.api.skin.SubstanceMarinerLookAndFeel
• UIManager.setLookAndFeel(new SubstanceMarinerLookAndFeel())
• UIManager.setLookAndFeel(“org.pushingpixels.substance.api.skin.SubstanceMarinerLookAndFeel”)
• SubstanceLookAndFeel.setSkin(new MarinerSkin())

Here are a few screenshots of Mariner in action. A few basic controls, along with a decorated title pane, a menu bar and a toolbar:

A tree and a list with a few selected items

Comboboxes:

Text fields:

Sliders:

Ribbon:

A larger UI with a more controls (tabs, scroll bars, status bar and task pane container from SwingX):

If you want to test the new Mariner skin in your application, you’re more than welcome to take the latest 6.1dev drop of Substance code-named Trinidad for a ride and let me know if you run into any exceptions, visual artifacts or anything else.

Related posts:

1. New Creme Coffee skin for Swing applications Just before the feature freeze of Substance 4.1, i added a new Coffee Cream skin...
2. New Dust skin for Swing applications In addition to bug fixes and performance improvements in Substance 5.2 (code-named Quebec), i’m planning...
3. New Autumn skin for Swing applications It has been added last October, but only now i feel that it has been...

Related posts:

1. New Mariner skin for Swing applications In addition to providing platform-specific key bindings, bug fixing and better integration with the Flamingo...
2. Mariner, coming soon ...