4 maneiras de projetar uma tela de divisão perfeita
Uma tela dividida em duas.
A técnica da tela dividida é conhecida há muito tempo na indústria cinematográfica, com exemplos que remontam aos dias do cinema mudo do início do século 20, e ainda hoje é um recurso popular no cinema e na televisão.
Um layout de tela dividida está em uso quando os elementos de tela inteira são divididos em duas ou mais partes verticais. Uma cena do filme “Scott Pilgrim vs the World”
No entanto, esta é uma técnica relativamente nova para a indústria de web design. As telas divididas só se tornaram populares em meados de 2016 e agora temos mais e mais sites que usam esse padrão de design. Existem algumas razões pelas quais esse padrão de design se tornou tão popular:
- Tem uma boa qualidade estética. Quando executado corretamente, pode oferecer aos usuários uma experiência maravilhosa de visualização.
- É uma boa escolha para frameworks responsivos. O design de tela dividida pode ser adaptado para uma variedade de telas, mesmo pequenas. Quando se trata de telas menores, como telas móveis, os painéis podem ser empilhados.
- Ajuda a guiar a navegação. Usando técnicas de design simples, você pode chamar a atenção do usuário para uma parte específica da tela ou incentivá-lo a clicar.
Quando a tela dividida funciona melhor
A divisão de tela é especialmente boa quando você tem duas coisas para promover. Por exemplo, quando um site oferece duas variações totalmente opostas. Essa abordagem permite aos designers dar destaque a ambas as coisas e permitir que o usuário selecione rapidamente entre elas.
Uma tela, duas mensagens nos Guias do Dropbox
Quando você deve evitar a tela dividida
Os designs de tela dividida não se expandem bem à medida que o conteúdo cresce, portanto, não é recomendável aplicá-los a layouts com conteúdo pesado. É importante manter as telas simples, porque as telas divididas complexas fazem com que a interface fique sobrecarregada com informações. É por isso que o layout de tela dividida seria perfeito para designs de sites minimalistas.
Como decidir se a tela dividida é boa para você
Se você está considerando uma técnica de tela dividida para o seu site, aconselho a se fazer algumas perguntas:
- É adequado para o seu conteúdo?
- Haverá espaço negativo suficiente para fazer o layout funcionar?
- Seus usuários apreciarão o layout ou isso os confundirá?
- Não há problema em dividir a atenção dos usuários pela metade?
A coisa mais importante a ter em mente é que o conteúdo é rei e a tela dividida deve ser uma maneira simples de transmitir sua mensagem às pessoas.
Técnicas de design para telas divididas
1. Par de cores vibrantes e tipografia dramática
Graças ao design plano e material, cores vibrantes e tipografia dramática são grandes tendências agora. As cores vibrantes são visualmente estimulantes e a tipografia dramática melhora o conteúdo do texto. Simplesmente combine os dois e você criará um design visualmente interessante. Baesman fez isso com maestria. Eles deram igual importância a ambos os elementos e, ao mesmo tempo, permitiram ao usuário escolher entre eles rapidamente.
Cores brilhantes e pares de tipografia interessantes podem adicionar interesse
2. Chame a atenção do usuário para o botão CTA
Muito mais do que uma simples tendência gráfica, dividir a tela em duas partes distintas fornece uma maneira original de guiar o usuário pelo seu site. É uma ótima opção quando você deseja criar um ponto focal maior para as chamadas à ação. No exemplo abaixo, você pode ver como o espaço negativo cria uma divisão vertical para dar ponderação igual a duas opções diferentes.
A divisão vertical permite enfatizar dois CTAs diferentes sem favorecer
3. Criar fluxo visual entre “telas”
Quando a tela dividida representa um único objeto, é importante estabelecer uma conexão entre os contêineres de conteúdo. Uma maneira possível de fazer isso é usando uma cor. Basta duplicar uma cor distinta para estabelecer o fluxo visual entre duas telas. Isso funciona particularmente bem com uma cor de marca ou matiz com muito contraste. Usando cores, é possível comunicar uma conexão mais forte entre duas partes do conteúdo.
Outra maneira possível de criar uma conexão forte é colocar em camadas um único elemento, como cópia de texto nas telas:
Texto sobreposto conecta duas telas
Por último, mas não menos importante, você pode usar uma sobreposição colorida para essa finalidade:
Considere a parte esquerda da tela
4. Use a animação para incentivar os usuários a agir
Animação fina e efeitos interativos incentivam os usuários a clicarem. Veja o design usado para o “ Chekhov está vivo ”Site abaixo. O design pede para você clicar para encontrar seu personagem.
Conclusão
Demora cerca de três segundos para um visitante tomar uma decisão sobre o seu site. Conseqüentemente, seus layouts devem sempre ser amigáveis para os visitantes se você quiser reduzir as taxas de rejeição. A técnica de divisão de tela pode ajudar você com isso. Os designs de tela dividida são uma maneira divertida, funcional e responsiva de criar um design atraente.