Today’s post highlights the design of StrangeNative.com by Russ Maschmeyer. The saturated yellow color used as the background fill is offset by subtle gradient transitions using darker yellow towards the edges; an extra background layer of texture noise and random smudges adds a welcome relief as well. Strong red reinforces the vibrant choice of colors – it is used as the link foreground color and throughout the various visual elements in the site header, logo and sidebar. The portfolio slideshow embedded in the main page features an attractive layout that highlights the design itself, as well as Russ’s role in the project.
Today’s post highlights the design of SushiAndRobots.com by Jina Bolton. A perfect example of strong grid layout is highlighted by the vertical and horizontal guider lines that help tracing the placement of all visual elements. Note how different elements fit into one or more columns of the six column layout, with extra insets for text sections. All text elements (including the navigation menu, section headers and sidebar links) have their baseline aligned perfectly with the horizontal grid guider lines.
A faded tapestry background texture helps alleviating the string geometrical pattern imposed by the guider lines, and improves readability of the light-on-dark footer section. The main section uses a popular light gray / dark gray / dark orange color scheme with consistent coloring of links and attractive typography for the section headers and rollover effects for the navigation menu elements.
Toggle menu buttons were added to the Flamingo component library a few days ago, and their functionality has been enhanced following feedback from Pedro. In addition to tweaking the visual layout of the area between the icon and the text, the two improvements are:
- Showing a checkmark when the selected toggle menu button does not have an icon
- Popup menus that are not automatically dismissed when a child menu button is clicked
The second entry enhances the usability of popup menus that have multiple toggle menu buttons. Here is a screenshot to demonstrate such a scenario (note checkmarks on the selected buttons):
If this menu controls a set of boolean options / preferences, dismissing the menu after a single button has been clicked (selected toggled) is a bad user experience if the user wanted to change multiple settings. To prevent the auto-dismissal, call the new JCommandPopupMenu.setToDismissOnChildClick(false) API. This way the menu will stay up until the user clicks anywhere outside it or hits the Escape key.
If you want to take the new toggle menu buttons 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.
Today’s post highlights the design of ASimpleMeasure.com by Daniel Cork. The site is about measurements, and it is reflected in the design elements. Hand-drawn elements such as separators, image borders and RSS / Twitter icons, the ruler grid along the top edge, stippled site logo, washed out measuring arrows with millimeter dimensions all contribute to a consistent visual message. The sandpaper background texture and a few helper explanation tips complete the visual theme. Reload the site to see a sequence of sliding animations that features the slideshow controls and the “sign up” call to action.
