Cabeçalho do Twitter 1500×500

O cabeçalho e as imagens ao redor

Três imagens compõem um perfil e apenas uma delas é esta faixa.

O que a interface cobre

Duas sobreposições, e a sobreposição móvel pega as pessoas de surpresa porque não existe na versão para desktop.

O círculo da foto fica sobre o canto inferior esquerdo em todos os layouts. Em um celular, o cartão de perfil — nome, usuário, bio, contagem de seguidores — é desenhado mais alto, retirando uma faixa da parte inferior do cabeçalho que um navegador de desktop deixa visível.

• Canto inferior esquerdo: o círculo da foto, em todos os dispositivos.
• Faixa inferior: o cartão de perfil em layouts móveis.
• Superior direito: visível em todos os lugares — coloque a mensagem lá.
• Extremidades esquerda e direita: cortadas em janelas estreitas, já que o cabeçalho preenche a largura.

Projetando uma faixa 3:1

Três para um é largo o suficiente para que a maioria das fotografias precise de um recorte deliberado em vez de um centralizado. Cenários de paisagem, um padrão repetitivo ou uma marca com espaço ao seu redor se adaptam ao formato; uma fotografia em retrato não.

Texto em um cabeçalho raramente vale a pena. A faixa é renderizada com alguns centenas de pixels de largura em um celular, e a biografia logo abaixo já carrega o que o texto diria, em uma fonte que a plataforma controla e um tamanho que é sempre legível.

Formato e tamanho do arquivo

JPEG para cabeçalhos fotográficos, PNG para cores planas e letras. O X re-codifica os envios para entrega e impõe seu próprio limite de tamanho de arquivo, então uma fonte limpa de alta qualidade é melhor que uma máxima — fornecer algo já altamente comprimido apenas adiciona duas rodadas de artefatos.