7 dicas para galerias de fotos mais responsivas
Todos sabemos e entendemos a importância de criar sites em uma plataforma responsiva, certo? Isso se aplica também a imagens e galerias de fotos.
Não há nada pior do que navegar para um site bonito e ver imagens que simplesmente não se "encaixam" no lugar ou no tamanho adequado. Quase deixa você pensando que o designer esqueceu algo ou perdeu um passo.
Hoje, veremos sete coisas que você pode fazer no processo de design para criar melhores galerias de fotos responsivas. (Não estamos falando de código aqui; esses são processos de design que podem ajudar você e o desenvolvedor, sejam eles iguais ou não.)
Explore o Envato Elements
1. Considere as proporções
A experiência de visualização na área de trabalho pode ser bem diferente daquela em um dispositivo móvel. Mas para a maioria dos sites, os canais de imagem são os mesmos. Seu trabalho é garantir que a mesma mensagem seja comunicada nos dois ambientes e que a imagem não se perca em diferentes tamanhos de tela.
É aí que entra o pensamento sobre a proporção - a relação entre os planos horizontal e vertical da imagem.
De volta ao site para computador, uma foto horizontal super fina e legal pode parecer incrível na parte superior do design do site. Mas o que acontece com essa imagem na tela menor em um ambiente mais quadrado? A foto diminui para um tamanho difícil de ver? Ou metade da foto desaparece?
É aí que entra a proporção. Ao escolher uma relação horizontal-vertical para tamanhos de foto semelhantes, menos conteúdo de imagem será perdido ao trocar de dispositivo. Também facilitará o trabalho com canais de imagem e você não precisará se preocupar tanto com o upload de vários tamanhos para diferentes pontos de interrupção.
2. Tamanho e Escala Consistentemente
O cuidado que você toma ao recortar, dimensionar e fazer upload de fotos pode afetar bastante o seu fluxo de trabalho.
Quantos de vocês apenas enviam fotos para o CMS e esperam o melhor? Sim é a resposta errada.
Cada foto deve ser cortada e dimensionada para a veiculação no design do site. Isso garante que as fotos tenham a aparência pretendida e você não acabará perdendo as cabeças na parte superior das fotos ou elementos sendo deixados de fora de um (ou ambos) lados.
Demora um pouco mais de tempo no backend do projeto, mas vale a pena o esforço. (Principalmente se você estiver trabalhando com sliders ou galerias.)
3. Use um controle deslizante ou galeria
Usar um contêiner para imagens como um controle deslizante ou uma galeria pode ajudá-lo a gerenciar melhor as imagens responsivas no design do site. Principalmente se você estiver usando uma ferramenta de terceiros bem conhecida e estabelecida, a maior parte do trabalho pesado é feita para garantir que esses elementos funcionem conforme o esperado.
Duas das dicas anteriores permanecem de vital importância, mesmo ao usar elementos de controle deslizante ou galeria; as proporções de tela e os conceitos de dimensionamento e dimensionamento ainda se aplicam.
Não sabe qual opção usar? Opte por um controle deslizante quando tiver um punhado de ótimas imagens que funcionarão em tamanhos maiores. É uma opção popular para a seção superior ou "herói" de uma página da web. Opte por uma galeria quando você tiver muitas imagens que podem ser pequenas, sem problemas de legibilidade. Isso funciona bem para portfólios ou sites com muitas imagens para mostrar.
4. Fique longe das legendas quando possível
As legendas podem ser uma ótima ferramenta para agregar valor às informações em uma imagem, mas podem realmente atrapalhar o funcionamento do site. Evite-os se puder ou tiver uma solução alternativa que não esteja na forma de uma legenda tradicional.
Blocos de texto grandes, como legendas, podem renderizar-se lindamente em telas grandes, mas apresentam problemas importantes em ambientes menores. O efeito resultante pode ser dissonante e potencialmente fazer com que os usuários abandonem seu site. (E com tanto tráfego proveniente de dispositivos móveis para a maioria dos sites, isso pode ser desastroso.)
5. Cuidado ao misturar vídeo e imagens
Sejamos claros: é perfeitamente aceitável ter elementos de vídeo e imagem em seu site. Provavelmente é algo que você deve fazer.
Mas não misture vídeo e imagens nos mesmos elementos do design, como colocar elementos de vídeo e imagem no mesmo controle deslizante. Às vezes, você terá sorte e funcionará como um encanto. Outras vezes, você ficará com caixas em branco em certos dispositivos que parecem estranhos.
A melhor opção é conceder a cada tipo diferente de elemento seu próprio espaço no design. Isso se aplica a praticamente qualquer elemento de design, mas principalmente a imagens e vídeos.
6. Corte elementos desnecessários
Um dos maiores problemas com sliders e galerias é que muitas vezes o designer coloca muito lixo dentro do contêiner. Existem setas de navegação, botões de navegação, texto, chamadas à ação e a lista continua.
Geralmente, os usuários entendem como interagir com um controle deslizante. A menos que você esteja fazendo algo totalmente fora do comum, não precisará de duas camadas de navegação que mostrem aos usuários o que fazer. Uma única linha de botões ou setas é suficiente (se você precisar deles).
Inclua apenas elementos com os quais os usuários precisarão interagir. Se o objetivo de uma galeria de imagens ou controle deslizante é fazer com que o usuário clique / toque em uma frase de chamariz, essa deve ser a única opção na foto. Mantenha simples. Não forneça muitas opções. Na verdade, pode ajudar suas taxas de conversão.
7. Use apenas imagens de alta qualidade
É quase desnecessário dizer, mas ainda acontece com muita frequência. Se você não tem uma imagem estelar, não use nenhuma imagem. Imagens de alta qualidade e alta resolução são mais importantes do que nunca. Os usuários não perderão tempo vendo um site com imagens pixeladas ou ruins (e provavelmente não confiarão em você se a qualidade for inferior).
Um grande número de usuários está olhando para o design do seu site usando dispositivos com telas de alta resolução; eles esperam visuais de primeira linha. Você precisa entregar.
Alguns formatos de imagem estão mudando para atender a essas necessidades de alta resolução e fornecer mais imagens compactadas. Verse em formatos - o Google Developers é um ótimo lugar para começar - saiba quais resoluções de tela são mais usadas em geral e adquira o hábito de salvar arquivos de uma maneira que possa ser melhor entregue aos usuários.
Conclusão
Todos nós queremos criar sites com os quais os usuários sintam necessidade de interagir. Imagens fortes são uma parte essencial dessa equação. Igualmente importante é fazê-los renderizar bem, independentemente do dispositivo.
Planeje espaços de imagens que funcionem em vários tamanhos de dispositivos quando você estiver nos estágios de wireframing de um projeto de design de site. Você pode achar que há algo a dar e receber, principalmente em termos de formato da imagem, mas, a longo prazo, tomar essas decisões com antecedência e criar essa consistência beneficiarão o design do site a longo prazo.
