Designing a GUI for Home Automation

Part of my job (a huge part of my job) is user interface design for home automation systems.  I use Photoshop to design the interface for touch panel controllers that allow our clients to control just about all the systems of the home.  Audio sources, video sources and TVs, lighting, shades, security, pool, etc., are all accessible from a single touch panel.  Any room in the house can be controlled from anywhere in the house, or even outside the house in an other country.  Here’s a very simplistic explanation of how I get from point A to point Z designing the interface for a music server.

Start with blank slate, layout, conceptualize flow and ergonomics, build each facet of the user interface from scratch in Photoshop.


Save active and inactive states of each button in Photoshop.


Convert buttons to PNGs.


Convert A LOT of buttons to PNGs for each touch panel.


Import buttons into composition and coding software package.


Hand off to programmer to “program” the buttons.


Upload program to processor and to the touch panel, in this case an iPad, and test. [click for video]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s