Tudo o que você precisa saber sobre o design HD
Se você ainda não tomou nota, a web está em alta definição. De imagens a planos de fundo a elementos da interface do usuário, a alta definição é o novo normal.
Tudo começou com algumas telas de retina e de alta resolução, mas o acesso a conexões mais rápidas também enfatizou esse fenômeno, proporcionando maior acesso a sites em HD a partir de qualquer dispositivo. Você está pensando e projetando em alta definição? Aqui estão algumas coisas a considerar.
O que é HD, realmente?
A sugestão mais comum para HD é o termo exibição de retina. Tornado popular pelos dispositivos Apple, o termo tornou-se sinônimo de telas de alta definição. Isso se refere a alguma tecnologia bastante específica para dispositivos.
Paula Borowska, da Designmodo, tem uma das descrições mais fáceis de entender:
- O pixel do dispositivo é a menor unidade física exibida.
- Densidade de pixels é o número de pixels exibidos em um determinado espaço.
- Resolução é o número de pixels em toda a largura ou altura do espaço visível.
- Pixels por polegada, conhecidos como ppi ou dpi, referem-se ao número de pixels obtido quando você divide a largura física da exibição pelo número de pixels horizontais exibidos.
- DPI alto é uma densidade de exibição de 200 pixels por polegada ou mais.
A maioria dos dispositivos que você compra hoje, de celulares a tablets e laptops, provavelmente possui uma tela de alta definição. (E a realidade é que, mesmo que você tenha um dispositivo sem tela HD, ter um site de alta definição não será prejudicial.)
Imagens
O local em que você pode querer pensar primeiro em alta definição é quando se trata de imagens. Os dias de salvar todas as imagens com 600 pixels de largura e 72 ppi terminaram. Isso simplesmente não funciona nas telas de hoje.
O padrão básico para HD é de 200 ppi. Isso é mais que o dobro do que você poderia estar economizando anteriormente. Acrescente o fato de que as telas estão ficando maiores com 1920 por 1080 crescendo rapidamente. De acordo com o W3Schools.com, as telas mais comuns são 1024 por 768 pixels ou superior, com mais de 30% dos usuários trabalhando em uma tela de alta definição.
O mesmo vale para telas pequenas também. Dispositivos populares como o iPhone 6 (401 ppi) e o Samsung Galaxy S5 (577 ppi) também possuem capacidade HD.
Então, quando se trata de imagens, elas precisam ser nítidas. Você não vai se safar com imagens borradas ou pixeladas. Salvar na antiga “resolução padrão” deixará seu design com aparência plana, enquanto imagens de alta resolução parecerão mais polidas. A desvantagem de usar esse tipo de imagem é a velocidade; qualidade superior é igual a tempos de carregamento mais longos. Salve o mais próximo possível das especificações e não faça upload de arquivos de imagem em excesso.
Truque divertido: considere usar a tendência da imagem borrada a seu favor aqui se estiver preocupado com o tempo de carregamento. Há menos dados para ler e você pode economizar um pouco menor e ainda obter a nitidez desejada de outros elementos menores de alta resolução.
Vídeo
O vídeo é a tendência visual imprescindível de 2016. Parece que em todos os lugares que você vira há ações em movimento nas páginas iniciais do site. Assim como nas imagens, ele precisa ser de alta qualidade.
Para a maioria dos designers e sites, isso significa aderir a um vídeo em loop bastante curto para evitar o carregamento de soluços. Outros estão optando por vídeos mais longos e distraem os usuários da espera com uma animação de carregamento. Vídeo de alta qualidade requer gravação, compactação e economia de alta qualidade.
Também é preciso muito planejamento quando se trata de como o vídeo será reproduzido e visualizado no design do site. Um vídeo de herói em tela cheia, por exemplo, precisa ser filmado horizontalmente para que caiba na tela. Para facilitar o uso, editores de vídeo simples o ajudarão a ajustar os quadros por proporção; escolha 16: 9 para ter uma sensação de tela ampla ou 4: 3 para ter uma aparência mais quadrada.
Truque divertido: use "vídeo estático" para obter um efeito dramático alto. Aqui está a idéia: filmar algo que é quase estático com apenas um pequeno movimento em segundo plano. Você terá uma experiência legal do usuário sem sobrecarregar seu design.
Ilustrações e Fundos
Quando se trata de ilustrações e planos de fundo, o HD também é importante aqui. Lembre-se de que todos os detalhes (ou a falta deles) são visíveis no espaço de alta definição, portanto, você deve garantir que todas as partes do design contribuam para a estética geral.
Quando se trata de ilustrações ou planos de fundo, os detalhes são importantes. Concentre-se em criar um design que seja praticamente perfeito em pixels, se encaixe no design e não desmoronar quando aumentado ou diminuído. A maneira mais fácil de fazer isso é se concentrar na simplicidade.
Embora possa ser fácil criar uma ilustração complicada ou um plano de fundo texturizado, simples é provavelmente a melhor opção. Se desejar adicionar mais interesse, considere fazer um pequeno elemento animado parte do design ou apimente-o com opções de cores mais ousadas do que normalmente você pode usar.
E há o componente técnico: você precisa usar um formato de imagem escalável para que tudo realmente seja dimensionado conforme o esperado e com todo o seu potencial de HD.
Truque divertido: adicione uma dica de animação ao plano de fundo em um loop longo. Os visitantes da navegação rápida podem não entender, mas a pequena recompensa certamente agradará os usuários repetidos e aqueles que ficam por um longo período de tempo.
Ícones e Elementos
Quando se trata de todos os ícones e elementos da interface do usuário em seu site, há seis letras que você precisa conhecer: SVG e CSS. E todos esses elementos provavelmente serão classificados como um desses dois tipos.
SVG, ou gráficos vetoriais escaláveis, é um vetor essencial para a web. Você pode usar o SVG para salvar formas, ícones e muitos outros elementos da interface do usuário. As imagens são lidas por navegadores modernos - existem alguns mais antigos por aí que não funcionam (estamos conversando com alguns de vocês que trabalham no Internet Explorer) - como texto e renderizados da mesma maneira que HTML. Scott Murray tem uma ótima cartilha em seu blog, se você quiser entrar no âmago da questão do SVG.
Os elementos CSS são código puro e serão dimensionados e estilizados com o design. (Você provavelmente não precisa desenhar botões no Photoshop e colá-los no seu site.) O W3Schools.com tem um tutorial básico sobre como criar e usar elementos CSS.
Aqui está a coisa sobre SVG e CSS: Os elementos são movidos pelo seu site. É disso que você precisa em uma estrutura responsiva. Nada matará o design do seu site em alta definição mais rapidamente do que um monte de botões pixelados.
Truque divertido: Você não precisa reinventar a roda para encontrar alguns elementos SVG ou CSS bacanas. Confira esses botões SVG do Tympanus ou do CSS Button Generator.
Conclusão
A alta definição diferencia o seu site de todos que não o fazem. Os usuários estão começando a esperar uma experiência em HD em todas as telas, desde televisores a computadores e telefones. Seu site precisa atender a essas expectativas.
A boa notícia é que você pode fazer pequenas alterações no caminho para chegar lá. Preste atenção às suas imagens, vídeos e outros elementos da interface do usuário para garantir que você esteja mostrando pixels e que todos os visuais são perfeitos e de alta qualidade.
