Manual de construção visual do setup VERTV

Page 1

The new configuration graphical interface, Technical Manual



guidelines (Diretrizes)

This manual serves to guide the planning of the layout of the new SETUP of VERTV in order to facilitate understanding of the programmer.

Este manual foi tem a função de guiar a programação do layout do novo SETUP da VERTV, de maneira a facilitar o entendimento do programador.


All positioning is planned from the edges of each screen setup : screen 1 Logo VERTV : 670 x 210 pixels centered

Screen 2 ( central block) Gray box size 740 x 130 pixels ( the text is centered with this at least 5 pixels breather in the margins ) . Size 739 x 42 pixels orange box ( white will contain a left side edge and the upper side of one pixel) .

screen 3 The box pictograms should increase according to the selected giving it highlighted box. The gray text box highlight will move according to the selected option . Size of the text highlighted 350 x 40 pixels box. Distance from the highlighted text to the left side 430 pixels box. Distances between the center and the text box 30 pixels box. Text Size 340 x 300 pixels box. Distance of the text box to left side 430 pixels . Distance of the text box to the side of 40 pixels down . Distance between the text box to highlight box 15 pixels . Size of boxes secondary pictograms 130 x 130 pixels . Distances between boxes pictograms and secondary side 70 pixels (


horizontal ) . Distances between boxes pictograms secondary and upper side 240 pixels ( horizontal ) distances between boxes pictograms 55 pixels . Size of pictograms highlight box 180 x 180 pixels in . Distance between the box and pictograms highlighted in upper side 85 pixels . Size logo VERTV 240 x 80 pixels . Distances between the logo and the right side VERTV 70 pixels . Distances between the logo and the top side of VERTV 40 pixels . These pictograms are to be used in the menu. These pictograms are to be used in the menu. The proportion of the pictograms should be based on respecting the example opposite margin of at least 20 pixels .

screen 4 The selected item should be with typography in orange. This should be the selected channel. Size of pictograms highlighted box 70 x 70 pixels in .

Distance between the box and pictograms highlighted in upper side 20 pixels . Distances between the left 110 pixels box highlighted and pictograms . Distance between the box and the word pictograms featured in Channel 10 pixel distances between the word and the upper lateral channel 40 pixels .


Size orange bonds box 550 x 45 pixels . Distance of the orange box titles for the upper side 130 pixels.Distancias between the orange box titles and left side 110 pixels . The title should always centered on this orange box. Size of the text box with the list of channels 550 x 480 pixels . Distance of the text ( channel list ) to the left side 110 pixels box. Distance of the text box to the upper side 175 pixels . Distance between the channel numbering and the left side of the text box 10 pixels distance between the channel numbering and the upper side of the text box 10 pixels . Distance between the number and the name of the channels 50 pixels . Red box size 40 x 40 pixels . Distance between the red box and the lower side 10 pixels . Distances between the red box and left side 110 pixels . Distance between the red box and the word Rename 15 pixels .

Distances between word Rename and lower side 10 pixels . Green box size 40 x 40 pixels . Distance between the green box and the lower side 10 pixels . Distances between the green box and red box 190 pixels . Distance between the green box and the word Sort 15 pixels . Distances between the word and the lower lateral Sort 10 pixels . Yellow box size 40 x 40 pixels . Distance between the yellow box and the lower side 10 pixels . Distances between the yellow box and green box 190 pixels . Distance between the yellow box and the word Lock 15 pixels . Distances between the word Lock and lower side 10 pixels . Blue Box Size 40 x 40 pixels . Distance between the blue box and the lower side 10 pixels . Distance between the blue box and the lower side 10 pixels . Distances between the blue box and amber box 190 pixels . Distance between the blue box and the word Delete 15 pixels . Distances between the word Delete and lower side 10 pixels . Size of image 460 x 260 pixels box. Distance between the picture box and the top side 130 pixels . Distances between picture box and right side 130 pixels . Image size of 410 x 220 pixels channel . This channel should this centralized within the picture box . Size of 50 x 40 pixels Oranges boxes . Distance between orange boxes and picture boxes 10 pixels . Distances between the orange boxes 10 pixels . Distance between orange boxes and the words Move , Favorite and swith 10 pixels . Words should be centralized in relation oranges boxes . The words OK , FAV and TV should be centralized within the orange boxes .

screen 5 Size logo VERTV 240 x 80 pixels . The typography of the channel that is selected should switch to black color with opacity of 60 % . Distances between the logo and the right

side VERTV 70 pixels . Distances between the logo and the top side of VERTV 40 pixels . Image size of 579 x 307 pixels channel . Distance image of the box channel to the first white box 0 pixels . Size of the first white box 579 x 43 pixels . Distance of the first white box to the left side 30 pixels . Distance from the first to the second white box white box 0 pixels . Size of the second white box 1220 x 250 pixels . Distance of the second white box to the left side 30 pixels . Distance of the second white box to the bottom side 95 pixels . Size of the spaces between the boxes and the spaces of the sides ( white spaces ) 2 pixels . Size of boxes of oranges texts (All channels / Channels ) 250 x 40 pixels . Size of boxes of oranges texts of the first white box 272 x 39 pixels / 301 x 39 pixels ( the text of this box should be centered ) . Size of boxes of gray text (All channels / Channels ) 962 x 39 pixels . Distance of the texts of the orange text boxes to the side of the boxes


