Today’s post highlights the design of serj.ca, the personal portfolio site of Serj Kozlov. The strong saturated blues of the header and footer are offset by an exquisitely intricate header illustration, translucent overlays of the navigation controls and smooth slightly textured gradient transition to the main content area. Leaving plenty of white space around the text sections, the design has a strong grid layout that aligns the portfolio thumbnails with the contact / info sections below them. The footer section uses the same color palette as the header, completing the two-color palette used on site, including the separators and the links.
The latest 5.0dev drop of the Flamingo library (code-named Imogene) provides full right-to-left (RTL) support for the ribbon component and all its parts. Here are some screenshots of the ribbon running under iw-IL locale using the Office Blue 2007 skin from Substance core and Substance Flamingo plugin.
The first screenshot shows the full RTL ribbon in action – click to see fullsize view:
You can associate rich tooltips with buttons in ribbon bands. The tooltips are shown below the main ribbon area, right aligned with the original button:
Command buttons placed in the ribbon can have associated simple popup menu:
The popup menu can also host a command button panel, with each button having its own rich tooltip:
The screenshots above show an embedded ribbon gallery (in the middle ribbon band). A ribbon gallery can be expanded to show all the available gallery choices:
The ribbon usually hosts command controls – such as command buttons or ribbon galleries, which themselves contain command buttons. However, you can also put any core Swing component into the ribbon:
Note that you can associate an optional icon and an optional caption text with the wrapped core component.
The application menu button is shown in the top-right corner. Internally it is a command button as well, and you can associate a rich tooltip with it:
Clicking on the application menu button shows a three-panel application menu:
You can associate a custom secondary menu group with the specific primary menu entry:
The secondary menu group can have multiple menu sections:
You can have more than two levels in the application menu by associating a custom popup callback with the relevant secondary menu entries:
Contextual task groups can be shown and hidden based on the current selection in the application. The contextual task group headers are shown in the application title bar:
You can place frequently use controls in the ribbon taskbar. Command buttons in the taskbar can have rich tooltips. These tooltips are shown directly below the button and are right-aligned:
Command buttons in the ribbon taskbar can have associated popup menus:
You can also associate a rich tooltip with the ribbon band expand button:
This is the next major step towards full RTL support in all Flamingo components. The breadcrumb bar remains the only Flamingo component without the RTL support. It will be added after the planned internal refactoring of the breadcrumb bar to use command buttons.
To test the new functionality in your applications, you will need the following:
Note that the last two are required if you’re running your application under one of Substance skins – such as Office Blue 2007 used in all the screenshots in this entry.
Today’s entry highlights the design of NeutronCreations.com. A very vibrant design which uses the full rainbow palette for the logo and vivid yellow for pervasive thick guider lines, offsetting the strong foreground elements with a multi-layer deep sky blue textured background. Note how the geometric pattern of one of the background layers addresses readability by fading in the areas which have text snippets. The readability is further improved by using text drop shadows and large font sizes. The overall design is completed with a precise grid layout and plenty of white space between the sections.
