When two products are developed by the same company / team / a lonely guy in his mom’s basement, you expect them to work well together. In my case, i develop Flamingo component suite and Substance look-and-feel – both targeting modern Swing-based UI applications. To achieve better integration between the two products, i provide three main features:

• Hosting some of the ribbon content (application menu button, taskbar panel and contextual ribbon task group headers) in the title pane of a decorated ribbon frame
• Office Blue 2007 and Office Silver 2007 skins that specifically target Flamingo ribbon component. When you use these skins in your ribbon-based applications, the visuals should be pretty close to the look of the matching MS Office 2007 skins.
• Substance Flamingo plugin that provides consistent appearance and animation effects found in the base Substance library.

While the main focus of Substance Flamingo plugin was on hosting content in the title pane, the two Office skins and consistent animation effects, the latest development drops of all three libraries provide much better visuals for the ribbon component under other core Substance skins, especially those that mix dark and light color schemes in different areas of your UI.

Here is the ribbon under Business Black Steel skin:

And the same ribbon under Dust skin:

And the same ribbon under Dust Coffee skin:

And the same ribbon under Gemini skin:

And the same ribbon under Twilight skin:

The ribbon also looks much better under other Substance skins such as Autumn:

and Business:

I plan to release Substance 6.1 and Flamingo 5.0 at the same time around end of July / beginning of August. You should expect even closer integration between these two projects to be provided by the Substance Flamingo plugin as the projects get nearer the code freeze state.

If you want to test the improved visuals in ribbon-based applications, you will need the following:

• The latest 5.0dev drop of Flamingo code-named Imogene
• The latest 6.1dev drop of Substance code-named Trinidad
• The latest 6.1dev drop of Substance Flamingo plugin

From

to

to

Almost done

The difference between this

and this

is this

Today’s post highlights the design of MilesDowsett.com. A somber color palette of beige, olive, dark brick red and dark desaturated brown sets the tone for the site. Dark brown is used as the background for both the header and the footer sections that frame the main content, with olive and brick red used for links and section headers respectively. Olive is also used to embellish some of the texts (vignette ampersands and footer section headers are examples) – which makes it harder to know what is clickable and what is not. The site content is laid out in a precise grid that also leaves plenty of white space around the different sections. Note how the footer sections align with the main content sections above them, and the perfect horizontal alignment of the two “featured work” sections.

A few well-placed illustration elements add a human touch to the design – dented bottom edge of the dark brown header, the vertical ribbon with the main logo, fading dotted pattern behind the top part of the main section, floral illustrations and a custom separator below the introduction text.