left 5 pixels . Size of the height of the red circle 22 pixels. Distance of the red circle to the left side 438 pixels . Distance of the red circle to the bottom side 41 pixels . Distance between the red circle and the word Record 15 pixels . Distances between the word Record and lower side 40 pixels . Red box size 40 x 40 pixels . Distance between the red box and the lower side 30 pixels . Distances between the red box and left side 555 pixels . Distance between the red box and the word Manage 15 pixels . Distance between the red box and the word Manage 15 pixels .

Distances between the word Manage and lower side 40 pixels . Green box size 40 x 40 pixels . Distance between the green box and the lower side 30 pixels . Distances between the green box and red box 112 pixels . Distance between the green box and the word Date 15 pixels . Distances between the word Date and lower side 40 pixels . Orange Size 40 x 40 pixels box. Distance between Orange Box and side bottom 30 pixels . Distances between the Orange Box and Green Box 112 pixels . Distance between Orange box and the word Exit 15 pixels . Distances between the word and the Orange side bottom 40 pixels . screen 6 The background is defined in the same screen 5 however slightly darkened to highlight the central box. Size of the white box background 302 x 133 pixels ( this box should it centered on the screen ) . Size of orange text box 296 x 31 pixels ( this box should this 3 pixels away from the left and top sides of the white box and the text should be centered on it ) . Gray box size 296 x 95 pixels ( this box should this 3 pixels away from the left and bottom ) . Size of the black boxes 40 x 40 pixels and that the opacity of them should be at 60 % ( this box should be centralized in the gray box by 10 pixels distance between them) .

screen 7 The selected item should be with typography in orange. Size of pictograms highlighted box 70 x 70 pixels in . Distance between the upper side 20 pixels Distances between the left 110 pixels box highlighted in pictograms and pictograms box and highlighted .

Distance between the box and the word pictograms Spotlight Search 10 pixels . Distances between the search word and the upper side 40 pixels . Size of boxes of oranges titles 550 x 45 pixels . Size of boxes of oranges titles 550 x 45 pixels . Distance from orange boxes titles to upper side 130 pixels . Distance between orange boxes 10 pixels . Distance between the first Orange Box titles and left side 110 pixels . The title should always centered on this orange boxes . Size of text boxes with the list of channels 550 x 480 pixels. Distance of the first text box with the channel list to the left side 110 pixels . Distance of the text box to the first box the orange pixels . Distance between the boxes of gray text 10 pixels . Distance between the channel numbering and the left side of the text box 10 pixels . Distance between the channel numbering and the upper side of the text box 10 pixels . Distance between the number and the name of the channels 50 pixels .


screen 8 The selected item should be with typography in black. Size of pictograms highlighted box 70 x 70 pixels in . Distance between the box and pictograms highlighted in upper side 20 pixels . Distances between the left 110 pixels box highlighted and pictograms . Distance between the box and the word highlighted in pictograms Manual 10 pixels .

Distances between the word manual and the top side 40 pixels . Size of the white box background 639 x 285 pixels ( this box should it centered on the screen ) . Size gray text boxes 315 x 44 pixels ( that should be grouped centralized at 3 pixels from the banks and the other as in the example and the text of each box centered therein ) . Size of charging boxes 640 x 44 Pixels ( the gray box will be filled in white as progress) . Distance of the first charging box to white box 40 pixels ( these boxes should it centered on the screen ) . Distances between the charging boxes 20 pixels . Distance of the texts of the charging boxes to their respective boxes 15 pixels ( the texts must be aligned as the example here ) . Size of oranges boxes 40 x 40 pixels ( this group should be centered between the right and left side of the page as in the example above). Distance between Orange box ok and lower side 30 pixels . Distances between the Orange and the Orange box ok Exit 112 pixels box. Distance between the box and the word Ok Orange Strength 15 pixels . Distance between the box and the word Orange Exit Exit 15 pixels . Distances between Strength and Exit words and lower side 40 pixels .

screen 9 The selected item should be with typography in black. Size of pictograms highlighted box 70 x 70 pixels in . Distance between the box and pictograms highlighted in upper side 20 pixels .

Distances between the left 110 pixels box highlighted and pictograms . Distance between the box and the word highlighted in pictograms All 10 pixels . All distances between the word and the upper side 40 pixels . Size of the white box background 821 x 459 pixels ( this box should it centered on the screen ) . Size gray text boxes 401 x 448 pixels ( which should be grouped centralized at 3 pixels from the banks and the other as in the example text , and each of them centered boxes ) . The arrows indicate that further posterior and anterior to the selected item options . Distance between Orange box ok and lower side 30 pixels . Distances between the Orange and the Orange box ok Exit 112 pixels box. Distance between the box and the word Ok Orange Strength 15 pixels . Distance between Orange box with arrows and the word list TP 15 pixels . Distance between the box and the word Orange Exit Exit 15 pixels . Distances between Strength , TP and Exit List words and the lower side 40 pixels .

screen 10 The background is defined in the same screen 5 however slightly darkened to highlight the central box. Gray box size 740 x 130 pixels ( the text is centered with this at least 5 pixels breather in the margins ) . Size 739 x 42 pixels orange box ( white will contain a left side edge and

the upper side of one pixel) . Size of oranges boxes 40 x 40 pixels ( this group should be centered between the right and left side of the page as in the example above). Distance between Orange ok box and the bottom side of the gray box 30 pixels . Distances between the Orange and the Orange box ok Exit 112 pixels box.


Distance between the box and the word Orange Ok Ok 15 pixels . Distance between the box and the word Orange Exit Exit 15 pixels . Distances between Ok and Exit words and lower side 13 pixels .

