Last time we created a design of our first Boxee app. In this second installment of an ongoing instructional series on building that full skin, we are going to take that design and break it down into the individual controls that we are going to use in our app.
For this exercise, we chose to use a “list”-style interface, similar to that used in Auto-Tune The News. Now we need to take the design we created and break it down into three pieces: a background, a list container and a metadata container.
Background:
The background image control is a static, non-interactive component of the interface that serves as the backdrop for the interactive controls in our app. Using Storyline as an example, your background should include all the elements that aren’t going to change:
List Container:
The list container is the main interactive piece of the application. For our first app, it will be the list of the videos the user can select to watch. We pull from our initial design a blue box to serve as the control’s background.
Metadata Box:
The metadata box is the part of the interface that – you guessed it – shows the metadata for the video selected in the list container. Examples of metadata we are going to display are a thumbnail of the video, when it was posted, runtime, title, summary, etc. While the user will navigate using the list container, the metadata box is where their eyes will spend most of their time. We also pull out a blue box as the background for this control.
We save these individual elements as PNGs and get ready to start building the skeleton of our application’s directory structure.
