Creating Wireframes for Smart TV

On this project I will be using Adobe Illustrator CS 5.5 to create the wireframes and Adobe InDesign 5.5 to bring it all together, this is the easiest way to dealing with a wireframe flow presentation.


The standard screen for HDTV is 1920 by 1080, which Illustrator has that preset already available under “Document Profile > Video and Film > HDTV 1080”

Capture-001 2-25-2013 4.17.32 PM

Capture-002 2-25-2013 4.27.13 PM

Next step is to create and add the TV remote controls Illustrator file.

Capture-003 2-25-2013 5.16.46 PM

Now we create the wireframes for the first user interaction (After the user logs in the system will remember them), we need to provide the user with a visual keyboard and login fields for visual feedback purposes. We also provide with visual cues on the wireframe screen and remote.

Capture-000 2-27-2013 10.43.56 AM

Next we add the interaction of the face being scanned and recognized.

Capture-001 2-27-2013 10.44.03 AM

Capture-002 2-27-2013 10.44.22 AM

Now the voice interface, triggers and commands

Capture-012 2-27-2013 8.16.06 PM

Capture-010 2-27-2013 8.15.00 PM

The “User Experience Mapping” is an excellent reference point to base our wireframes on.

Capture-001 2-28-2013 10.15.57 AM

And that is all I can reveal for this specific project without getting into NDA trouble. Smile

  1. No comments yet.
  1. No trackbacks yet.

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s

%d bloggers like this: