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.)