screen 11 The background is defined in the same screen 5 however slightly darkened to highlight the central box. Gray box size 740 x 130 pixels ( the text is centered with this at least 5 pixels breather in the margins ) . Size 739 x 42 pixels orange box ( white will contain a left side edge and the upper side of one pixel) .

screen 12 The selected item should be with typography in black. Size of pictograms highlighted box 70 x 70 pixels in .

Distance between the box and pictograms highlighted in upper side 20 pixels . Distances between the left 110 pixels box highlighted and pictograms. Distance between the box and the word highlighted in pictograms All 10 pixels.


Distances between the word and the upper lateral User 40 pixels . Size of the white box background 821 x 459 pixels ( this box should it centered on the screen ) . Size gray text boxes 401 x 448 pixels ( which should be grouped centralized at 3 pixels from the banks and the other as in the example text , and each of them centered boxes ) . The arrows indicate that further posterior and anterior to the selected item options .

Distance between Orange box ok and lower side 30 pixels . Distances between the colored boxes 112 pixels . Distance between the box and the word Ok Orange Strength 15 pixels . Distance between Orange box with arrows and select Word 15 pixels . Distance between the red box and the word Page 15 pixels . Distances between the words Save , and Select Page to the bottom side 40 pixels .

screen 13 The selected item should be with typography in black. Size of pictograms highlighted box 70 x 70 pixels in . Distance between the box and pictograms highlighted in upper side 20 pixels . Distances between the left 110 pixels box highlighted and pictograms . Distance between the box and the word highlighted in pictograms All 10 pixels. Distances between the word and the upper lateral User 40 pixels . Size of the white box background 821 x 459 pixels ( this box should it centered on the screen ) . Size gray text boxes 401 x 448 pixels ( which should be grouped centralized

at 3 pixels from the banks and the other as in the example text , and each of them centered boxes ) . The arrows indicate that further posterior and anterior to the selected item options. Distance between Orange box ok and lower side 30 pixels . Distances between boxes Laranjas112 pixels . Distance between the box and the word Ok Orange Save 15 pixels . Distance between Orange box with arrows and select Word 15 pixels . Distances between words and Select Save to the bottom side 40 pixels .


screen 14 The selected item should be with typography in black. Size of pictograms highlighted box 70 x 70 pixels in .

Distance between the box and pictograms highlighted in upper side 20 pixels . Distances between the box highlighted in pictograms and left side 110 pixels. Distance between the box and the word highlighted in pictograms All 10 pixels. Distances between the word and the upper lateral User 40 pixels . Size of the white box background 821 x 459 pixels ( this box should it centered on the screen ) . Size gray text boxes 401 x 448 pixels ( which should be grouped centralized at 3 pixels from the banks and the other as in the example text , and each of them centered boxes ) . The arrows indicate that further posterior and anterior to the selected item options . Distance between Orange Box and side bottom 30 pixels . Distance between Orange box and the word select 15 pixels . Distances between the word Select to the bottom side 40 pixels .

screen 15 The selected item should be with typography in black. Size of pictograms highlighted box 70 x 70 pixels in .

Distance between the box and pictograms highlighted in upper side 20 pixels . Distances between the left 110 pixels box highlighted and pictograms . Distance between the box and the word highlighted in pictograms All 10 pixels . Distances between the word and the upper lateral User 40 pixels . Size of the white box background 821 x 459 pixels ( this box should it centered on the screen ) . Size gray text boxes 401 x 448 pixels ( which should be grouped centralized at 3 pixels from the banks and the other as in the example text , and each of them centered boxes ) . Distance between Orange box ok and lower side 30 pixels . Distances between boxes Laranjas112 pixels . Distance between the box and the word Ok Orange Save 15 pixels . Distance between Orange box with arrows and select Word 15 pixels . Distances between words and Select Save to the bottom side 40 pixels .

screen 16 Size of pictograms highlighted box 70 x 70 pixels Distance between the box and pictograms highlighted in upper side 20 pixels . Distances between the left 110 pixels box highlighted and pictograms . Distance between the box and the word highlighted in pictograms (main title ) 10 pixels . Distances between the word ( primarily ) and the upper side 40 pixels . Size of orange title box 555 x 44 pixels ( the title should be centered on this box ) . Distances between the orange box and left side 110 pixels .

Distance between orange and gray box 0 pixels . Text Size ash 555 x 481 pixels ( text left-aligned this should always respect a distance of 10 pixels from the sides ) box. Distances between the box and gray lower side 67 pixels . Distance between the box and the word pictograms Featured Video 10 pixels . Distances between Orange and red boxes 112 pixels . Distance between the Orange and the word Select Ok box 15 pixels . Distance between the red box and the word UP Folder 15 pixels . Distances between words and UP Select Folder to the bottom side 10 pixels .


screen 17 Size of pictograms highlighted box 70 x 70 pixels in . Distance between the box and pictograms highlighted in upper side 20 pixels . Distances between the left 110 pixels box highlighted and pictograms .

Distance between the box and the word highlighted in pictograms (main title ) 10 pixels . Distances between the word (main title ) and the upper side 40 pixels . Size of the white box background 821 x 459 pixels ( this box should it centered on the screen ) .


Size gray text boxes 401 x 448 pixels ( which should be grouped centralized at 3 pixels from the banks and the other as in the example text ,

and each of them centered boxes ) .

screen 18 The selected item should be with typography in black. Size of pictograms highlighted box 70 x 70 pixels in . Distance between the box and pictograms highlighted in upper side 20

pixels . Distances between the left 110 pixels box highlighted and pictograms . Distance between the box and the word highlighted in pictograms comvenient 10 pixels . Distances between the word and the upper lateral comvenient 40 pixels . Size of the white box background 821 x 459 pixels ( this box should it centered on the screen ) . Size gray text boxes 401 x 448 pixels ( which should be grouped centralized at 3 pixels from the banks and the other as in the example text , and each of them centered boxes ) . Distance between Orange box ok and lower side 30 pixels . Distances between the orange boxes 112 pixels . Distance between Orange box with arrows the word Select 15 pixels . Distance between Orange box with OK and the word Enter 15 pixels . Distance between the box and the word Orange Exit Exit 15 pixels . Distances between words Select, Enter and Exit to the bottom side 40 pixels .

screen 19 Size of pictograms highlighted box 70 x 70 pixels

Distance between the box and pictograms highlighted in upper side 20 pixels . Distances between the left 110 pixels box highlighted and pictograms . Distance between the box and the word highlighted in pictograms Token 10 pixels . Distances between the token word and the upper side 40 pixels . Size of the white box background 821 x 459 pixels ( this box should it centered on the screen ) . Size gray text boxes 401 x 448 pixels ( which should be grouped centralized at 3 pixels from the banks and the other as in the example text , and each of them centered boxes ) . Distance between the red box and the lower side 30 pixels . Distances between orange and red boxes 112 pixels . Distance between Orange Exit word Exit15 pixels box. Distance between Red Box and the word Page 15 pixels . Distances between words and Paget Exit to the bottom side 40 pixels .

screen 20 Size of the black box recording featured 676 x 25 pixels in . Size of charging boxes 8 x 513 Pixels ( the white box will be filled in orange in the tempo , and should it centered on the black box with a distance of 10 pixels from the time counter ) . Distance from the black box recording ideas and upper side 22 pixels ( this box should be centered) . Size of orange highlighted box 198 x 38 pixels (the text should stop

this) on. Distances orange highlighted box and 26 pixels on the lower side. Distances orange highlighted box and right side in 24 pixels.


screen 21 Size of the black box recording featured 676 x 25 pixels in. Size of charging boxes 8 x 513 Pixels (the white box will be filled in orange in the tempo, and should it centered on the black box with a distance of 10 pixels from the time counter). Distance from the black box recording highlighted in the left side and 22 pixels (this box should be centered).


Todo o posicionamento é planejado a partir das bordas de cada tela do setup: Tela 1 Logo VERTV: 670 x 210 pixels centralizada

Tela 2 (bloco centralizado) Tamanho da caixa cinza 740 x 130 pixels (o texto deverá esta centralizado com no mínimo 5 pixels de respiro nas margens). Tamanho da caixa laranja 739 x 42 pixels (deverá conter uma borda branca do lado esquerdo e na lateral superior de 1 pixel).

Tela 3 A caixa de pictogramas deverá aumentar de acordo com a caixa selecionada dando a ela destaque. A caixa de texto cinza de destaque se movimentará de acordo com a opção selecionada. Tamanho da caixa de texto de destaque 350 x 40 pixels. Distancia da caixa de texto de destaque para a lateral esquerda 430 pixels. Distancias entre a caixa central e a caixa de texto 30 pixels. Tamanho da caixa de texto 340 x 300 pixels. Distancia da caixa de texto para a lateral esquerda 430 pixels. Distancia da caixa de texto para a lateral de baixo 40 pixels. Distancia entre a caixa de texto com a caixa de destaque 15 pixels. Tamanho das caixas de pictogramas secundárias 130 x 130 pixels. Distancias entre as caixas de pictogramas secundárias e laterais 70


pixels (horizontais). Distancias entre as caixas de pictogramas secundárias e lateral superior 240 pixels (horizontais) Distancias entre as caixas de pictogramas 55 pixels. Tamanho da caixa de pictogramas em destaque 180 x 180 pixels. Distancia entre a caixa de pictogramas em destaque e lateral superior 85 pixels. Tamanho logo VERTV 240 x 80 pixels. Distancias entre o logo da VERTV e a lateral direita 70 pixels. Distancias entre o logo da VERTV e a lateral superior 40 pixels. Estes são os pictogramas a serem utilizados no menu. Estes são os pictogramas a serem utilizados no menu. A proporção dos pictogramas deve se basear no exemplo ao lado respeitando a margem de no mínimo 20 pixels.

Tela 4 O item selecionado deverá estar com a tipografia na cor laranja. A imagem deverá ser do canal selecionado. Tamanho da caixa de pictogramas em destaque 70 x 70 pixels.

Distancia entre a caixa de pictogramas em destaque e lateral superior 20 pixels. Distancias entre a caixa de pictogramas em destaque e lateral esquerda 110 pixels. Distancia entre a caixa de pictogramas em destaque e a palavra Channel 10 pixels Distancias entre a palavra channel e a lateral superior 40 pixels.


Tamanho da caixa de títulos laranja 550 x 45 pixels. Distancia da caixa de títulos laranja para a lateral superior 130 pixels. Distancias entre a caixa de títulos laranja e a lateral esquerda 110 pixels. O título sempre deverá esta centralizado na caixa laranja. Tamanho da caixa de texto com a lista de canais 550 x 480 pixels. Distancia da caixa de texto (lista de canais) para a lateral esquerda 110 pixels. Distancia da caixa de texto para a lateral superior 175 pixels. Distancia entre a numeração dos canais e a lateral esquerda da caixa de texto 10 pixels Distancia entre a numeração dos canais e a lateral superior da caixa de texto 10 pixels. Distancia entre a numeração e o nome dos canais 50 pixels. Tamanho da caixa vermelha 40 x 40 pixels. Distancia entre a caixa vermelha e a lateral inferior 10 pixels. Distancias entre a caixa vermelha e lateral esquerda 110 pixels. Distancia entre a caixa vermelha e a palavra Rename 15 pixels.

