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.

Square application is out, and here are a few screenshots taken on my Nexus:

Today’s post highlights the design of EpicEvent.com that specializes in online ticket sales. The dark orange color used for links and the main action button is offset by the light desaturated sky blue background and dark slate blue used for the section subheaders. Clever use of stitch and zigzag elements as separators creates a realistic impression of a giant ticket stub – further reinforced by the crumpled paper texture used in the navigation menu and the main header section. The main section uses subtle gradients to add a little life around the text sections. The “about us” section uses multiple cross fading background layers that mesh perfectly together. The main section employs a precise three column layout maintained throughout all the subsections; “Sign up for Epic Event” is the only exception which is rather strange since its icon is the same size as the other two icons above it. I would spend a little bit more time on the main tagline (“The simple way to sell tickets online”) which suffers from rather sloppy kerning, especially in the last two words.

I was recently asked how to create multi-level menus with Flamingo command menu buttons. There is nothing preventing you from creating arbitrary hierarchies of menus – and you can do this even in the stable 4.2 release. The latest 5.0dev drop of the library brings small improvements for mixing menu buttons with and without icons, and here is a small code sample to create a two-level menu:

public class MultiLevelMenu extends JFrame {

   public MultiLevelMenu() {
      super("Multi level menu");

      JCommandButton main = new JCommandButton("click me");
      main.setCommandButtonKind(CommandButtonKind.POPUP_ONLY);
      main.setDisplayState(CommandButtonDisplayState.MEDIUM);
      main.setFlat(false);

      // first level menu
      main.setPopupCallback(new PopupPanelCallback() {
         @Override
         public JPopupPanel getPopupPanel(JCommandButton commandButton) {
            JCommandPopupMenu result = new JCommandPopupMenu();

            result.addMenuButton(new JCommandMenuButton("Copy",
                  new edit_copy()));
            result.addMenuButton(new JCommandMenuButton("Cut",
                  new edit_cut()));
            result.addMenuButton(new JCommandMenuButton("Paste",
                  new edit_paste()));

            result.addMenuSeparator();

            JCommandMenuButton second = new JCommandMenuButton("Find", null);
            second.setCommandButtonKind(CommandButtonKind.POPUP_ONLY);
            // second level
            second.setPopupCallback(new PopupPanelCallback() {
               @Override
               public JPopupPanel getPopupPanel(
                     JCommandButton commandButton) {
                  JCommandPopupMenu result = new JCommandPopupMenu();

                  result.addMenuButton(new JCommandMenuButton("Find",
                        new edit_find()));
                  result.addMenuButton(new JCommandMenuButton(
                        "Find replace", new edit_find_replace()));

                  return result;
               }
            });
            second.setPopupOrientationKind(CommandButtonPopupOrientationKind.SIDEWARD);
            result.addMenuButton(second);

            return result;
         }
      });

      this.setLayout(new FlowLayout(FlowLayout.LEADING));
      this.add(main);

      this.setSize(300, 200);
      this.setLocationRelativeTo(null);
      this.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
   }

   public static void main(String[] args) {
      SwingUtilities.invokeLater(new Runnable() {
         @Override
         public void run() {
            SubstanceLookAndFeel.setSkin(new GeminiSkin());
            JFrame.setDefaultLookAndFeelDecorated(true);

            new MultiLevelMenu().setVisible(true);
         }
      });
   }
}

And this is how it looks like:

Couple of things to note:

• It’s the same JCommandButton.setPopupCallback API that is used to create all menu levels
• By default the popups are displayed below the originator component (unlike the core Swing menus). Use JCommandButton.setPopupOrientationKind API passing the SIDEWARD enum value to it to recreate the core Swing behavior.