Manual de orientação para construção do Site Elektro
Í
N
D
I
C
E
1
1. Apresentação da Home Elektro
3
2. Apresentação de variações das páginas internas
8
3. Variações de conteúdo
11 4. Padrões 13 5. Iconografia
1. Apresentação da Home Elektro
Visualização da Home Elektro
menus de Busca, Home e Fale com a Elektro
banner em flash
empresa
área de acesso a conteúdo variável
segurança
meio ambiente
instituto elektro
fornecedores
relações com investidores
informações ao cliente
eficientização energética
menu de acesso
área de cadastro para acesso a menu de Serviços
banner em flash
área de acesso a conteúdo variável área de acesso às Notícias Elektro
logotipos
Mapa de acesso da Home
Manual de orientação para construção do Site Elektro
1
800 pixels
banner em flash
94 pixels
49 pixels
banner em flash
13 pixels
5 pixels
Botão
75 pixels
Login
área de cadastro Senha
90 pixels
Link
Nono non nononononononon no nono nono nonon
90 pixels
botões rádio botão de envio texto fonte: Arial, 8pt, cor hex = 00,00,00 texto fonte: Arial bold, 9pt, cor hex = FF,FF,FF
área de cadastro Envio
465 pixels 440 pixels
Nono non nononononononon no nono nono nonon
área de cadastro
botão de envio
Para se cadastrar clique aqui
78 pixels
Link
5 pixels 49 pixels
90 pixels
94 pixels
5 pixels
área de cadastro
415 pixels 17 pixels
30 pixels
196 pixels
texto fonte: Arial bold, 9pt , cor hex = 00,00,00
Tipo de documento
Envio
15 pixels
Link
15 pixels
49 pixels
Link
Identificação Seu código
CPF CNPJ No. do documento
16 pixels
308 pixels
94 pixels
13 pixels
9 pixels
Botão 145 pixels Link
7 pixels
790 pixels
13 pixels
400 pixels
BUSCA
543 pixels
botões de menu
link para a página Notícias fonte texto informativo: Arial, 8pt, cor hex = 99,99,99 fonte link: Arial, 8pt, cor hex = 00,00,FF
75 pixels
102 pixels
23 pixels
5 pixels
27 pixels
texto fonte: Arial, 9pt bold, cor hex = FF,FF,FF
logotipos
Mapa de construção da Home Elektro
Manual de orientação para construção do Site Elektro
2
2. Apresentação de variações das páginas internas Página com foto à direita
Nononon nonon
>> nonon no nononon onnonn
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
legenda da página submenu de conteúdo
conteúdo
Nononon nonon
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
>> nonon no nononon onnonn
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
foto ilustrativa
legenda (opcional)
Mapa de acesso da página
Manual de orientação para construção do Site Elektro
3
25 pixels
800 pixels
310 pixels
310 pixels
400 pixels
145 pixels
12 pixels
altura variável
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
9 pixels
13 pixels
13 pixels
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim 5 pixels
21 pixels
>> nonon no nononon onnonn
214 pixels
altura variável depende do conteúdo
7 pixels
Nononon nonon
5 pixels
Mapa de construção da página
Página com foto à esquerda
Nononon nonon
>> nonon no nononon onnonn
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Manual de orientação para construção do Site Elektro
4
legenda da página
Nononon nonon
>> nonon no nononon onnonn
submenu de conteúdo
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
legenda (opcional)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
foto ilustrativa
conteúdo
Mapa de acesso da página
25 pixels
800 pixels
310 pixels
310 pixels
13 pixels
altura variável
5 pixels
12 pixels
145 pixels
400 pixels
9 pixels
214 pixels
altura variável depende do conteúdo
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
21 pixels
>> nonon no nononon onnonn
7 pixels
Nononon nonon
13 pixels
5 pixels
Mapa de construção da página
Manual de orientação para construção do Site Elektro
5
Página de ocupação total
Nononon nonon
legenda da página
Nononon nonon
>> nonon no nononon onnonn
>> nonon no nononon onnonn
submenu de conteúdo
conteúdo
Mapa de acesso da página
Manual de orientação para construção do Site Elektro
6
25 pixels
800 pixels
632 pixels
>> nonon no nononon onnonn
7 pixels
21 pixels
Nononon nonon
400 pixels
altura variável depende do conteúdo
145 pixels
13 pixels
5 pixels
5 pixels
Mapa de construção da página
Manual de orientação para construção do Site Elektro
7
3. Variações de conteúdo Nas páginas internas do site, o campo que é descrito como “conteúdo” pode ser composto por diversos formatos de arquivos, como: txt, planilhas, animações em flash, pdf, formulários e outros. Abaixo, apresentamos alguns exemplos de sua aplicação.
Nononon nonon
>> nonon no nononon onnonn
Página de ocupação total com um arquivo jpg.
Nononon nonon
>> nonon no nononon onnonn
Página de ocupação total com um arquivo em tabela de texto. Manual de orientação para construção do Site Elektro
8
Nononon nonon
>> nonon no nononon onnonn
O arquivo abre diretamente no browser
Detalhe do informativo
Página com foto, arquivos de texto, pdf e hyperlink para o site Adobe.
Nononon nonon
>> nonon no nononon onnonn
Página com foto, arquivos de texto e hyperlinks para outras páginas do Site Elektro.
Manual de orientação para construção do Site Elektro
9
Nononon nonon
É feito o download do arquivo para máquina
>> nonon no nononon onnonn
A Elektro, ciente da necessidade de atuar de forma sustentável, desenvolveu e implementou o Sistema de Gestão Ambiental - SGA, que permite minimizar e controlar impactos ambientais. Esse sistema, certificado pela ISO 14001 para as subestações construídas pela Elektro, abrange todas as atividades da empresa e segue os princípios básicos da Política de Gestão da empresa: atendimento à legislação, controle ambiental e aprimoramento contínuo de seus processos. Dessa forma, as ações da Elektro, desde estudos de viabilidade de novos empreendimentos até procedimentos de operação e manutenção, são analisadas sempre levando em consideração os efeitos sobre o meio ambiente.
Confira o guia de arborização
Um dos destaques de toda essa preocupação é que os colaboradores da Elektro, assim como parceiros e fornecedores, participam ativamente de todo o processo, sendo treinados para
Detalhe do informativo
Página com foto, campo de texto, pdf e hyperlink para o site Adobe.
Nononon nonon
>> nonon no nononon onnonn
Detalhe do informativo
Página com foto, arquivos de texto e hyperlinks para o informativo Em Dia com a Elektro (à esquerda).
Manual de orientação para construção do Site Elektro 10
4. Padrões Fontes Fonte texto informativo: Arial, 8pt, cor hex = 99,99,99 Fonte legenda: Arial, 7pt, cor hex = 00,33,99 Fonte link: Arial, 8pt, cor hex = 00,00,FF Fonte legenda da página: Arial rounded mt bold, o tamanho do corpo pode variar de acordo com a informação da página, cor hex = 99,99,99
214 pixels
4
r
Fotos
Todas as fotos devem estar aplicadas nas medidas e em molduras, como o modelo ao lado.
310 pixels
23 pixels
Botões largura variável
imagem do botão de menu
empresa
empresa
empresa
divisão do botão
início
meio
fim
(esta parte pode ser multiplicada em um aplicativo gráfico para completar o botão)
fonte Arial normal, 10pt, cor hex = #4A4542
largura variável
94 pixels
r 1, 5
55°
16 pixels
Manutenção
imagem do botão de conteúdo variável Obs.: Espessura do fio em 1 pixel
196 pixels
60 pixels 75 pixels
1
r
90 pixels 83 pixels
imagem do botão de conteúdo variável
Manual de orientação para construção do Site Elektro
11
Identificação da página
92 pixels
23 pixels
limite máximo desta legenda largura variável
cor hex = C0,C0,C0
>> histórico
Legenda da página: em Arial rounded mt bold, o tamanho do corpo pode variar de acordo com a informação da página, cor hex = 99,99,99
12
r
Empresa
(esta parte pode ser multiplicada em um aplicativo gráfico para completar a testeira)
Sublegenda da página: em Arial rounded mt bold, 10pt, cor hex = FF,FF,FF e sempre em minúsculo
Obs.: Tanto a legenda como a sublegenda devem ser escritas em uma única linha. Situações adversas devem ser estudadas.
Campo de notícias 790 pixels 780 pixels 50 pixels
60 pixels 75 pixels
16 pixels
1
r
35°
cor hex = DE,DE,DC
x
r
Flash home
308 pixels
Para a criação do flash para Home, use as medidas ao lado, com os cantos levemente arredondados.
415 pixels
x
r
Considerações finais sobre padrões Havendo a necessidade de criar um novo botão, campo para link, elemento gráfico ou flash, arredonde os cantos do mesmo, tomando como padrão elementos similares já existentes neste manual.
Manual de orientação para construção do Site Elektro 12
5. Iconografia Veja abaixo alguns ícones, os locais onde se encontram e seus significados. Todas as páginas, retorna à página Home. Apenas na Home, acessa a Rádio Elektro. Página de notícias, faz o download de matérias. Página de notícias, acessa matérias anteriores. Página de notícias, acessa o cadastro de jornalistas. Página de notícias, retorna para a última notícia.
Manual de orientação para construção do Site Elektro 13
Manual de orientação para construção do Site Elektro