Distancias entre a palavra Rename e a lateral inferior 10 pixels. Tamanho da caixa verde 40 x 40 pixels. Distancia entre a caixa verde e a lateral inferior 10 pixels. Distancias entre a caixa verde e a caixa vermelha 190 pixels. Distancia entre a caixa verde e a palavra Sort 15 pixels. Distancias entre a palavra Sort e a lateral inferior 10 pixels. Tamanho da caixa amarela 40 x 40 pixels. Distancia entre a caixa amarela e a lateral inferior 10 pixels. Distancias entre a caixa amarela e a caixa verde 190 pixels. Distancia entre a caixa amarela e a palavra Lock 15 pixels. Distancias entre a palavra Lock e a lateral inferior 10 pixels. Tamanho da caixa azul 40 x 40 pixels. Distancia entre a caixa azul e a lateral inferior 10 pixels. Distancia entre a caixa azul e a lateral inferior 10 pixels. Distancias entre a caixa azul e a caixa amarela 190 pixels. Distancia entre a caixa azul e a palavra Delete 15 pixels. Distancias entre a palavra Delete e a lateral inferior 10 pixels. Tamanho da caixa de imagem 460 x 260 pixels. Distancia entre a caixa de imagem e a lateral superior 130 pixels. Distancias entre a caixa de imagem e a lateral direita 130 pixels. Tamanho da imagem do canal 410 x 220 pixels. A imagem do canal deverá esta centralizada dentro da caixa de imagem. Tamanho das caixas Laranjas 50 x 40 pixels. Distancia entre as caixas laranjas e a caixas de imagens 10 pixels. Distancias entre as caixas laranjas 10 pixels. Distancia entre as caixas laranjas e as palavras Move, Favorite e Swith 10 pixels. As palavras devem estar centralizadas em relação as caixas laranjas. As palavras OK, FAV e TV devem estar centralizadas dentro das caixas laranjas.

Tela 5 Tamanho logo VERTV 240 x 80 pixels. A tipografia do canal que for selecionado deverá alterar para cor preta com opacidade de 60%. Distancias entre o logo da VERTV e a lateral direita 70 pixels.

Distancias entre o logo da VERTV e a lateral superior 40 pixels. Tamanho da imagem do canal 579 x 307 pixels. Distancia da imagem do canal caixa para a primeira caixa branca 0 pixels. Tamanho da primeira caixa branca 579 x 43 pixels. Distancia da primeira caixa branca para a lateral esquerda 30 pixels. Distancia da primeira caixa branca para a segunda caixa branca 0 pixels. Tamanho da segunda caixa branca 1220 x 250 pixels. Distancia da segunda caixa branca para a lateral esquerda 30 pixels. Distancia da segunda caixa branca para a lateral inferior 95 pixels. Tamanho dos espaços entre as caixas e os espaços das laterais (espaços brancos) 2 pixels. Tamanho das caixas de textos laranja (All channels / Canais) 250 x 40 pixels. Tamanho das caixas de textos laranjas da primeira caixa branca 272 x 39 pixels / 301 x 39 pixels (o texto desta caixa deverá estar centralizado). Tamanho das caixas de textos cinza (All channels / Canais) 962 x 39 pixels. Distancia dos textos das caixas de textos laranja para a lateral esquerda das caixas 5 pixels.


Tamanho da altura do circulo vermelho 22 pixels. Distancia do circulo vermelho para a lateral esquerda 438 pixels. Distancia do circulo vermelho para a lateral inferior 41 pixels. Distancia entre o circulo vermelho e a palavra Record 15 pixels. Distancias entre a palavra Record e a lateral inferior 40 pixels. Tamanho da caixa vermelha 40 x 40 pixels. Distancia entre a caixa vermelha e a lateral inferior 30 pixels. Distancias entre a caixa vermelha e lateral esquerda 555 pixels. Distancia entre a caixa vermelha e a palavra Manage 15 pixels. Distancia entre a caixa vermelha e a palavra Manage 15 pixels. Distancias entre a palavra Manage e a lateral inferior 40 pixels.

Tamanho da caixa verde 40 x 40 pixels. Distancia entre a caixa verde e a lateral inferior 30 pixels. Distancias entre a caixa verde e a caixa vermelha 112 pixels. Distancia entre a caixa verde e a palavra Date 15 pixels. Distancias entre a palavra Date e a lateral inferior 40 pixels. Tamanho da caixa laranja 40 x 40 pixels. Distancia entre a caixa Laranja e a lateral inferior 30 pixels. Distancias entre a caixa Laranja e a caixa verde 112 pixels. Distancia entre a caixa Laranja e a palavra Exit 15 pixels. Distancias entre a palavra Laranja e a lateral inferior 40 pixels.

Tela 6 O fundo é o mesmo definido na tela 5 porem levemente escurecido para dar destaque a caixa central. Tamanho da caixa branca de fundo 302 x 133 pixels (esta caixa deverá esta centralizada na tela). Tamanho da caixa laranja de texto 296 x 31 pixels (esta caixa deverá esta a 3 pixels de distancia das laterais esquerda e superior da caixa branca e o texto deverá ser centralizado nela). Tamanho da caixa cinza 296 x 95 pixels (esta caixa deverá esta a 3 pixels de distancia das laterais esquerda e inferior). Tamanho das caixas preta 40 x 40 pixels sendo que a opacidade delas devem estar em 60% (esta caixa devem estar centralizadas na caixa cinza mantendo 10 pixels de distancia entre elas).

