Embedded GUI Design - Photoshop Can Help

It is always impressive to experience a really “slick” user interface. A truly graphical user interface (GUI) should indeed be pleasant and appealing at first sight. Not all that many years ago we were content with electronic devices with cryptic displays that had little to no graphics; we just wanted the new, novel device to be functional.

But, as time has pushed us forward, our society has become familiar with, and, it is quite clear, dependent upon embedded electronic devices such as cell phones, personal assistants, and your friendly automotive dashboard. “Functional” is no longer enough.

In the world of the desktop computer it is unheard of to not have a “pretty” graphical user interface. In the world of embedded devices pretty GUIs (pronounced “Gooeys”) had been harder to come by. However, the end product audience, you and I, no longer accept a mediocre display on our technological wonders. (We definitely don’t in our games, but that is a whole other story!)

Fortunately, some vendors in the embedded device market had seen that there was not only a need to help graphic designers and engineers work more closely together in the embedded product design world, but that there was an inevitable merger of the two disciplines. One such company in the embedded GUI market, Tilcon, has recently introduced a new version of their GUI design system that substantially reduces the time it takes to make a professional and pretty GUI.

In the embedded graphics world there is the concept of a “virtual” interface. A display, for instance, on the dashboard of your car, might show several meters showing speed and tachometer readings, a bar graph for temperature, a variety of “idiot” lights and even touch-screen controlled buttons. You are shown information in real-time as it is communicated to the display from the many microprocessors throughout the vehicle.

These entities used to be real physical entities, and now they are painted on the screen by the GUI system. In the GUI world these virtual objects are called “widgets.” These “widgets” are painstakingly crafted by graphic artists to appear as real as possible.

Every embedded product GUI design is ultimately a work of aesthetics. To sell in a competitive world, the device must fit into the flow of the overall product team’s conceptual goals. Usually the GUI team creates a “basic” widget set and then has to painstakingly work with individual artistic renderings to write code to recreate the image, or perhaps to import every picture and element. By whatever process, it is no small feat.

Tilcon has elevated the efficiency of the embedded GUI design process to a new level with its recent Adobe  Photoshop  integration. In the Tilcon GUI system, a basic set of widgets are supplied as standard. The embedded designer simply drags and drops the desired widgets on the screen as needed. Once the screen design is complete, the user simply hits the export button and out pops a  Photoshop  file. This file creates all the layers needed by a  Photoshop-based  designer to begin the artistic process of “branding” and creating the desired look and feel of the end product.

The exciting part of this process, for those of you that are familiar with  Photoshop , is that every single widget object is exported into its own “layer,” and the layers are laid out in  Photoshop  “groups.” If a “button” widget has one image when “on” and another for “off,” each state will have its own layer created. This PSD file is delivered directly to the graphic designer. The artist goes to work in parallel with the embedded GUI engineer. Every single item can be hand crafted inside the Adobe toolset, and upon completion, the final file is delivered to the engineer, who simply imports the new look by pushing an “import” button. Suddenly, the screen is gorgeous!

Perhaps even more importantly, the engineer has continued his work unimpeded using just the basic widgets. Team productivity is enhanced. Product management is happy. The sales team will love the new professional appearance of the end result.

The implications of the time savings that this process represents to product design teams are obvious. What might not be so obvious on first inspection is how rapidly a team can “re-skin” its product look, or “custom-brand” the product for its own end customers. The result: a product design team has faster access to great-looking displays, can use the same device for several different end customer’s needs and can deliver a custom appearance for each such customer with much greater ease and time savings. Now, that’s worth seeing!