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.

Screen_shot_2011-10-05_at_11

Save active and inactive states of each button in Photoshop.

0screen_shot_2011-10-05_at_11

Convert buttons to PNGs.

Screen_shot_2011-10-06_at_12

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

0screen_shot_2011-10-06_at_12

Import buttons into composition and coding software package.

Screen_shot_2011-10-06_at_12

Hand off to programmer to “program” the buttons.

Screen_shot_2011-10-06_at_12

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

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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