Tela 7 O item selecionado deverá estar com a tipografia na cor laranja. Tamanho da caixa de pictogramas em destaque 70 x 70 pixels. Distancia entre a caixa de pictogramas em destaque e lateral superior 20 pixels Distancias entre a caixa de pictogramas em destaque e lateral esquerda 110 pixels.

Distancia entre a caixa de pictogramas em destaque e a palavra Search 10 pixels. Distancias entre a palavra Search e a lateral superior 40 pixels. Tamanho das caixas de títulos laranja 550 x 45 pixels. Tamanho das caixas de títulos laranja 550 x 45 pixels. Distancia das caixas de títulos laranja para a lateral superior 130 pixels. Distancia entre as caixas laranja 10 pixels. Distancia entre a primeira caixa de títulos laranja e a lateral esquerda 110 pixels. O título sempre deverá esta centralizado nas caixas laranja. Tamanho das caixas de texto com a lista de canais 550 x 480 pixels. Distancia da primeira caixa de texto com a lista de canais para a lateral esquerda 110 pixels. Distancia da caixa de texto para a primeira caixa laranja o pixels. Distancia entre as caixas de texto cinza 10 pixels. Distancia entre a numeração dos canais e a lateral esquerda da caixa de texto 10 pixels. Distancia entre a numeração dos canais e a lateral superior da caixa de texto 10 pixels. Distancia entre a numeração e o nome dos canais 50 pixels.


Tela 8 O item selecionado deverá estar com a tipografia na cor preta. Tamanho da caixa de pictogramas em destaque 70 x 70 pixels. Distancia entre a caixa de pictogramas em destaque e lateral superior 20 pixels. Distancias entre a caixa de pictogramas em destaque e lateral esquerda 110 pixels. Distancia entre a caixa de pictogramas em destaque e a palavra Manual 10 pixels. Distancias entre a palavra Manual e a lateral superior 40 pixels.

Tamanho da caixa branca de fundo 639 x 285 pixels (esta caixa deverá esta centralizada na tela). Tamanho das caixas de textos cinzas 315 x 44 pixels (que deverão estar agrupadas centralizadas a 3 pixels de distancia das margens e das outras como no exemplo e o texto de cada uma das caixas centralizados nelas). Tamanho das caixas de carregamento 640 x 44 Pixels (a caixa da cor cinza será preenchida na cor branca conforme o andamento). Distancia da primeira caixa de carregamento para a caixa branca 40 pixels (estas caixas deverá esta centralizada na tela). Distancias entre as caixas de carregamento 20 pixels. Distancia dos textos das caixas de carregamento para suas respectivas caixas 15 pixels (os respectivos textos devem estar alinhados como o exemplo ao lado). Tamanho das caixas laranjas 40 x 40 pixels (esse grupo deve estar centralizado entre a lateral direita e esquerda da página como no exemplo ao lado). Distancia entre a caixa Laranja ok e a lateral inferior 30 pixels. Distancias entre a caixa Laranja ok e a caixa Laranja Exit 112 pixels. Distancia entre a caixa Laranja Ok e a palavra Strength 15 pixels. Distancia entre a caixa Laranja Exit e a palavra Exit 15 pixels. Distancias entre as palavras Strength e Exit e a lateral inferior 40 pixels.

Tela 9 O item selecionado deverá estar com a tipografia na cor preta. Tamanho da caixa de pictogramas em destaque 70 x 70 pixels. Distancia entre a caixa de pictogramas em destaque e lateral superior 20 pixels.

Distancias entre a caixa de pictogramas em destaque e lateral esquerda 110 pixels. Distancia entre a caixa de pictogramas em destaque e a palavra All 10 pixels. Distancias entre a palavra All e a lateral superior 40 pixels. Tamanho da caixa branca de fundo 821 x 459 pixels (esta caixa deverá esta centralizada na tela). Tamanho das caixas de textos cinzas 401 x 448 pixels (que deverão estar agrupadas centralizadas a 3 pixels de distancia das margens e das outras como no exemplo e o texto de cada uma das caixas centralizados nelas). As setas indicam que há mais opções posteriores e anteriores no item selecionado. Distancia entre a caixa Laranja ok e a lateral inferior 30 pixels. Distancias entre a caixa Laranja ok e a caixa Laranja Exit 112 pixels. Distancia entre a caixa Laranja Ok e a palavra Strength 15 pixels. Distancia entre a caixa Laranja com setas e a palavra TP list 15 pixels. Distancia entre a caixa Laranja Exit e a palavra Exit 15 pixels. Distancias entre as palavras Strength, TP List e Exit e a lateral inferior 40 pixels.

Tela 10 O fundo é o mesmo definido na tela 5 porem levemente escurecido para dar destaque a caixa central. Tamanho da caixa cinza 740 x 130 pixels (o texto deverá esta centralizado com no mínimo 5 pixels de respiro nas margens). Tamanho da caixa laranja 739 x 42 pixels (deverá conter uma borda

branca do lado esquerdo e na lateral superior de 1 pixel). Tamanho das caixas laranjas 40 x 40 pixels (esse grupo deve estar centralizado entre a lateral direita e esquerda da página como no exemplo ao lado). Distancia entre a caixa Laranja ok e a lateral inferior da caixa cinza 30 pixels. Distancias entre a caixa Laranja ok e a caixa Laranja Exit 112 pixels. Distancia entre a caixa Laranja Ok e a palavra Ok 15 pixels.


