I've designed interfaces for television. Some general guidelines for 10-ft UI design...
COLOR: On a TV screen, reversed out type against a dark background is much easier to read than dark type against a light background. Light backgrounds are very bright and make it more difficult to read text. Darker color backgrounds are more soothing and allow for light-colored text to easily be read. CONTRAST: Content shouldn't blend into the background. You want high contrast, but not enough so that the colors actually vibrate. A good way to test for contrast is to add an adjustment layer that toggles between B&W and color in your Photoshop file. You want to avoid muddy grey colors. Also, check your work on several different TV screens if possible. No two televisions are calibrated the same, so having paying attention to color contrast is more important to paying attention to actual colors. FONT SIZE: Whether you're designing for standard definition or HD, the size of text needs to occupy a certain percentage of the screen. So, while 18pt may be perfectly legible in a standard definition interface, a font at the same size in a 720p UI actually feels 50% smaller because it's text characters are occupying less vertical screen real estate. In my experience, I've found that text looks best when it occupies the following percentages of vertical real estate... Screen Titles: 7% Primary Text: 4.5% Secondary Text: 3% Take your target resolution, apply the percentage values, and that's the height in pixels that your font should be. Just like any other form of media, when you're setting type you want to create a visual hierarchy between the different types of elements on the screen. This improves scanability, which is important when viewing from a distance. FONT FACE: Choose a sans-serif (serifs add noise). If space is tight, try using a condensed font. Bold for titles, medium for body copy. Some typefaces I'd recommend on television for their legibility... - Helvetica Neue 57 & 77 Condensed - Franklin Gothic Book & Bold Condensed - Interstate Regular & Bold Condensed ACTION TITLE/SAFE: It's a myth that these don't exist on HD displays. In standard resolution, you'd err on the side of caution and go with something like 90% of the screen real estate as your action safe area, then 95% of your action safe area is your title safe region. With HD you can be less cautious and go with something like 95/95. It's just good practice to force yourself not to have content bleeding off the screen... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Posted from the new ixda.org http://www.ixda.org/discuss?post=48851 ________________________________________________________________ Welcome to the Interaction Design Association (IxDA)! To post to this list ....... disc...@ixda.org Unsubscribe ................ http://www.ixda.org/unsubscribe List Guidelines ............ http://www.ixda.org/guidelines List Help .................. http://www.ixda.org/help
