Um guia abrangente para projetar planos de fundo em 2024

Se você assinar um serviço de um link nesta página, a Reeves and Sons Limited pode ganhar uma comissão. Veja nosso Declaração de ética.

Uma vez que a parte mais importante de qualquer design de site, o plano de fundo de um site pode ser usado de várias maneiras para ajudar a criar uma melhor experiência do usuário.

Hoje, criar planos de fundo adequadamente é mais difícil do que era antes e apresenta alguns novos desafios, ao mesmo tempo em que restringe parte do potencial que outroswise teria.

Por exemplo, o plano de fundo de épocas anteriores poderia, na verdade, ser usado como uma parte prática do design. Você poderia colocar setas nele, por exemplo, para direcionar a atenção do espectador para algo importante.

Por que as coisas mudaram é por causa da necessidade de responsive design e a diversidade de diferentes tamanhos de tela e tipos de tela que as pessoas podem estar usando.

Como resultado, o plano de fundo tornou-se um elemento menos importante no design de sites atualmente, e muitos sites não têm nenhum histórico oficial.

Os fundos são realmente importantes? Para descobrir, nós inspecionamos os sites top rankings 30 (não incluindo repetições) e os resultados são muito interessantes.

Como você pode ver na imagem acima, os sites mais bem classificados não se preocupam com os planos de fundo e isso não parece ter causado o menor dano a eles no que diz respeito à aceitação do usuário.

Isso vai contra o pensamento convencional em relação ao design de sites, mas é difícil argumentar contra fatos concretos e frios. Por incrível que pareça, o primeiro site da lista com plano de fundo não entra em ação até você chegar ao número 10, que é Twitter, e esse plano de fundo só ficará visível se você não estiver logado.

Nos principais sites 30 da 2017, os únicos sites com fundos apropriados eram:

  • Twitter, com um fundo fotográfico (classificado em 10º)
  • Live (Outlook), com um fundo de cor sólida (classificado 12th)
  • NetFlix, com um fundo de colagem (classificado 21st)
  • WordPress, com um fundo de cor sólida (classificado como 26th)
  • Bing, com um fundo fotográfico (classificado como 29th)
  • Tumblr, com um fundo fotográfico (classificado 30th)

Portanto, apenas 20 por cento dos principais sites 30 tinham origens, e os que o fizeram estavam bem abaixo na lista.

A única vantagem do plano de fundo do site é que ele ajuda a manter um senso de identidade do site em várias páginas, mas como existem outros elementos que podem atingir esse objetivo tão bem e talvez até melhor, isso não é realmente uma grande vantagem.

As desvantagens são inúmeras. Os fundos apresentam desafios extras quando se trata do site responsivee pode exigir atualização frequente para evitar que se torne obsoleto.

Outro desafio para o designer moderno é que, além de fundos estáticos, agora também é possível criar fundos de vídeo. Se você optar pelo último, é vital saber o que está fazendo, porque muitos usuários acharão um plano de fundo de vídeo mal planejado incomodado.

Com tantos motivos para não usar planos de fundo, você pode decidir seguir os passos dos sites mais bem classificados e abandonar toda a ideia de plano de fundo de uma vez por todas. Mas se o briefing insiste que o site precisa ter um histórico, o que você pode fazer? É isso que tentaremos resolver no restante deste artigo.

Fundos devem ser contidos

O conteúdo deve estar sempre em uma camada acima do plano de fundo da página. Se você não separar os elementos da página em camadas diferentes, poderá criar problemas quando algo precisar ser alterado.

É uma boa prática empregar essa separação de camadas o máximo possível. Por exemplo, o logotipo do site realmente precisa ser incorporado diretamente no plano de fundo? Na maioria das vezes, seria mais sensato ter o logotipo em uma camada separada. Dessa forma, se o logotipo precisar ser atualizado, ele poderá ser atualizado independentemente do plano de fundo inteiro.

Usar camadas dessa maneira significa mais trabalho para você no lado da criação, mas menos trabalho no lado da manutenção. Também lhe dá o máximo de controle, pois você pode ocultar as coisas, movê-las ou fazê-las comportar-se de maneira diferente de acordo com suas necessidades a qualquer momento.

Esta imagem mostra a estrutura ideal para um modelo de design de plano de fundo:

Dentro de cada camada (exceto a camada base), há espaço para criar camadas adicionais para graus ainda maiores de separação, se você precisar delas.

Quanto mais graus de separação você criar, mais controle poderá obter. Você pode sentir que isso não é importante para você agora, mas muitas vezes acontece que isso se torna um fator mais tarde.

A única coisa mais importante a entender é que o “fundo” é tudo o que não é conteúdo. Portanto, textos ou imagens que devem estar na página, mas não como conteúdo, contam como parte do plano de fundo, mas nem todos os classificarão dessa forma.

concepção

Nos primórdios do web design, o enquadramento era apenas uma questão de descobrir onde seu conteúdo deveria estar em relação ao plano de fundo. Neste dia de responsive design, no entanto, é tipicamente mais complicado do que isso.