Distancia entre a caixa Laranja Exit e a palavra Exit 15 pixels. Distancias entre as palavras Ok e Exit e a lateral inferior 13 pixels.

Tela 11 O fundo é o mesmo definido na tela 5 porem levemente escurecido para dar destaque a caixa central. Tamanho da caixa cinza 740 x 130 pixels (o texto deverá esta centralizado com no mínimo 5 pixels de respiro nas margens). Tamanho da caixa laranja 739 x 42 pixels (deverá conter uma borda branca do lado esquerdo e na lateral superior de 1 pixel).

Tela 12 O item selecionado deverá estar com a tipografia na cor preta. Tamanho da caixa de pictogramas em destaque 70 x 70 pixels.

Distancia entre a caixa de pictogramas em destaque e lateral superior 20 pixels. Distancias entre a caixa de pictogramas em destaque e lateral esquerda 110 pixels.


Distancia entre a caixa de pictogramas em destaque e a palavra All 10 pixels. Distancias entre a palavra User e a lateral superior 40 pixels. Tamanho da caixa branca de fundo 821 x 459 pixels (esta caixa deverá esta centralizada na tela). Tamanho das caixas de textos cinzas 401 x 448 pixels (que deverão estar agrupadas centralizadas a 3 pixels de distancia das margens e das outras como no exemplo e o texto de cada uma das caixas centralizados nelas). As setas indicam que há mais opções posteriores e anteriores no item

selecionado. Distancia entre a caixa Laranja ok e a lateral inferior 30 pixels. Distancias entre as caixas coloridas 112 pixels. Distancia entre a caixa Laranja Ok e a palavra Strength 15 pixels. Distancia entre a caixa Laranja com setas e a palavra select 15 pixels. Distancia entre a caixa vermelha e a palavra Page 15 pixels. Distancias entre as palavras Save, Select e Page para a lateral inferior 40 pixels.

Tela 13 O item selecionado deverá estar com a tipografia na cor preta. Tamanho da caixa de pictogramas em destaque 70 x 70 pixels. Distancia entre a caixa de pictogramas em destaque e lateral superior 20 pixels. Distancias entre a caixa de pictogramas em destaque e lateral esquerda 110 pixels. Distancia entre a caixa de pictogramas em destaque e a palavra All 10 pixels. Distancias entre a palavra User e a lateral superior 40 pixels. Tamanho da caixa branca de fundo 821 x 459 pixels (esta caixa deverá esta centralizada na tela).

Tamanho das caixas de textos cinzas 401 x 448 pixels (que deverão estar agrupadas centralizadas a 3 pixels de distancia das margens e das outras como no exemplo e o texto de cada uma das caixas centralizados nelas). As setas indicam que há mais opções posteriores e anteriores no item selecionado. Distancia entre a caixa Laranja ok e a lateral inferior 30 pixels. Distancias entre as caixas Laranjas112 pixels. Distancia entre a caixa Laranja Ok e a palavra Salve 15 pixels. Distancia entre a caixa Laranja com setas e a palavra select 15 pixels. Distancias entre as palavras Save e Select para a lateral inferior 40 pixels.


Tela 14 O item selecionado deverá estar com a tipografia na cor preta. Tamanho da caixa de pictogramas em destaque 70 x 70 pixels.

Tela 15 O item selecionado deverá estar com a tipografia na cor preta. Tamanho da caixa de pictogramas em destaque 70 x 70 pixels. Tela 16 Tamanho da caixa de pictogramas em destaque 70 x 70 pixels Distancia entre a caixa de pictogramas em destaque e lateral superior 20 pixels. Distancias entre a caixa de pictogramas em destaque e lateral esquerda 110 pixels. Distancia entre a caixa de pictogramas em destaque e a palavra (título principal) 10 pixels. Distancias entre a palavra (título principal) e a lateral superior 40 pixels. Tamanho da caixa laranja de título 555 x 44 pixels (o título deve estar centralizado nesta caixa). Distancias entre a caixa laranja e lateral esquerda 110 pixels.

Distancia entre a caixa de pictogramas em destaque e lateral superior 20 pixels. Distancias entre a caixa de pictogramas em destaque e lateral esquerda 110 pixels Distancia entre a caixa de pictogramas em destaque e a palavra All 10 pixels. Distancias entre a palavra User e a lateral superior 40 pixels. Tamanho da caixa branca de fundo 821 x 459 pixels (esta caixa deverá esta centralizada na tela). Tamanho das caixas de textos cinzas 401 x 448 pixels (que deverão estar agrupadas centralizadas a 3 pixels de distancia das margens e das outras como no exemplo e o texto de cada uma das caixas centralizados nelas). As setas indicam que há mais opções posteriores e anteriores no item selecionado. Distancia entre a caixa Laranja e a lateral inferior 30 pixels. Distancia entre a caixa Laranja e a palavra select 15 pixels. Distancias entre a palavra Select para a lateral inferior 40 pixels.

Distancia entre a caixa de pictogramas em destaque e lateral superior 20 pixels. Distancias entre a caixa de pictogramas em destaque e lateral esquerda 110 pixels. Distancia entre a caixa de pictogramas em destaque e a palavra All 10 pixels. Distancias entre a palavra User e a lateral superior 40 pixels. Tamanho da caixa branca de fundo 821 x 459 pixels (esta caixa deverá esta centralizada na tela). Tamanho das caixas de textos cinzas 401 x 448 pixels (que deverão estar agrupadas centralizadas a 3 pixels de distancia das margens e das outras como no exemplo e o texto de cada uma das caixas centralizados nelas). Distancia entre a caixa Laranja ok e a lateral inferior 30 pixels. Distancias entre as caixas Laranjas112 pixels. Distancia entre a caixa Laranja Ok e a palavra Salve 15 pixels. Distancia entre a caixa Laranja com setas e a palavra select 15 pixels. Distancias entre as palavras Save e Select para a lateral inferior 40 pixels.

