Today’s post highlights the design of SarahLongnecker.com done by FortySeven Media. Sepia and washed blue color scheme offset the strong overlapping layers and numerous textures used throughout the design. Ribbons are pervasive throughout the site, used for the navigation menu, the main portfolio link, sidebar background and footer validation links. The main emphasis is put into embedding video thumbnails that are opened in a lightbox overlay, emphasizing the site owner specialization in video editing. Even though the arrow icons on action buttons and video thumbnails try to create a unified appearance to actionable items, they add too much visual noise to an already overcrowded visual palette of the site. This is somewhat alleviated by the balanced white space created by the sparse text sections that use drop shadows for better legibility.
The command button component is a central building block for the Flamingo component suite. It aims to address the deficiencies of the core Swing button components, adding features expected by the modern applications. While the main goal of Flamingo is to provide a pure Java implementation of the Office 2007 ribbon container, the command buttons can certainly be used outside the ribbon.
Command buttons can be configured to have two separate areas – action and popup. This allows the application to use command buttons as drop-in replacement for Swing core buttons, as well as use them to create split and popup buttons. The JCommandButton.setPopupCallback API is used to dynamically create the popup menu content when the popup area is activated. The core org.pushingpixels.flamingo.common.popup.JCommandPopupMenu allows creating most commonly used popup menus. You can use its addMenuButton and addMenuSeparator to create simple menus:
or you can use a JCommandPopupMenu constructor that gets a JCommandButtonPanel instance to create a more complex popup menu with embedded scrollable command button panel:
If a popup menu hosts a large number of command menu buttons, it may overflow the vertical boundaries of the monitor, resulting in poor UI experience. Even though such scenarios usually indicate poor UI design (too many choices), sometimes it is a valid requirement. One such example is showing all files in the specific folder when the user clicks the popup area. To address such scenarios, you can use the new JCommandPopupMenu.setMaxVisibleMenuButtons(int) API.
Suppose you use this API with the value 10. If your popup menu contains ten items or less, it will be shown as it is today. However, if it contains more than ten items, the popup menu will show two scroller buttons, one before the first menu item, and another after the last menu item:
To scroll through the items, use the mouse wheel or move the mouse over the bottom scroller button. In the later case, there’s no need to click the mouse button – the scrolling will start automatically when the mouse is moved over the scroller button and will continue as long as the mouse stays there. Once you start scrolling, the top scroller button becomes enabled:
When you reach the last menu button, the bottom scroller button becomes disabled:
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 post highlights the design of Infinitum, the online portfolio of James Li – who designed and developed AdFlavor.net featured in the very first post of the “Design, uninterrupted” series. Infinitum uses a simple color scheme which can be found on a number of other portfolio sites – dark gray foreground on off-white background with consistent use of dark orange for headers and links. The main page features few of the portfolio highlights, leaving enough white space around the elements to prevent overcrowding of the content. The navigation menu and section headers use a custom font which can benefit from better pixel grid alignment to prevent blurriness around vertical stems. The footer section is a slightly odd duck here – while it does not have any background differentiation from the rest of the page, it breaks the main column grid and uses different separators around it.
Today’s post highlights the design of TheHouseMedia.com. A dark and slightly textured background is offset with a vibrant color palette of header and footer that extends the main logo into the site design. Note how the navigation menu grows from the header illustration and is further accented by the separator lines that blend with the illustration as well. The navigation menu, section headers and the main copyright text use a custom font and manual kerning; due to the current limitations of browser font engines the site uses images instead of plain text. Beveled separators blend well into the dark background, and the main content is grid aligned across the sections – except the second column of “what we can do” that aims to create a tighter text section. To bring the final polishing touch, the design adds background highlights around the logo, below the portfolio slider and around the contact form.
