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 fundo em épocas anteriores poderia realmente ser usado como uma parte prática do design. Você poderia colocar setas sobre ele, 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 incomodam com os planos de fundo, e não parece ter feito o menor dano possível em relação à aceitação do usuário.

Isso contraria o pensamento convencional sobre o design de sites, mas é difícil argumentar com fatos concretos e frios. Surpreendentemente, o primeiro site da lista com plano de fundo não entra em ação até chegar ao número 10, que é Twitter, e esse plano de fundo será visível apenas se você não estiver conectado.

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 de um histórico de sites é 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 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 tantas razões para não usar fundos, você pode decidir seguir os passos dos sites mais bem classificados e abandonar toda a ideia 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 é o 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 seus elementos de página em camadas diferentes, isso poderá criar problemas para você 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 achar que isso não é importante para você agora, mas 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 um enquadramento uniforme entre diferentes tipos de dispositivos e orientação, ele mantém a integridade do seu design, mas o resultado pode nem sempre ser o que você esperaria ou desejaria, especialmente se você usar um plano de fundo fotográfico.

Vamos verificar 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, então o texto que você pode ver lá é realmente legível no próprio dispositivo).

Isto é o que parece no modo paisagem (é quase sempre melhor manter um telefone na orientação paisagem para tudo, exceto fazer chamadas telefônicas, mas as pessoas ainda insistem em manter seus 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.

A coisa que você notará quando o dimensionamento é usado é que há pouca variação entre diferentes dispositivos e resoluções, exceto que pode haver muito espaço vertical perdido na visualização vertical.

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 o que a maioria dos designers deseja usar na maior parte do tempo, é um design em que o plano de fundo (ou partes dele) pode ser simplesmente eliminado se não houver espaço suficiente para exibi-lo. recebe a máxima atenção.

Aqui está um exemplo da diferença ao usar este método. Vamos usar 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 tela pequena do Samsung Galaxy S5 não permite que o plano de fundo seja exibido, independentemente de o dispositivo ser mantido na orientação retrato ou paisagem, e o que é mostrado é ajustado para se ajustar ao 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 é a colocação de fundos fotográficos, a menos que isso possa ser feito de tal forma que não seja perceptível. O alongamento normalmente é melhor para fundos fotográficos ou para confiná-los em 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.