 |
|
|||||||||
 |
 |
|||||||||
 |
Design 101 |
|||||||||
               |
Design 101 - A quick tour of what goes into our touch panel designs 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 the DirecTV page from our Fusion template as an example, there are a total of 36 different graphics used for just this source popup 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 templates contain up to and over 300 separate custom made graphics in the image library and the Crestron versions usually contain more images due to the Adagio interface. Our large resolution FlexTheme templates include 130+ backgrounds for the various sports themes as well. 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.
_________________________________________________________________________________ When it comes to some of our designs, we like to incorporate easy to use methods for customizing menus as you can see in the example below. You can simply expand or contract an activity menu simply by deleting or adding buttons and moving the remaining ones over to match up the edges.
_________________________________________________________________________________ Our Fusion templates utilize an icon based activity menu with large graphics designed to be used for multiple sources if needed. We include a set of generic icons for the most popular activities such as "Watch TV", "Listen to Music", "Play Video Game", "Adjust Lights", and many others. But we also incorporate many customized icons for sources like DirecTV, Dish Network, Tivo, Apple TV and new streaming services like Netflix and YouTube. We also noticed some touch panel templates come with icon sets that are angled to the left or right which makes it awkward to look at if you need to put a row of activity icons down the left or right side and they are facing the outer edge of the touch panel. Our icon sets are designed for a head-on view so they can be placed anywhere on the touch panel interface without looking out of place. You may also notice we include icons for those clients who refuse to give up their MiniDisc players, turntables, and other sources that aren't as popular as today's digital high tech gear. We even took into account those clients who absolutely love home theater PC's.
Click on the above image to view the entire Fusion icon set _________________________________________________________________________________ Let's go to step 2 - Spacing |
|||||||||
 |
 |
|||||||||
 |
Copyright 2005-2010 © Blackman Signature Designs, LLC. All right reserved |
