Guiwerx - AMX, Crestron, and Stardraw templates

Design 101 - A quick tour of what goes into our touch panel designs

Buttons - Spacing - Backgrounds - Color - Fit & Finish

Step 1 - Buttons

The most common method for creating a quick touch panel template is the cut and paste approach. A good example for this method is a typical jog control (Up, Down, Left, Right, and Enter) that almost every source uses for on screen menu navigation. The quick and easy way is to create a cross shape with one button in the middle and the others at 12, 3, 6, and 9 o'clock. The jog control on the left (ours) appears to be one image on the touch panel but is actually 14 total images in a 3 x 3 matrix. The corners serve as fillers while the remaining five sections have two separate graphics, one for the inactive and another for the active state. The jog control on the right was made simply by using a single button for every position.

____________________________________________________________

Using our DirecTV FlexTheme page (left) as an example, there are a total of 36 different graphics used for this source including active states. You may also notice most of our buttons are round, elliptical, or oval. Curved organic shapes are used in everything from automotive design to modern art and are more pleasing to the human eye than rigid square and rectangular buttons. We like to use rectangular buttons on small popup pages or a source page where we want to create a "virtual" version of the actual controls like a Lutron wall switch (right).

Be sure to look closely at other designs to see how many times the same button is used on the page. It is very easy to create a template using the cut and paste method whereas you can accomplish this with only a few images in a very short amount of time. Our AMX FlexTheme template has 294 separate, custom made graphics in the image library, and the Crestron version has 336 due to the Adagio interface and neither number includes the 130+ backgrounds for the various sports themes.

Below are three actual examples of a competitors touch panel template where identical buttons are used over and over. You may notice that none of the layouts are symmetrical and certain rows are shorter than others. Spacing between rows is also inconsistent. A touch panel of this level can be produced in less than an hour. Several design firms use this method versus a well designed, intuitive button layout.

____________________________________________________________

Originally, we wanted to create an icon based template with fancy, text free 3D source and menu graphics but the problem is they are not very flexible, especially when you need an icon for a specialty source that is not included with the template. In which case, you would either have to create one that doesn't match or simply put text in it's place. We realized that everything had to be customizable, and went for a more intelligent approach. Our source select and top menus are designed to be contracted or expanded simply removing unwanted buttons and sliding the remaining ones together so it still appears as one graphic instead of separate ones.

____________________________________________________________

Let's go to step 2 - Spacing