TV icon design

Ky përkthim është i paplotë. Ju lutemi, ndihmoni të përkthehet ky artikull nga Anglishtja.

When creating app icons for Firefox OS Smart TVs, developers should follow the icon design guidelines defined by Mozilla. However, app developers can still create UI elements (e.g. buttons and action icons) that have their own style while still fitting in with the look and feel of the devices they are distributed on. This article details the icon design guide specifics particular to Firefox OS for TVs.

App launcher icons

App launcher icons give users the first impression of your app on the Home screen. Icons should clearly represent apps and help users to recognize them. Please follow the suggested sizing for common shapes as seen below. When designing an icon, you should reference the standard set of icons and make sure yours is sized proportionately. The best example is a simple white foreground logo with a solid and vivid background color.

Also don’t forget that users may like to change the Home screen's wallpapers, so make sure that your launcher icon looks good with any type of background.

For example:

Icon production

It is recommended that you crop your icon in a round shape (Type A), or use a square shape as a backdrop (Type B). See below for examples.

Type A (Recommended)

Firefox Smart TV app icons are 336 x 336 px images provided in 24-bit PNG format. Each standard OS app icon is contained within or underlayed with a 336 px diameter round shape.

The text panel is automatically generated. Do not include any naming, overlay or drop shadow in the image you provide.

Type B

With a solid background color, developers can create logo images with a maximum size of 220 x 220 px. The remaining space around the icon will be automatically filled with the edge color of the logo image.

Design Principles

We highly recommend not choosing white as the background color for launcher icons — this will make it hard to distinglish the highlight state. Please study the example below for more details.

Example: Highlight launcher

After you selected an app, a white outline will be added to the icon.

Notification Icons

If your app generates notifications, users can get notifications in various contexts, such as the lock screen. The design of a notification icon should ensure its readability and clarity even at small sizes.

Size

A notification icon must be 5.4 x 5.4 rem.

Option icons

Firefox Smart TVs have lots of predefined option icons. You should use these icons to represent standard tasks in your app. If you don't like the default style of the option icons, you can customize option icons for apps; however, please make sure that these icons are created with the sizing guidelines detailed here. We also recommend colors, rounded angle degrees, and stroke weight, to ensure your icons look just like one of the members of the TV icon family.

Size

An option icon must be 10x10 rem.

Style

Note: Please use pure white when designing your own option icons.

When designing icons for different TV resolutions, please refer to the table below for the best experience.

Resolution

Launcher icon

Notification icon

Option icon

2K

33.6x33.6 rem

5.4x5.4 rem

10x10 rem

4K

67.2x67.2 rem

10.8x10.8 rem

20x20 rem

Color Palette

This section details the Firefox OS TV color palette.

Main Colors

There are four launcher icons on Firefox OS Home screen. The color palette for these four icons has been designed to fullfill the needs of legibility, hierarchy, highlight, and feedback.

  • Live TV: #fd0587
  • Application: #00e0c2
  • Dashboard: #ff9732
  • Device: #0583ee

You should avoid the four main colors, thereby helping users to recognize the four main icons quickly.

All Colors

Listed below are the major colors used on Firefox Smart TVs, which are applied to common controls, buttons, and text.

Colors for Buttons

Blue is the standard "pressed/clicked" color in the palette of a Firefox Smart TV.

Colors for text panels

There are three different text panel colors used in Firefox Smart TVs. For app icons, a black overlay with 40% opacity for text panels will be automatically generated.    

  • TV icons: Color: #d90c83; Opacity: 100%
  • Device icons: Color: #4a82ea; Opacity: 100%
  • App icons: Color: #000000; Opacity: 40%

Typography

Firefox OS uses a typeface family named Fira Sans, which is created specifically for the requirements of UI and high-resolution screens.

Main fonts

Fira Sans Light

Fira Sans Light Italic

Fira Sans Regular

Fira Sans Italic

Common text styles

The following table lists the most common styles you may need, with sizes and weights. The combinations listed here are calculated for 2K screens. When working with a different resolution, you can use the conversion formula provided below.

Use cases

REM

Weight

Header

5.4

Light 300

Subheader

4.6

Light 300

Dialog content

3.8

Light 300

Banner

2.8

Light 300

Content / List item

3.2

Regular 400

Info of list item

3.2

Light 300

The status of list item

2.4

Light 300

Converting type sizes between points, pixels, and rems

The calculations are density dependant and you may switch from one pixel density to another to obtain the right ratio of points and rems.
This is the formula to convert point to rem depending on the device's pixel density.

Conversion Formula

We use typographic points as the basis of all our measurements; this was done as point sizes are universally understood in design and locked to a physical measurement. Firefox OS currently reads type best in pixels, and we convert our specified point sizes to pixels per resolution. Here is the formula we used:

1 inch = 72 point (pt)

Type Unit

10 Pixels = 1 rem

Font Weight

PSDs CSS
Light 300
Regular 400
Medium 500

Download

We will soon provide a downloadable file containing all the fonts, including a monospaced variant with 2 weights (regular and bold.)

 

Etiketa dhe Kontribues Dokumentesh

 Përditësuar së fundi nga: Besnik,