TV UI Sketch template wireframes

I’ve already talked a lot about how frustrating it can be to be a visual designer at times, but I like to complain every now and then so you’re gonna get an earful now. My apologies.

It’s so frustrating to be working with a client who has ridiculously tight deadlines, forcing me to push all my other projects aside so that I can work on their project, only to have that project change directions at the very last moment negating all of the hard work I had put into it up until that point. That’s exactly what happened to me during the design of this 4k TV UI template design exercise, and I was really bummed that they scratched all of my hard work at the very last minute due to a change in project scope.

tv ui concept home

Homescreen showing a grid of 10 panels with larger icons

tv ui home screen concept 6 icons

Another version of the home screen with just six icons

Smart TV’s and connected homes are all the rage right now, so I’ve been working on a lot of different kinds of TV user interfaces over the past six months or so. This particular one was for demo purposes only (it wouldn’t be a commercial release), but it still needed to look and work like a real TV interface.

Even though my role is a visual designer, I do wire framing and UI design every now and then. There was no UI designer assigned to this particular project, so I had to roll up my sleeves and assume that role before I could go in and start doing the actual visual design work. I like to use Sketch for this sort of thing, which is so much better than using Photoshop or Illustrator for UI design.

tv ui main menu wireframe

Main menu screen showing large and small panels for the main categories (music, movies, games, and VR)

movies screen tv ui menu

This is the menu for the Movies screen – with a transparent slide out menu from the right

tv ui movies details screen

Finally, here is the movies details screen

I spent 5 weeks working out the user flow using Sketch, and then another 2 weeks doing the visual design skinning. It was looking really good, we were making good progress, and then…disaster. The project management folks said that we didn’t need a custom UI at all (we’d use an off the shelf solution instead due to partner agreements), and my services were no longer needed. Such a shame.

I can’t post all the screens and the latest designs that I was working on when they shut us down, since they might still decide to use some of it in the future. But I can offer you some of the earliest wireframe templates that were passed over early in the design process. They won’t be needing those.

Feel free to download these and modify these TV UI templates to your specific needs. Keep in mind you’ll need Sketch to open and edit these files – Photoshop or Illustrator won’t work.

Leave a Reply