Distancia entre a caixa laranja e a cinza 0 pixels. Tamanho da caixa de textos cinzas 555 x 481 pixels (O texto deve esta alinhado a esquerda sempre respeitando uma distancia de 10 pixels das laterais). Distancias entre a caixa de cinza e lateral inferior 67 pixels. Distancia entre a caixa de pictogramas em destaque e a palavra Video 10 pixels. Distancias entre as caixas Laranja e vermelha 112 pixels. Distancia entre a caixa Laranja Ok e a palavra Select 15 pixels. Distancia entre a caixa vermelha e a palavra UP Folder 15 pixels. Distancias entre as palavras Select e UP FOlder para a lateral inferior 10 pixels.


Tela 17 Tamanho da caixa de pictogramas em destaque 70 x 70 pixels. Distancia entre a caixa de pictogramas em destaque e lateral superior 20 pixels. Distancias entre a caixa de pictogramas em destaque e lateral esquerda 110 pixels.

Distancia entre a caixa de pictogramas em destaque e a palavra (titulo principal) 10 pixels. Distancias entre a palavra (titulo principal) e a lateral superior 40 pixels. Tamanho da caixa branca de fundo 821 x 459 pixels (esta caixa deverรก esta centralizada na tela).


Tamanho das caixas de textos cinzas 401 x 448 pixels (que deverão estar agrupadas centralizadas a 3 pixels de distancia das margens e das outras

Tela 18 O item selecionado deverá estar com a tipografia na cor preta. Tamanho da caixa de pictogramas em destaque 70 x 70 pixels. Distancia entre a caixa de pictogramas em destaque e lateral superior 20 pixels.

Tela 19 Tamanho da caixa de pictogramas em destaque 70 x 70 pixels Tela 20 Tamanho da caixa de preta de gravação em destaque 676 x 25 pixels. Tamanho das caixas de carregamento 513 x 8 Pixels (a caixa da cor branca será preenchida na cor laranja conforme o andamento e deverá esta centralizada na caixa preta com uma distancia de 10 pixels do contador de tempo). Distancia da caixa de preta de gravação em destaque e lateral superior 22 pixels (a caixa deve esta centralizada).

como no exemplo e o texto de cada uma das caixas centralizados nelas).

Distancias entre a caixa de pictogramas em destaque e lateral esquerda 110 pixels. Distancia entre a caixa de pictogramas em destaque e a palavra Comvenient 10 pixels. Distancias entre a palavra Comvenient e a lateral superior 40 pixels. Tamanho da caixa branca de fundo 821 x 459 pixels (esta caixa deverá esta centralizada na tela). Tamanho das caixas de textos cinzas 401 x 448 pixels (que deverão estar agrupadas centralizadas a 3 pixels de distancia das margens e das outras como no exemplo e o texto de cada uma das caixas centralizados nelas). Distancia entre a caixa Laranja ok e a lateral inferior 30 pixels. Distancias entre as caixas laranjas 112 pixels. Distancia entre a caixa Laranja com setas a palavra Select 15 pixels. Distancia entre a caixa Laranja com OK e a palavra Enter 15 pixels. Distancia entre a caixa Laranja Exit e a palavra Exit 15 pixels. Distancias entre as palavras Select, Enter e Exit para a lateral inferior 40 pixels.

Distancia entre a caixa de pictogramas em destaque e lateral superior 20 pixels. Distancias entre a caixa de pictogramas em destaque e lateral esquerda 110 pixels. Distancia entre a caixa de pictogramas em destaque e a palavra Token 10 pixels. Distancias entre a palavra Token e a lateral superior 40 pixels. Tamanho da caixa branca de fundo 821 x 459 pixels (esta caixa deverá esta centralizada na tela). Tamanho das caixas de textos cinzas 401 x 448 pixels (que deverão estar agrupadas centralizadas a 3 pixels de distancia das margens e das outras como no exemplo e o texto de cada uma das caixas centralizados nelas). Distancia entre a caixa vermelha e a lateral inferior 30 pixels. Distancias entre as caixas laranja e vermelha 112 pixels. Distancia entre a caixa Laranja Exit palavra Exit15 pixels. Distancia entre a caixa Vermelha e a palavra Page 15 pixels. Distancias entre as palavras Paget e Exit para a lateral inferior 40 pixels. Tamanho da caixa laranja em destaque 198 x 38 pixels(o texto deverá esta centralizado). Distancias da caixa laranja em destaque e lateral inferior 26 pixels. Distancias da caixa laranja em destaque e lateral direita 24 pixels.


Tela 21 Tamanho da caixa de preta de gravação em destaque 676 x 25 pixels. Tamanho das caixas de carregamento 513 x 8 Pixels (a caixa da cor branca será preenchida na cor laranja conforme o andamento e deverá esta centralizada na caixa preta com uma distancia de 10 pixels do contador de tempo). Distancia da caixa de preta de gravação em destaque e lateral esquerda 22 pixels (a caixa deve esta centralizada).


Graphic Design

(PROJETO GRテ:ICO)

CLEYTON SOUZA NUNES

EDITORIAL

(EDITORIAL)

CLEYTON SOUZA NUNES

REVIEW

(REVISテグ)

MARCELO ALMEIDA DO NASCIMENTO




Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.