Today’s post highlights the design of CrayonsLife.com by Jessette Dayate. The background texture is reminiscent of the pattern left by the crayons on a pavement. This texture extends into the inset effect of the page header title, as well as the beautiful hand-drawn illustration of a girl sitting on a stack of crayons. The footer section uses illustrations as well – for the horizontal separator and the tweet decoration. If you reload the page, note the fade-in effects on the “Latest project” images.
The layout could use a little bit more alignment. The left edge of header section text hangs in between the two columns of the main content. And while the left edge of the “Latest project” images is aligned with the main content column, the right edge falls short.
Certainly an interesting week, with Palm acquired by HP and Apple’s detailed response on why Flash is no go on their platforms. Along with the recent acquisition of Sun by Oracle, it is shaping to be a battle of giants in the consumer market. Now we have (in alphabetical order) Adobe, Apple, Google, HP, Microsoft and Oracle – each with its own platforms, tools and plans to get a piece of desktop, web and mobile consumer markets.
- Apple, Microsoft and (presumably soon) Google have their own desktop operating systems. They do not need to ask anybody a favor to be able to shape where they are going, and what they can run on it.
- Apple, Google and Microsoft have their own browsers. They do not need to ask anybody a favor to shape what can run in it.
- Apple, Google, HP and Microsoft have their own mobile operating systems. They do not need to ask anybody a favor to be able to shape where they are going, and what they can run on it.
Where does that leave Adobe and Oracle? Each is certainly a behemoth in the area of cross-platform consumer-oriented platforms. Adobe has Flash, Flex and Air. Oracle has Java and JavaFX. But do they control their own long-term destiny?
Today’s post highlights the design of VegasUncorked.com. Set in bright azure and metallic blue color scheme, it uses multiple overlaying translucent textures to offset the vivid colors of the large header section. The typographical layout of the header section is done with images to ensure the design fidelity across browsers and screen resolutions. The footer section features sponsor logos; monochrome effect creates a consistent and attractive area that is not overloaded with competing colors. The guider lines in the main section enforce the three-column layout, and the text snippets have plenty of white space around them.
The social links column can use a little more polish. Italicized sub-headers and pinkish glow effect feel disconnected from the rest of typography. The icons look disjointed and not normalized to have the same weight and color scheme. The rollover effects use gigantic rectangles of washed pink color, and the entire section should have received the same amount of attention and restraint as the footer section.
While careful design will pay special attention to the number of UI controls shown at any given moment, some scenarios may result in showing more controls than can fit in the available space – either horizontally or vertically. In Swing, these situations are usually addressed by wrapping the controls in a JScrollPane, which can be configured to show the scrollbars only when they are necessary. While the scroll bars are pervasive and an easily recognized solution, sometimes they add too much visual noise and hurt the application usability.
Here is an example from the last post on the breadcrumb bar:
Here, the application window is not wide enough to show the full selected path – and adding a horizontal scroll bar between the breadcrumb bar and the main file listing panel would be a very bad design decision. Instead, the scrolling is done using the two double-arrow buttons placed on both sides of the breadcrumb bar. Another example can be found in the post that talked about scrollable popup menus:
Additional examples can be found in the entry that talked about horizontal shrinking of the ribbon component.
Originally contributed as part of the breadcrumb bar component by Rick Jeliffe of Topologi, the scrolling functionality has since been extracted and reused across other parts of Flamingo. And now for the good news – the latest 5.0dev drop of Flamingo component library (code-named Imogene) exposes the scrollable panel as part of the published API.
The main class is org.pushingpixels.flamingo.common.JScrollablePanel. You construct it by passing the view and the ScrollType – either HORIZONTALLY or VERTICALLY (note that the scroll type cannot be changed once the component has been constructed). When needed, the component will show the scroller buttons – just the same way as JScrollPane shows the scroll bars. Moving the mouse over a scroller button (when it’s visible) starts auto-scrolling the view in the matching direction. To turn off the auto-scrolling and do the scrolling only on button press call JScrollerPanel.setScrollOnRollover(false) API.
To fully reveal a specific part of the view, call JScrollerPanel.scrollToIfNecessary(), passing the start position and span in pixels. The values are either in X or Y coordinates – depending on the scroll type of the scroller panel. You can also register a change listener on the component to be notified whenever the layout change occurs. This comes handy if you have custom drawing outside the scroller panel that depends on the position of the scroller panel view.
If you want to take the scroller panel for a spin, you will need the following:
Note that the last two are required if you’re running your application under one of Substance skins. You will need the 6.1dev drop of Substance Flamingo plugin – the latest 5.0dev drop of Flamingo core is incompatible with the 6.0 release of Substance Flamingo plugin – as mentioned before.
