Apple TV UI Templates (Sketch)
We are releasing a set of Sketch templates for you to use in your AppleTV interface designs and prototypes. Here they are:
Download AppleTV UI Templates (Sketch)
Design templates are a great way to get jump-started on your projects. They contain the default templates that you can quickly use to customize and make your own. To use the templates, simply download and open the Sketch file. Select one of the page templates (artboards), duplicate it into your own Sketch file, and design away.
Special Features
This is not the first AppleTV UI template and won’t be the last. However, we’ve added a couple special features that we wanted and hadn’t seen before.
- Apple Human Interface Guidelines. We found ourselves referencing the Apple Human Interface Guidelines as we got up to speed with designing on the platform. While designing an Apple TV product screen, for example, we spent a good chunk of time reading the guidelines to understand the nuances there. So to minimize the back and forth we included the most important UI guidelines right in the template itself, in context of where you use them. (see pic below)
- Typography & UI elements. You will want to create your own page layouts at some point, so we’ve included a page of UI elements and typography for you to pick from to make this easier. Simply grab the parts you want and go.
- Additional backgrounds. These are super helpful to change the feel of your app easily while keeping it clean and beautiful. We had fun creating these. We kept them relatively subdued (muted colors and blurry) to ensure your content stays in the forefront.
- TV Chrome. We’ve also included a vector-based TV chrome that you can use to show off your screen designs. We’ve found this very useful to give a more realistic look to screens and put them in context size-wise. We also use this on demos and in case studies.
What to Use the Templates for
Here’s a few things you can use the templates for:
- Design new software. These templates can be used to create high fidelity mockups for any new AppleTV app you design. By taking the templates and designing around your own content you will quickly have a custom UI in place.
- Create a killer demo. If you’re pitching an idea to a client or investor you can quickly create a demo using these templates. Simply grab the relevant screen templates, customize your content, and pop them into a presentation…or even better throw them into a prototyping tool like Invision and create a clickable mockup with which you can simulate real use.
- Reimagine an existing app as a AppleTV app. A specific example of a demo, you can take an existing non-AppleTV app and re-imagine it as one. This is a great way to start a discussion around the idea…as it gives people a concrete vision of how it might look or work.
- Explore AppleTV as a platform. If you’re just curious and want to explore how AppleTV looks and works, check out the templates and guidelines and you’ll understand a lot more about how the platform can be useful for future software applications.
Why We Built This
In a word, speed. We’re doing a lot of work around AppleTV and building these templates made it easier for us to get up to speed quickly. Additionally, we are inspired by great work being done by other folks who have shared similar templates that we’ve used in the past and we want to give back and share what we’ve learned as well. Pay it forward!
Got Improvements?
If you download the templates and have suggestions for improvement, simply email me at josh@rocketinsights.com or do a pull request over on the github repo. We plan to continue to refine and improve these templates going forward.
Now…go make something great!
