As imagens pontilhadas são uma nova tendência em Web Design?


8

Ultimamente, notei que alguns dos sites que visito regularmente adotam uma tendência nova e bizarra no Web Design: "as imagens pontilhadas". Não sei como chamá-lo. Parece que um padrão de pontos espaçados regularmente foi deliberadamente colocado sobre todas as miniaturas, ou às vezes é um padrão de grade de luz em vez de pontos, mas a aparência final é semelhante. Parece um pouco uma imagem pontilhada.

Pessoalmente, acho o efeito terrível e, a princípio, achei que a renderização da imagem do navegador era falha, mas tentei três navegadores diferentes e ainda consigo ver o padrão. Parece que foi planejado.

Na verdade, um dos sites que costumava fazer isso voltou para fotos comuns. Era um site de jornal e eu suspeito que eles receberam um monte de telefonemas perguntando por que suas fotos estavam todas bagunçadas e reverteram a decisão depois de alguns meses.

Alguém já ouviu ou viu isso antes?

Exemplo de link: http://www.linkedin.com/today/se/editorspicks


1
que tal alguns exemplos?
Dan Hanly

Desculpe, eu pretendia postar uma, acabei de atualizar minha pergunta.
Md1337

3
Não, não é uma nova tendência.
DA01 21/08/12

1
Vale ressaltar que ele pode causar efeitos de moiré perturbadores quando a imagem é dimensionada, por exemplo, em um navegador de smartphone.
e100

1
Eu não vê-lo ...
Alex

Respostas:


13

No passado, eu vi esse efeito usado para aprimorar um recurso da imagem. O link que você postou parece estar fazendo isso desnecessariamente.

Consulte http://demo.grandpixels.com/?theme=linguini

O texto nas imagens principais do controle deslizante realmente aparece porque a sobreposição de estilo de grade / ponto escurece e desfoca a imagem levemente, fazendo com que o texto em branco pareça ainda mais branco e claro.

As imagens no meu link estão ótimas e a imagem de sobreposição serve a um propósito bem claro, e é para melhorar a mensagem do texto; algo que faz muito bem.

insira a descrição da imagem aqui

Sem a sobreposição da grade, o texto em branco seria misturado ao queijo por trás.
Eles precisavam de um estilo que funcionasse para qualquer imagem por trás, clara ou escura, e para o texto não perder seu impacto quando exibido sobre qualquer imagem de fundo.

Seu exemplo do linkedin mostra como ele não deve ser usado.
Na maioria das vezes, Design Gráfico é uma ciência mais que uma arte, e efeitos como esse não devem ser usados ​​porque "eles parecem bons", devem ser usados ​​porque um objetivo claro foi definido para seu uso e seu uso é justificado no contexto da página.


Ótima dica sobre como a sobreposição da grade ajuda o texto a se destacar da imagem.
jhocking

Eu posso ver o uso em casos limitados, como no seu exemplo. Caso contrário, é apenas um truque. Fiquei muito curioso quando comecei a ver isso em mais e mais sites recentemente e acho que há algum tipo de tendência se desenvolvendo. Esperemos que ele morra tão rapidamente. Como uma observação lateral amigável, acho a sua implementação técnica sub-ideal, é muito lenta porque você usa um fundo 2x2 repetido e coloca muita pressão no navegador para renderizar. Eu aumentaria consideravelmente o tamanho da sobreposição e você notará uma grande melhoria na resposta de rolagem da página.
Md1337

Felicidades. No entanto, não é minha, eu só descobri-lo na web;)
Dan Hanly

5

A sobreposição de padrão é uma ferramenta de design útil e pode servir a alguns propósitos. Como mencionado anteriormente, ele pode ajudar a separar visualmente os elementos gráficos da página, mas também ajuda a ocultar artefatos de imperfeições / compactação de jpeg em imagens de baixa resolução que estão sendo super-amostradas para preencher uma tela HD (1920 x 1080).

Às vezes, usarei uma sobreposição de padrão para unificar a aparência de uma coleção de imagens. Se eu tiver 6 imagens tiradas muito bem e 3 que não são tão boas, colocar uma sobreposição de padrão nelas ajuda a uniformizá-las e torna menos dramática a transição entre as imagens boas e ruins.

Aqui está um exemplo em que acho que a sobreposição de padrões funciona muito bem, embora aposto que você terá dificuldade em convencer o fotógrafo original de que é uma melhoria. :) http://goo.gl/d0OYOO


2

O efeito realmente vem dos dias anteriores da otimização da web.

O efeito pontilhado seria aplicado às imagens que eram comprimidas tanto que começaram a artefato. A "grade pontilhada" oculta esses artefatos e faz com que a imagem pareça menos compactada.

Em seguida, ele se espalha como um efeito normal e, como Daniel diz, pode criar ou quebrar uma imagem. Se for usado corretamente (como na maioria dos outros efeitos), você poderá obter ótimos resultados.


1

Penso que, no caso do seu exemplo, foi feito para obscurecer ligeiramente as imagens.

Eu também acho que é um retrocesso aos estilos anteriores.


1

O motivo é mascarar a baixa resolução da imagem. Usar uma imagem de baixa resolução pode melhorar o tempo de carregamento do site e fazer o Google feliz. Então, de uma perspectiva de SEO, é uma tendência.


0

Não sei dizer se é uma tendência ou não. Mas se é - e minha interpretação corresponde ao efeito pretendido (referindo-se ao exemplo de Escolha do editor do Linkedin), acho que é um conceito interessante que pode ter um pouco de peso, não apenas fluff.

Possivelmente, isso pode ser um pouco exagerado, mas para mim, parece que o que eles estão tentando alcançar é sinalizar que essa imagem leva a conteúdo / artigos que residem em outros lugares (por exemplo, material externo; não no site atual) ) Quase como se você estivesse "espreitando" através de uma pequena janela para outro lugar - adicionando profundidade (outra camada) que, do ponto de vista da usabilidade, pode realmente ser potencial em certos contextos.

Admito que não tenho certeza da execução no exemplo que você deu; o efeito não funciona de maneira ideal em metade das imagens (o principal problema é que esse conceito não funciona igualmente bem em imagens que não são fotos).

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.