Guiwerx - AMX Templates, Crestron Templates, URC Universal Remote Templates, Philips Pronto Templates, Stardraw templates

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

Buttons - Spacing - Backgrounds - Color - Fit & Finish

Step 4 - Color

Aside from functionality, color is without a doubt the most important aspect to a great touch panel design, it's use or misuse can dramatically change the mood of an entire layout. Here is a great example. Our Tuscany theme includes green, violet, and yellow, which typically don't work well together. This was probably the hardest theme to create because we had to find a nice balance of color and style and incorporate a modern technical look.

Below are three examples: The first one is the actual background image and the second and third are lighter and darker versions of the same image.

The final merged Photoshop image for Tuscany (far left) consisted of 47 separate layers. The contrast, brightness, and color saturation was adjusted for each one individually to produce the final result. Every single Guiwerx design is created on an LCD monitor as opposed to CRT, which can distort colors drastically and give a completely different appearance when viewed on a liquid crystal touch panel.

The middle image has a much brighter look to it but now becomes washed out and loses it's 3D qualities. The high contrast, overly bright backgrounds can sometimes be distracting for the client, especially in a dark room like a home theater, which is precisely why the Hollywood theme is the only one with a black background. The FlexTheme backgrounds are designed to be subtle and can be viewed as a work of art when the touch panel is in System Off mode and all of the popup pages are hidden.

The image on the right takes on an almost depressing look due to overly dark hues and lack of contrast whereas details in the vine accross the top become lost. Many designers overlook this aspect of touch panel design and produce templates that appear lifeless and dull by using dark images.

Guiwerx offers a wide range of design options with FlexTheme and we asked for input from female clients to help create some of our themes like Luna and Serenity. Here are a few more examples where color is used to create a certain mood while lending itself to the other graphical elements in the design.

Luna (left) uses a nice contrast of dark and royal blue to achieve a night sky effect with gold accents to offset the darker popup page area. Executive (center) uses a warmer, richly colored burled wood grain along with a burnt umber background for the source select area. The popup page area is a neutral cream color which gives this design a clean, sharp executive look, hence the name. Nautica (right) was a re-design of an earlier template with the same name. The American flag is symbolic of nautical style and needed to be incorporated into the image without appearing too colorful. We chose to give the flag a darker, rich look to offset the lighter colors of the map and top menu sections.

____________________________________________________________

Let's go to step 5 - Fit and Finish