Criando fundos para sites

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 fundos adequadamente é mais difícil do que era e apresenta alguns novos desafios, ao mesmo tempo em que restringe um pouco do potencial que os planos de fundo teriam.

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 design responsivo, 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 vai contra o pensamento convencional a respeito do design do site, mas é difícil argumentar com fatos duros e frios. Surpreendentemente, o primeiro site na lista com um plano de fundo não entra em cena até você alcançar o número 10, que é o Twitter, e esse plano de fundo só é 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 10th)
  • 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.

Desvantagens são numerosas. Os planos de fundo introduzem desafios adicionais quando se trata de capacidade de resposta do site e podem exigir atualizações freqüentes para evitar que se tornem obsoletos.

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 coisa mais importante a entender é que o “fundo” é qualquer coisa que não seja 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 maneira.

concepção

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

Com design responsivo, você tem apenas duas opções para lidar com o problema de enquadramento. A primeira opção é dimensionar o conteúdo e a imagem de plano de fundo em relação ao tamanho de tela disponível. Isso é ideal quando a integridade do design é 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.

Esta questão de "integridade de design", a propósito, simplesmente significa que o design sempre parece o mesmo, não importa em que tipo de tela ele seja visto. O oposto é onde o conteúdo sempre parece (mais ou menos) o mesmo, não importando o tipo de tela em que é visto.

Usando dimensionamento para capacidade de resposta

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 plano de fundo e conteúdo, para que os itens de menu fossem agrupados em uma grade 2 × 2 em vez de sempre permanecerem no layout 1 × 4, mas a razão disso não ser feito é 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 phased ocultar e revelar capacidade de resposta

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 cenário chamativo está praticamente morta, exceto pelos sites especializados destinados apenas para visualização em um desktop. A maioria dos planos de fundo projetados para desktops não terá boa aparência quando exibidos em telefones.

Uma solução alternativa que você pode fazer é configurar um grande número de pontos de interrupção em seu arquivo CSS e criar fundos individuais para cada ponto de interrupção, mas como sempre, você tem o desafio de nunca calcular o espaço vertical disponível, 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á.