Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Manual de estilo, Agência Brasil

458 views

Published on

Primeiro manual de estilo da Agência Brasil, desenhado em 2006.
Achei na pasta de arquivos e decidi compartilhar.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Manual de estilo, Agência Brasil

  1. 1. Manual do site Radiobrás Brasília, 2006
  2. 2. Manual do site - Radiobrás Este manual tem como objetivo direcionar a utilização de símbolos, cores, tipografia e outros elementos visuais nos sites da Radiobrás, com o intuito de manter a identidade visual corporativa e conservar, assim, a comunicação com os usuários do sistema. Aqui estão as informações que irão nortear na criação de novas páginas, sites e conteúdo editorial da empresa, além das especificações técnincas, como tamanho, resolução e formatos a serem utilizados.
  3. 3. 3 Tamanhos, resolução e formatos 4 Grid 5 Cores 9 Tipografia 11 Símbolos 13 Nomeclatura de arquivos Manual do site - Índice
  4. 4. As páginas da Radiobrás devem ser apresentadas em tama- nho para telas de 1024. A resolução de tela deve ser de 72 dpi, bem como as figuras enviadas para exibição nos sites, por ser a resolução mais adequada para utilização em tela. Os formatos a serem utilizados para envio de imagens po- dem ser, de acordo com as necessidades, das seguintes ex- tensões: jpeg, para imagens estáticas; gif, para animações e banners de até 50x50 px; swf, para animações. Manual do site - Tamanhos, resolução e formatos
  5. 5. O grid deve seguir as seguintes especificações. Manual do site - Grid Para telas de 1024 980/5 5 colunas de 196px. Para telas de 800 760/11 11 colunas de 69 px.
  6. 6. Cores As cores do sistema de sites da Radiobrás e do conteúdo editorial para Internet da Agência Brasil devem seguir qua- tro paletas, baseadas na análise do brilho e do contraste, in- terferência e acomodação visual, além da Identidade Visual da empresa. Paleta 1 - Esta paleta deve ser utilizada para o topo e os elementos de texto que necessitem de destaque, tais como os de denominação de conteúdo, linhas, bordas de caixas, ícones etc. Esses devem seguir a cor que for escolhida para o topo, e as páginas internas devem seguir o mesmo padrão, de acordo com o item de menu que estiver selecionado, nas cores escolhidas previamente. A sequência não precisa ser obedecida, nem todas as cores precisam ser utilizadas, entretanto, nao devem ser utilizados outras opções para a construção de menus ou outros elementos de homepages. Segue a descrição das cores em RGB e para montagem de folhas de estilo (web). Manual do site - Cores 1 2 3 4 5 6 7 1 R141 G156 B129 WEB 8E9C82 2 R128 G165 B132 WEB 80A584 3 R151 G176 B154 WEB 97B09A 4 R161 G173 B153 WEB A1AD99 5 R152 G185 B178 WEB 98B9B2 6 R152 G177 B173 WEB 98B1AD 7 R135 G151 B148 WEB 879794
  7. 7. Exemplos de aplicações: Manual do site - Cores A cor do topo está em outros elementos das páginas, de maneira a situar o usuário com essa referência. Obs.: Pode existir variação da opacidade da cor, respeitan- do-se os limites de visibilidade e intensidade da mesma.
  8. 8. Paletas 2 e 3 - Criadas para a utilização em gráficos e tabe- las simples, que geralmente podem ser decompostos basi- camente em: • background; • pontos de destaque, que servem para diferenciar alguma informação; • linhas, torres e outros elementos para demonstrar crescimento ou decréscimo de algum índice; • texto. Esses quatro aspectos deste tipo de imagem podem ser su- pridos com três paletas de cores, duas coloridas e uma em tons de cinza. As duas primeiras contém juntas seis opções e são exclusivamente para utilização em tabelas e gráficos, quando dentro da Agência Brasil. Manual do site - Cores 1 R229 G237 B238 WEB E5EDEE 2 R171 G198 B201 WEB ABC6C9 3 R15 G91 B101 WEB 0F5B65 1 R250 G232 B230 WEB FAE8E6 2 R225 G183 B175 WEB E1B7AF 3 R104 G23 B9 WEB 681709 1 2 3 1 2 3
  9. 9. 1 R0 G0 B0 WEB 000000 2 R76 G76 B76 WEB 4C4C4C 3 R151 G176 B154 WEB 97B09A 4 R161 G173 B153 WEB A1AD99 5 R152 G185 B178 WEB 98B9B2 6 R152 G177 B173 WEB 98B1AD 7 R135 G151 B148 WEB 879794 Manual do site - Cores Paleta 4 - A paleta cinza serve para complementar o con- teúdo e para construção de ícones que serão utilizados nos gráficos e infográficos, ou para utilização em fundos. 1 2 3 4 5 6 7
  10. 10. 10 Tipografia A família escolhida para o projeto foi a Bitstream, por ser de domínio livre, não possuindo nenhuma restrição sobre seu uso. Para baixar a familia ou ler mais sobre a mesma, acessar http://www.bitstream.com/font_rendering/products/dev_ fonts/vera.html Não deve ser utilizada nenhuma outra familia tipográfica para a construção de elementos no site. Todas as variações da fonte estão disponíveis para download e devem ser com- binadas com as cores das paletas disponíveis de acordo com a necessidade. Manual do site - Tipografia Bitstream Vera Sans Bold Bitstream Vera Sans Bold Oblique Bitstream Vera Sans Oblique Bitstream Vera Sans Roman
  11. 11. 11 Bitstream Vera Sans Mono Bold Bitstream Vera Sans Mono Bold Oblique Bitstream Vera Sans Mono Oblique Bitstream Vera Sans Mono Roman Manual do site - Tipografia Bitstream Vera Serif bold Bitstream Vera Serif Roman Exemplo:
  12. 12. 12 Manual do site - Símbolos Símbolos Principais símbolos utilizados no sistema: Arquivo anexado Áudio Comentar Enviar Imagem Imprimir Infográfico Leia mais Salvar arquivos Todos os assuntos Vídeos Som Parar Para a criação de outros símbolos devem ser respeitados os seguintes parâmetros: Tamanho 11x11 px para ícones médios. Tamanho 7x7 px para os menores ícones. Tamanho 23x23 px para os maiores, à exemplo do play utilizado nos players. Para ícones utilizados em matérias, ou seja, rela- cionados ao conteúdo distribuído, os ícones têm tamanho livre, a critério do editor. As cores obedecem sempre à cor de menu, como falado anteriormente, no caso de conteúdo não editorial. Em caso contrário, a gama disponível é a das paletas já descritas na página 7. A técnica utilizada para o desenho desses elemen- tos deve ser baseada em pixel art. Não utilizar programas vetoriais para a sua confecção. (Corel draw e ilustrator, por exemplo). É proibido utilizar símbolos copiados da internet e de programas. A Agência Brasil cria seus próprios ícones para conteúdo editorial e para utilização no layout dos sites. Play Pause Utilizado para sinalizar outros itens Drop down Seta barra de rolagem
  13. 13. 13 Manual do site - Símbolos Utilizar uma borda de 1 pixel como forma de facilitar o reconhecimento da figura interna, em caso de ícones com figuras vazadas, como em “imprimir”. O selo das coberturas temáticas e das grandes reporta- gens deve seguir um padrão sutil de identificação visual. É preciso tomar cuidado para que o conteúdo não se torne publicitário ou enfadonho pela repetição exaustiva dos pa- drões. (São os dois extremos da má utilização de imagens e padrões). Por isso mesmo, não deve ter texto nos selos. O tamanho dos selos deve ser de 120x120 px. Recortes de imagens são permitidos, e em casos de ên- fase na cobertura fotográfica e nos infográficos devem ser realizados com cuidado. Quando houver possibilidade de manipular imagens, submeter ao editor de foto antes de colocar na página.
  14. 14. 14 Manual do site - Nomeclatura dos arquivos Infográficos, gráficos e tabelas Infográficos: info_cidades_270606_1.swf Tabelas: tab_inflacao_270606_1.jpg Gráficos: graf_telefonia_270606_1.jpg Tipo do arquivo assunto data (ddmmaa) N. do info, por ordem de produção Assinatura da equipe EQUIPE DE ARTE E MULTIMÍDIA/ABr

×