Elementos do cabeçalho da página Web

Transcrição

1 Elementos do cabeçalho da página Web

2 Elementos A estrutura de todas as nossas páginas da Pearson consiste em duas partes separadas - uma área de cabeçalho (expediente) e uma área de conteúdo. Para proporcionar uma melhor experiência ao usuário, é importante termos consistência em muitas das páginas da Pearson. Siga as orientações nas próximas páginas para obter ajuda. Visão geral Área do cabeçalho Consistente em todas as páginas da Pearson Área de conteúdo Flexível em todas as páginas da Pearson, utilizando a identidade da marca Pearson 2

3 Elementos A área superior de navegação deve incluir elementos que garantam que os usuários possam identificar sua posição na página e permitir que possam diferenciar entre as diferentes páginas da Pearson. 1. Cor Sempre use um fundo branco para a área do cabeçalho. Área do cabeçalho O logotipo da Pearson Sempre use a versão horizontal do logotipo da Pearson. 3. Margem ao redor do logotipo Evite colocar descritores ou elementos de navegação muito perto ou logo ao lado do logotipo da Pearson. 4. Identificadores de localização Quando necessário, uma imagem de uma bandeira juntamente com o nome abreviado do país deve ser utilizada para indicar a localização da página. Esta imagem deve sempre ser posicionada no lado direito da área do cabeçalho e de quaisquer elementos de navegação. 5. Painel e texto dos descritores Esta parte é essencial para ajudar os usuários a identificar com qual área da Pearson estão entrando em contato. O texto dos descritores deve ser em Open Sans Regular maiúscula, sobre um fundo cinza claro em todas as diferentes páginas da Pearson. 4 5 Texto: # Fundo: #f2f2f2 3

4 Trilhas de navegação As trilhas de navegação devem sempre aparecer dentro do painel dos descritores. As trilhas de navegação longas devem incluir o título da página em Open Sans Regular maiúsculas e minúsculas. A página ativa (listada no final de cada trilha) deve estar negritada em Open Sans Bold. Trilha de navegação longa Trilha de navegação curta As trilhas de navegação muito longas devem ser truncadas como mostrado, usando formas elípticas estendidas para indicar a continuação, como mostrado. As trilhas de navegação não devem ser utilizadas para páginas móveis. Trilhas de navegação truncada Móvel (sem trilha de navegação) 4

5 Elementos Os exemplos mostrados aqui demonstram como um cabeçalho consistente permite a navegação eficaz, bem como a diferenciação entre as muitas páginas com desenhos variados na área de conteúdo. Exemplos de páginas 5

6 O que não fazer Aqui estão alguns itens que devemos evitar durante a criação dos cabeçalhos. Não posicione o painel dos descritores e o texto incorretamente Não posicione o texto do descritor dentro da área de navegação branca Não posicione o identificador de localização incorretamente Não coloque nenhum texto perto do logotipo 6

7 As versões móveis Cabeçalhos padrão: O cabeçalho móvel padrão Exceções 1. Cor Sempre use um fundo branco para a área do cabeçalho. 2. Logotipo da Pearson Sempre use a versão horizontal do logotipo da Pearson Painel e texto dos descritores Este painel deve ser posicionado logo abaixo da área de cabeçalho branca Identificadores de localização Os identificadores de localização devem aparecer no painel dos descritores, quando necessário. Exceções: 5. O logotipo da Pearson Quando o espaço for limitado, apenas o monograma da assinatura Pearson pode ser usado dentro da área do cabeçalho; por exemplo, para a função de início de sessão ou janela de pesquisa. 6. Painel e texto dos descritores Quando apenas o monograma de assinatura Pearson aparecer na área do cabeçalho, o texto do descritor deverá sempre começar com o nome Pearson. 7. Rodapés Quando apenas o monograma de assinatura Pearson aparecer na área do cabeçalho, o logotipo horizontal completo da Pearson deverá sempre aparecer no rodapé. Texto: Open Sans Regular Cor do Texto: # Cor de fundo: #f2f2f2 Ao implementar um descritor longo que não caberá em uma linha, defina a cópia em duas linhas dentro do painel cinza de mesmo tamanho, com uma borda menor acima e abaixo. Consulte a página 8 para obter mais detalhes. 6 7 Quando o logotipo do monograma de assinatura Pearson for usado no cabeçalho, toda a navegação deve ser realizada no lado direito oposto, permitindo o máximo possível de margem ao monograma de assinatura Pearson. 7

8 Especificação do logotipo e descritor Use o seguinte como um guia para a colocação do logotipo e do descritor nas áreas do cabeçalho. 1. Descritor de uma única linha Um descritor de uma única linha deve ter aproximadamente 1,5 X de espaçamento acima e abaixo dele (onde X é igual à altura do topo do descritor, como mostrado aqui). O logotipo é colocado na área branca do cabeçalho, com a altura de um P como margem (medida a partir da palavra Pearson no logotipo). 2. Descritor de duas linhas Às vezes, um nome é muito longo para caber em uma linha, principalmente no celular. Nesses casos, a margem acima e abaixo do descritor pode ser reduzida para 1 X, como mostrado aqui. DESCRIPTOR NAME 1 Descritor de uma única linha DESCRIPTOR NAME Texto: Open Sans Regular Cor do texto: # Cor de fundo: #f2f2f2 2 Descritor de duas linhas PEARSON LARGE-SCALE STATE ASSESSMENT SERVICES Texto: Open Sans Regular Cor do texto: # Cor de fundo: #f2f2f2 8