Com o responsive design, você tem apenas duas opções para lidar com a questão do enquadramento. A primeira opção é dimensionar o conteúdo e a imagem de fundo em relação ao tamanho da tela disponível. Isso é ideal quando a integridade do projeto é o fator mais importante, embora essa seja uma situação bastante rara.

A segunda opção é eliminar gradualmente as seções do plano de fundo, ou até mesmo todo o plano de fundo, na situação mais comum em que a legibilidade do conteúdo é mais importante do que a integridade do design.

Esse problema de “integridade do design”, aliás, simplesmente significa que o design sempre parece o mesmo, não importa em que tipo de tela seja visualizado. O oposto é onde o conteúdo sempre parece (mais ou menos) o mesmo, não importa o tipo de tela em que é visualizado.

Usando dimensionamento para responsiveness

Quando você usa o dimensionamento para manter o enquadramento uniforme em diferentes tipos de dispositivos e orientações, ele mantém a integridade do seu design, mas o resultado ainda pode nem sempre ser o que você espera ou mesmo deseja, especialmente se você usar um fundo fotográfico.

Vamos conferir um exemplo dessa técnica em ação. Começando com o Samsung Galaxy S5 no modo retrato (observe que essas imagens são dimensionadas para caber no artigo, para que o texto que você pode ver fique legível no próprio dispositivo).

É assim que parece no modo paisagem (quase sempre é melhor segurar o telefone na orientação paisagem para tudo, exceto para fazer chamadas, mas as pessoas ainda insistem em segurar os telefones na orientação retrato.

Como você pode ver, o layout é perfeitamente bom quando dimensionado, mesmo quando você só tem 640 x 360 pixels para trabalhar. Em seguida, temos o iPad na orientação retrato.

E paisagem.

O que você notará quando o dimensionamento for usado é que há pouca variação entre os diferentes dispositivos e resoluções, exceto que pode haver muito espaço vertical desperdiçado na visualização retrato.

Na verdade, seria melhor usar métodos diferentes nas partes de fundo e de conteúdo, de modo que os itens do menu fossem agrupados em uma grade 2 × 2 em vez de sempre permanecer no layout 1 × 4, mas a razão de não ser feito dessa forma é porque é impossível prever quanto espaço vertical estará disponível.

Assim, a vantagem do escalonamento é quando você deseja garantir que algum componente permaneça sempre visível, independentemente das circunstâncias.

Usando ocultar e revelar em fases responsiveness

Um cenário mais prático, e aquele que a maioria dos designers vai querer usar na maior parte do tempo, é um design onde o plano de fundo (ou partes dele) pode simplesmente ser eliminado gradualmente se não houver espaço suficiente para mostrá-lo, de modo que o conteúdo do site sempre recebe o máximo de atenção.

Aqui está um exemplo da diferença ao usar este método. Usaremos os mesmos dispositivos e orientações para ilustrar. O primeiro é o retrato do Samsung Galaxy S5.

Paisagem Samsung Galaxy S5.

retrato do iPad.

Paisagem do iPad.

Aqui você pode ver uma diferença considerável entre os dispositivos. A pequena tela do Samsung Galaxy S5 não permite a exibição do fundo, independentemente de o aparelho estar na orientação retrato ou paisagem, e o que é mostrado é ajustado para caber no espaço disponível.

Quando o mesmo site é visualizado no iPad, o fundo é sempre exibido independentemente da orientação, mas há alguma diferença no que é visto.

Melhores conceitos para design de plano de fundo (em ordem)

1. Cor sólida (ou sem cor)

2. Fotográfico (esticado)

3. Telha pequena (sem costura perfeita)

4. Telha grande (perfeita sem costura)

O que você deve evitar é colocar fundos fotográficos lado a lado, a menos que isso possa ser feito de forma que não seja perceptível. O alongamento normalmente é melhor para fundos fotográficos ou para confiná-los a um espaço predefinido.

A era do grande fundo espalhafatoso está praticamente morta, exceto para sites especializados destinados apenas à visualização em um desktop. A maioria dos fundos projetados para desktops não parecerão bons quando visualizados em telefones.

Uma alternativa que você pode fazer é configurar um grande número de pontos de interrupção em seu arquivo CSS e projetar emdivifundos duplos para cada ponto de interrupção, mas como sempre, você tem o desafio de que o espaço vertical disponível nunca possa ser calculado, mesmo quando o tipo de dispositivo é conhecido.

imagem de cabeçalho cortesia de

Bogdan Rancea

Bogdan é um membro fundador da Inspired Mag, acumulando quase 6 anos de experiência neste período. Em seu tempo livre, ele gosta de estudar música clássica e explorar artes visuais. Ele é muito obcecado com fixies também. Ele é dono do 5 já.

Comentários Respostas 0

Deixe um comentário

O seu endereço de e-mail não será publicado. Os campos obrigatórios são marcados com *

NOTA *

Este site usa o Akismet para reduzir o spam. Saiba como seus dados de comentário são processados.