Todo lo que necesitas saber sobre el diseño HD
Si aún no ha tomado nota, la web está yendo a alta definición. Desde imágenes hasta fondos y elementos de la interfaz de usuario, la alta definición es la nueva normalidad.
Comenzó con algunas de las pantallas de retina y alta resolución, pero el acceso a conexiones más rápidas también ha enfatizado este fenómeno, proporcionando un mayor acceso a los sitios web de HD desde cualquier dispositivo. ¿Estás pensando y diseñando en alta definición? Aquí hay algunas cosas para considerar.
¿Qué es HD realmente?
La señal más común para HD es el término pantalla de retina. Hecho popular por los dispositivos Apple, el término se ha convertido en sinónimo de pantallas de alta definición. Esto se relaciona con una tecnología bastante específica para dispositivos.
Paula Borowska para Designmodo tiene una de las descripciones más fáciles de entender:
- El píxel del dispositivo es la unidad física más pequeña que se muestra.
- La densidad de píxeles es el número de píxeles que se muestran en un espacio determinado.
- La resolución es el número de píxeles en todo el ancho o alto del espacio visible.
- Los píxeles por pulgada, conocidos como ppi o ppp, se refieren a la cantidad de píxeles que obtiene cuando divide el ancho físico de la pantalla por la cantidad de píxeles horizontales que se muestran.
- DPI alto es una densidad de pantalla de 200 píxeles por pulgada o más.
La mayoría de los dispositivos que está comprando hoy, desde teléfonos móviles hasta tabletas y computadoras portátiles, probablemente tengan una pantalla de alta definición. (Y la realidad es que incluso si tiene un dispositivo sin pantalla HD, tener un sitio web de alta definición no le hará daño).
Imágenes
El primer lugar en el que quizás desee pensar en alta definición es cuando se trata de imágenes. Se acabaron los días de guardar cada imagen a 600 píxeles de ancho a 72 ppp. Eso simplemente no será suficiente en las pantallas de hoy.
El estándar base para HD es 200 ppi. Eso es más del doble de lo que podría haber estado ahorrando anteriormente. Agregue el hecho de que las pantallas se están haciendo más grandes con 1920 por 1080 creciendo a un ritmo rápido. Según W3Schools.com, las pantallas más comunes son 1024 por 768 píxeles o más, con más del 30 por ciento de los usuarios trabajando en una pantalla de alta definición.
Lo mismo es cierto para pantallas pequeñas también. Los dispositivos populares como el iPhone 6 (401 ppi) y el Samsung Galaxy S5 (577 ppi) también cuentan con capacidad HD.
Entonces, cuando se trata de imágenes, tienen que ser nítidas. No te saldrás con imágenes borrosas o pixeladas. Guardar en la antigua "resolución estándar" hará que su diseño se vea plano, mientras que las imágenes de alta resolución aparecerán más pulidas. La desventaja de usar este tipo de imagen es la velocidad; mayor calidad equivale a tiempos de carga más largos. Guarde lo más cerca posible de las especificaciones y no sobrecargue archivos de imagen.
Truco divertido: considere usar la tendencia de la imagen borrosa para su ventaja aquí si le preocupan los tiempos de carga. Hay menos datos para leer y puede guardar un poco más pequeño y aún obtener la nitidez deseada de otros elementos más pequeños de alta resolución.
Vídeo
El video es la tendencia visual imprescindible de 2016. Parece que en todos los lugares a los que recurre hay acción en movimiento en las páginas de inicio del sitio web. Al igual que con las imágenes, debe ser de alta calidad.
Para la mayoría de los diseñadores y sitios web, esto significa apegarse a un video de ciclo bastante corto para evitar problemas de carga. Otros están optando por videos más largos y distraen a los usuarios de la espera con una animación de carga. El video de alta calidad requiere grabación, compresión y almacenamiento de alta calidad.
También requiere mucha planificación cuando se trata de cómo se reproducirá y se verá el video en el diseño del sitio. Un video de héroe de pantalla completa, por ejemplo, debe filmarse horizontalmente para que se ajuste a la pantalla. Para facilitar su uso, los editores de video simples lo ayudarán a ajustar los cuadros por relación de aspecto; elija 16: 9 para una sensación de pantalla panorámica o 4: 3 para una apariencia más cuadrada.
Truco divertido: utilice "video fijo" para un efecto de gran drama. Aquí está la idea: filme algo que sea mayormente estático con solo un pequeño movimiento en segundo plano. Obtendrá una experiencia de usuario genial sin sobrecargar su diseño.
Ilustraciones y fondos
Cuando se trata de ilustraciones y fondos, HD también importa aquí. Recuerde que cada detalle (o falta de él) es visible en el espacio de alta definición, por lo que querrá asegurarse de que cada parte del diseño contribuya a la estética general.
Cuando se trata de ilustraciones o fondos, los detalles son importantes. Concéntrese en crear un diseño que sea prácticamente perfecto en píxeles, se ajuste al diseño y no se desmorone cuando se amplía o reduce. La forma más fácil de hacer esto es centrarse en la simplicidad.
Si bien puede ser fácil comenzar a crear una ilustración complicada o un fondo texturizado, lo simple es probablemente una mejor opción. Si desea agregar más interés, considere hacer que un elemento animado pequeño sea parte del diseño, o condimente con opciones de color más audaces de lo que normalmente usaría.
Y luego está el componente técnico: debe usar un formato de imagen escalable para que todo realmente se ajuste según lo previsto y a su potencial de alta definición total.
Truco divertido: agrega un toque de animación al fondo en un bucle largo. Los visitantes de navegación rápida pueden perderse, pero la pequeña recompensa seguramente deleitará a los usuarios habituales y a aquellos que se quedan por un período prolongado.
Iconos y elementos
Cuando se trata de todos los íconos y elementos de la interfaz de usuario en su sitio web, hay seis letras que necesita saber: SVG y CSS. Y todos estos elementos probablemente se clasificarán como uno de estos dos tipos.
SVG, o gráficos vectoriales escalables, es un vector esencial para la web. Puede usar SVG para guardar formas, iconos y muchos otros elementos de la interfaz de usuario. Las imágenes son leídas por los navegadores modernos, hay algunas más antiguas que no funcionan (estamos hablando con algunos de ustedes que están trabajando en Internet Explorer), como texto y renderizado de la misma manera que HTML. Scott Murray tiene una muy buena cartilla en su blog si quiere entrar en el meollo de SVG.
Los elementos CSS son código puro y se escalarán y diseñarán con el diseño. (Probablemente no necesite dibujar botones en Photoshop y pegarlos en su sitio). W3Schools.com tiene un tutorial básico sobre cómo crear y usar elementos CSS.
Esto es lo que pasa con SVG y CSS: los elementos se mueven con su sitio. Esto es lo que necesita en un marco receptivo. Nada matará su diseño de sitio web de alta definición más rápido que un montón de botones pixelados.
Truco divertido: no es necesario reinventar la rueda para encontrar algunos ingeniosos elementos SVG o CSS. Echa un vistazo a estos botones SVG de Tympanus o el generador de botones CSS.
Conclusión
La alta definición distinguirá a su sitio web de todos los que no lo están haciendo. Los usuarios comienzan a esperar una experiencia HD en cada una de sus pantallas, desde televisores hasta computadoras y teléfonos. Su sitio web necesita cumplir con esas expectativas.
La buena noticia es que puedes hacer pequeños cambios en el camino para llegar allí. Presta atención a tus imágenes, videos y otros elementos de la interfaz de usuario para asegurarte de que muestres píxeles y que cada imagen sea perfecta y de alta calidad.
