Usando fundos 'manchados' no web design para chamar a atenção

Um bom site tem tudo a ver com as pequenas coisas. Cada detalhe conta, mesmo que pareça que o único papel que deve servir é ficar nas sombras. Hoje, nossos holofotes brilham em segundo plano.

Já faz um tempo desde que falamos sobre backgrounds em termos de tendências. Os criativos são obcecados por coisas que ocupam o primeiro plano, pois ajudam a causar a primeira impressão. No entanto, os elementos centrais da interface são sempre importantes. Eles nos lembram de si mesmos toda vez que construímos algo novo. E é apenas uma questão de tempo até que eles se tornem foco de atenção novamente.

Então, finalmente chegou a hora de fazer algo interessante com o primeiro e único background. O principal ponto de discórdia é que ele fornece uma base sólida para todo o projeto, por isso é um desafio tomar medidas drásticas. Você precisa equilibrar as partes pragmáticas e divertidas para criar algo extravagante e, ao mesmo tempo, não estragar tudo.

E parece que os designers abaixo encontraram uma solução perfeita – fundos irregulares. Eles atendem a ambos os requisitos e parecem uma lufada de ar fresco ao se declararem uma pequena tendência. Vamos olhar mais de perto.

Paciente

Este é um site promocional padrão para um aplicativo móvel. Em essência, não há nada de extraordinário aqui. Você encontrará um pacote padrão de truques para apresentar o produto, como uma maquete do iPhone que mostra o aplicativo em seu ambiente natural. Além disso, vários botões de call-to-action vívidos e uma estrutura básica.

No entanto, o que chama a atenção instantaneamente é o plano de fundo. Parece um grande ponto que naturalmente atrai o olhar para o aplicativo. E, ao mesmo tempo, dá à estética geral um sabor encantador. Graças às curvas suaves e às cores suaves, é elegante e refinado, evitando que o site padrão pareça trivial.

Observe que é apenas um pequeno detalhe, mas certamente faz a diferença aqui. É estático e ocupa apenas um terço da tela, mas é suficiente para se destacar da multidão.

Ecomly

Muito parecido com o exemplo anterior, este é um site simples. No entanto, desta vez representa uma agência digital. A estrutura do site é convencional e o mesmo vale para o design. Não há detalhes fantasiosos nem ilustrações dramáticas.

A única extravagância aqui é o fundo. Possui duas gotas brancas de tamanho médio que se movem suavemente de cima para baixo. Eles estão localizados nas laterais, para não distrair a atenção do slogan principal e do CTA. Mas eles ainda adicionam um pouco de tempero à interface.

Além disso, você pode ver a mesma abordagem aplicada na seção logo antes do rodapé e em algumas páginas internas. Desta forma, tudo é amarrado, criando um design harmonioso.

O fundo irregular e dinâmico combina perfeitamente com a atmosfera profissional do site. Combina com o tom do projeto e ecoa com o logotipo, apoiando também a identidade da marca.

O Panda Digital

Enquanto os dois exemplos mencionados anteriormente usam vários pontos, a equipe criativa do The Digital Panda prefere usar apenas um (mas bem grande). O belo blob roxo suporta os elementos de primeiro plano e, ao mesmo tempo, evita que a interface branca e limpa pareça muito simplificada. Combina perfeitamente com ilustrações, CTAs e tipografia.

Você pode notar que esse truque é rastreado em todo o site. Várias seções se beneficiam do plano de fundo irregular, proporcionando uma experiência de usuário coerente.

Art4Web

A equipe por trás do Art4Web confia fortemente em uma abordagem de paralaxe para impressionar os visitantes online. Aqui está no centro da área do herói, colando as maquetes. O fundo manchado apresenta várias bolhas que se movem lentamente para imitar a superfície líquida. Também está em sintonia com o logotipo, trazendo a identidade da marca para o design geral.

A solução se encaixa como uma luva. Ele destaca a composição em primeiro plano e adiciona um toque de dinâmica ao projeto, dando um toque de paralaxe muito usado.

Soluções Bodymovin

A Bodymovin Solutions aposta numa abordagem ilustrada que obriga a área do herói a fazer jus ao seu nome. Assim como no exemplo anterior, o fundo irregular é parcialmente animado. E como essas manchas têm uma forma semelhante a uma bolha, seu comportamento lembra previsivelmente o movimento suave do líquido. Serve como uma base sólida para pequenas ilustrações humanas – complementando-as perfeitamente.

Observe que, aqui, o fundo irregular é usado como parte de uma tela inicial que abre o site de maneira atraente. Ele cria uma experiência consistente desde o início.

Aumente seu círculo

Como você deve ter adivinhado pela placa de identificação, aqui um círculo é o coração e a alma do projeto. Portanto, não é surpresa que essa forma seja vista na página inicial. O fundo não é exceção.

Vários círculos grandes e fortemente borrados com belas cores formam a tela na parte de trás. Assim como nos exemplos anteriores, eles também são acionados. Eles contribuem para a identidade visual e reforçam a identidade da marca, sem falar em deixar a página com um visual diferenciado.

Design Griflan

Embora geralmente consideremos fundos irregulares onde blobs comandam o show, na verdade, ninguém impede que você adote outras formas como a equipe por trás do Griflan Design fez.

Um fundo irregular original marca a área do herói de seu site oficial. Duas formas geométricas (um retângulo e metade de um anel), juntamente com pequenos ícones contornados, criam a base para o conteúdo. Como convém, tudo está se movendo. Enquanto as grandes formas se movem lentamente, as pequenas se movem muito rapidamente, dando à tela um visual bastante empolgante.

Pronto

Quando se trata de fundos irregulares, a forma preferida parece ser uma bolha. Há várias razões para isso.

Primeiro, as curvas suaves são menos distrativas, o que contribui para um plano de fundo perfeito. Por um lado, esse pano de fundo enriquece o design. Por outro, não concorre com o conteúdo em primeiro plano. Em segundo lugar, os blobs são perfeitos para aplicar um comportamento líquido que é bastante popular nos dias de hoje.

Então, eles também são ótimos para experimentos. Você pode forçá-los a se mover em várias direções ou, pelo contrário, mesclá-los e ainda parecer visualmente intrigante.

Finalmente, eles ficam ótimos mesmo em modo estático, dando à superfície branca limpa um sabor especial.