Este guia mostra dicas de design para banners principais e de espaço para um estilo responsivo, destacando as principais áreas visíveis e espaços seguros para texto e gráficos. Recomenda-se usar pontos focais centralizados, pouco texto e evitar fotos de pessoas. Dicas para o design da tela de login incluem evitar texto nas bordas e considerar a cobertura da caixa de login. Os tipos de arquivo aceitos são PNG, JPG, JPEG, JFIF ou GIF com menos de 3 MB. As visualizações em dispositivos móveis mostram a parte central dos designs.
Este guia se aplica aos designs do Estandarte Principal e do Estandarte Espacial. Pode ser complicado projetar um web design responsivo, então as dimensões incluídas devem funcionar como um guia prático para ajudar você a usar texto ou qualquer gráfico importante que você queira que fique visível o tempo todo no design do seu banner.
Você pode usar as dimensões incluídas para configurar seu design ou, para facilitar ainda mais, incluímos três exemplos que serão úteis neste artigo.
Banner principal (visualização da área de trabalho)
Design do banner: recomendamos minimizar a quantidade de texto incluído e evitar fotos de pessoas sempre que possível.
Tipo de arquivo de banner: PNG, JPG, JPEG, JFIF ou GIF < 3 MB
Dimensões: 2241px x 474px
Espaço seguro para texto/imagens principais: 895 px x 474 px centralizado
Leia este artigo para instruções sobre como alterar o banner principal.
Design de banner espacial – o que fazer e o que não fazer
Como a imagem do Space Banner é visível tanto em dispositivos móveis quanto em computadores, é importante garantir que o design funcione bem quando visualizado em ambos.
No desktop, a imagem do banner fica mais visível. No entanto, há um espaço seguro, como ilustrado abaixo, que certamente ficará visível quando visualizado no aplicativo móvel.
Os exemplos a seguir destacam como usar esse espaço seguro de forma eficaz, sempre garantindo que o ponto focal do design da imagem do banner esteja em uma posição central.
Exemplo 1 - Ilustração vetorial e elementos
Mantenha o ponto focal do design no centro do banner, não à esquerda ou à direita, para garantir que o espaço seguro seja ocupado pela parte mais importante do design.
Exemplo 2 - Fotografia
É importante selecionar fotografias apropriadas para uso em uma imagem de banner de espaço. Opte sempre por fotografias que tenham o assunto principal centralizado e não muito ampliadas, caso contrário, em dispositivos móveis, elas podem parecer irreconhecíveis.
Exemplo 3 - Desenho
Usar um desenho é uma boa opção para um design de banner de espaço, desde que os elementos que o compõem sejam pequenos e densamente preenchidos no design.
Se os elementos forem muito grandes, o desenho não será exibido.
Conforme ilustrado abaixo, a primeira imagem é a nossa imagem recomendada.
Banner Espacial (Visualização Desktop)
Banner de espaço (visualização no celular)
Guia de design de tela de login
Apenas usuários que acessam a Workvivo por meio da autenticação por senha veem a página de login. Qualquer usuário que acessar por SSO verá a página de login SSO da organização em vez da tela de login da Workvivo.
Dicas para criar uma nova imagem de login:
-
Área visível no desktop: essa área pode mudar ligeiramente, dependendo do tamanho da tela
-
Área visível em dispositivos móveis: a área central da imagem fornecida estará visível no dispositivo móvel.
-
Tipos de arquivos aceitos: PNG, JPG
Design da página de resposta de login
Pode ser complicado projetar um web design responsivo, então as dimensões aqui devem servir como um guia para ajudar você a usar texto ou qualquer gráfico importante que você queira que fique visível o tempo todo no design do seu banner.
Recomendamos também evitar colocar texto ou elementos gráficos essenciais nas extremidades da imagem.
Dica:
- Parte da imagem será coberta pela caixa de login, portanto, tenha isso em mente
- Para obter melhores resultados, evite usar texto em seu design
- Área visível na tela de 24": 1500px x 750px
- Área oculta: 1500px x 125px
Design de resposta da página de login (visualização móvel)
Como um web design responsivo, tenha cuidado ao usar texto ou qualquer gráfico importante que você queira que esteja visível o tempo todo no design do seu banner. A tela do celular usa a mesma arte da tela do desktop e mostrará a parte do meio do criativo.
De novo, recomendamos usar planos de fundo genéricos e sem texto.
Dica:
- Parte da imagem será coberta pela caixa de login, portanto, tenha isso em mente
- Para obter melhores resultados, evite usar texto em seu design
- Área visível: 545px x 971px no centro