elementos do cabeçalho da página web · 2020-07-22 · 4. identificadores de localização quando...

Elementos do cabeçalho da página Web

2

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.

Área do cabeçalho Consistente em todas as páginas da Pearson

Cabeçalho da página Web Elementos

Área de conteúdo Flexível em todas as páginas da Pearson, utilizando a identidade da marca Pearson

Visão geral

Diretrizes da Marca Pearson 2016 Elementos do cabeçalho da página Web

3

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. CorSempre use um fundo branco para a área do cabeçalho.

2. O logotipo da PearsonSempre use a versão horizontal do logotipo da Pearson.

3. Margem ao redor do logotipoEvite colocar descritores ou elementos de navegação muito perto ou logo ao lado do logotipo da Pearson.

4. Identificadores de localizaçãoQuando 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 descritoresEsta 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.

21 4

4

5

5

3

Área do cabeçalho


Texto: #505759 Fundo: #f2f2f2


4

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.

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 devemser utilizadas para páginas móveis.

Trilha de navegação longa

Trilha de navegação curta

Trilhas de navegação truncada

Móvel (sem trilha de navegação)

Cabeçalho da página Web Trilhas de navegação


5

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



6

Cabeçalho da página Web

Aqui estão alguns itens que devemos evitar durante a criação dos cabeçalhos.

O que não fazer

Não posicione o painel dos descritores e o texto incorretamente

Não posicione o identificador de localização incorretamente

Não posicione o texto do descritor dentro da área de navegação branca

Não coloque nenhum texto perto do logotipo


7

Cabeçalho da página Web As versões móveis

O cabeçalho móvel padrão Exceções

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.

2

6

1

5

43

7

Texto: Open Sans RegularCor do Texto: #505759 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.

Cabeçalhos padrão:

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.

3. Painel e texto dos descritoresEste painel deve ser posicionado logo abaixo da área de cabeçalho branca.

4. Identificadores de localizaçãoOs identificadores de localização devem aparecer no painel dos descritores, quando necessário.

Exceções:

5. O logotipo da PearsonQuando 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 descritoresQuando 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ésQuando apenas o monograma de assinatura Pearson aparecer na área do cabeçalho, o logotipo horizontal completo da Pearson deverá sempre aparecer no rodapé.


8Diretrizes da Marca Pearson 2016 Elementos do cabeçalho da página Web

Cabeçalho da página Web

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

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.

Texto: Open Sans Regular Cor do texto: #505759 Cor de fundo: #f2f2f2

Especificação do logotipo e descritor

Texto: Open Sans Regular Cor do texto: #505759 Cor de fundo: #f2f2f2

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

Descritor de uma única linha

Descritor de duas linhas

1

2

DESCRIPTOR NAME

DESCRIPTOR NAME

PEARSON LARGE-SCALE STATE ASSESSMENT SERVICES

elementos do cabeçalho da página web · 2020-07-22 · 4. identificadores de localização quando...

Documents