03 Initial Design
Introduction
In this lesson, we will discuss some of the basic design choices that will influence your theme. We also will draw some initial design mock-ups that we will use in the next lesson.
Inheritance
There are some really nice features in MythUI that greatly help the designer. One of those benefits is inheritance and, in particular, default inheritance. Contained in your MythTV installation are three themes: default, default-wide, and defaultmenu. All themes inherit from these three themes. Because of that, we will write our theme in pieces, writing only enough of the theme to implement the piece on which we are working. We will rely on the default themes for the pieces that we have not yet written. The huge advantage that we gain is that our theme will be easier to debug, as we will only be introducing small pieces of code at a time.
Aspect Ratio and Base Resolution
Before we are able to create the base window and the menu interface, you need to make some design choices. Some of the choices are, more or less, set in stone from the start. Most, however, we can modify at any time.
The first decision that we need to make is the aspect ratio of our theme. You may already have made that decision when you modified themeinfo.xml in the last lesson. If not, you need to make that choice now. Will your theme be "widescreen" (with an aspect ratio of, say, 16:9) or "square" (with an aspect ratio of 4:3)? That choice must be made now, before we continue, as it will be very difficult to change later and influences most of our future design choices.
After you have settled on an aspect ratio, you should settle on a base resolution. While this can be modified later, doing so can have some unexpected side-effects. A common base resolution for square themes is 800x600; 1280x720 (i.e. 720p) for widescreen themes.
If you have not done so already, set those two values in themeinfo.xml before moving forward.
Overscan
In modern computer programming, we often do not worry about overscan because we design against computer screens with specific resolutions on flat panel screens. While carrying not nearly as much importance now as in the days of highly-inconsistent CRT televisions, overscan still can play a part on consumer televisions. Various organizations have different standards regarding overscan on modern displays. Microsoft's Xbox game developer documentation recommends a 7.5% margin to determine the safe area; the BBC recommends an action-safe margin of 3.5% and a title-safe margin of 5%. In the samples that I provide, I use the BBC's action-safe recommendation of a 3.5% margin for widescreen templates; for square templates, Microsoft's recommendation of 7.5%.
Fonts
Another basic design element that we should discuss is font selection. When designing, I tend to use two fonts: one font that I will use for basic text, and a second font for titles and headings.
There are many fonts that look great on the printed page that will look terrible in a MythTV theme. Fonts for a ten-foot interface (i.e. looking at a display from a distance of about ten feet) need to be easy to read. Serif fonts tend to be difficult to read at a distance, so I almost always avoid them. I look for clean, sans-serif fonts.
If the fonts on your system are not to your liking, there are many resources for additional fonts. Be very aware of the licensing associated with fonts that you choose.
Color Scheme
One of the most influential aspects of a design is the color scheme. Color schemes can set the tone of a design. Strong, widely-varied color schemes portray a different message from subtle, monochromatic color schemes. Decide on basic elements of your theme's color scheme, particularly for the menu interface. We will write our theme so that these design elements can be changed without a lot of effort.
Perhaps the best place to start is with two color choices: background color and text color. Settle on those two colors, and then augment your color scheme with additional colors as needed. I have included links to some tools to help you with color scheme choices at the end of this lesson.
One important thing to note when choosing colors for MythUI: you will need to know the hexadecimal RGB values (e.g. #FF0099) for the colors that you select. The vast majority of tools available to help you select color schemes can provide RGB values.
Menu Design
One of your decision points for menu design is the layout of the menu. There are three options that are most-commonly used; others certainly are possible.
Blue Abstract theme with a traditional, vertical menu layout
Terra theme with a horizontal menu layout, including icons
Metallurgy theme with a grid menu layout
One option is a vertical list. This is the most common menu layout. Many examples exist, including Blue Abstract.
Another option is a horizontal list. Some themes use the button text in combination with an icon, like Terra, for its menu layout. Other themes use just the button text, like in Graphite.
Yet another option is to use a grid, like in Metallurgy. With a grid, you tend to have more real estate to display more complex menus.
Each menu item is comprised of the following elements:
- The text of the menu item (this is the only item that is required to be a part of the menu item; it cannot be relocated)
- An icon for the menu item (optional)
The selected menu item has the following, additional elements available:
- A description of the selected menu item
- An icon and/or image for the selected menu item
These additional elements can be separated from the menu item and appear elsewhere on the screen.
Drafting a Menu Interface Mock-Up
The first mock-up that we will draft is the menu interface. We will use this mock-up in the next lesson to write our initial theme files. We then will return to this mock-up to draft our base window design.
While you can use your favorite word processor to draft your mock-ups, I prefer to use presentation software to test color schemes and fonts. So, start your favorite presentation software and begin with a blank presentation. (You also could use your favorite photo editor for this exercise.) Create a mock-up of the main menu, and test different color schemes and font choices. Include the background color, menu items, the design elements indicating the selected menu item, the menu title, and other elements that are related to your menu design. For now, do not worry too much about other window elements that are not related to the menu. For example, you can skip things like clocks and static background images. We will add those in a later lesson.
Once you have a design that you think you like, run the presentation full-screen, step back from your screen to a distance of about ten feet, and see if you still like your design. Typically, you will find things that you hadn't noticed when designing "up close."
My original menu mock-ups for RoboTheme are included below, using temporary icons borrwed from MythCenter. Some of the standard window dressings are included, also.
Once your mock-up is complete, make a note of your font selections, sizes, colors, and other elements. We will dissect your design and implement it in MythUI in the next lesson.