Si aún no has tomado nota, la web va a alta definición. Desde imágenes a fondos a elementos de interfaz de usuario, la alta definición es la nueva normalidad.
Comenzó con algunas de las pantallas de retina y de alta resolución, pero el acceso a conexiones más rápidas también ha enfatizado este fenómeno, brindando 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 retina. Hecho popular por los dispositivos de Apple, el término ha sido sinónimo de pantallas de alta definición. Esto se relaciona con alguna 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 dpi, 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 mostrados.
- Alta DPI 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 a tabletas y portátiles, probablemente tengan una pantalla de alta definición. (Y la realidad es que incluso si tiene un dispositivo sin una pantalla de alta definición, tener un sitio web de alta definición no hará daño).
Imágenes
El lugar donde primero debería pensar en alta definición es cuando se trata de imágenes. Los días de guardar todas las imágenes a 600 píxeles de ancho a 72 ppi han terminado. Eso simplemente no lo cortará en las pantallas de hoy.
El estándar base para HD es de 200 ppi. Eso es más del doble de lo que podría haber estado ahorrando anteriormente. Agregue el hecho de que las pantallas aumentan de tamaño con 1920 por 1080 creciendo a un ritmo rápido. De acuerdo con 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 las pantallas pequeñas también. Los dispositivos populares como el iPhone 6 (401 ppi) y Samsung Galaxy S5 (577 ppi) también cuentan con capacidad HD.
Así que cuando se trata de imágenes, tienen que ser nítidas. No te saldrás con las imágenes borrosas o pixeladas. ¿Ahorrar en la antigua resolución estándar? dejará su diseño 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 es igual a tiempos de carga más largos. Guarde lo más cerca posible de las especificaciones y no cargue archivos de imagen en exceso.
Truco divertido Considere usar la tendencia de imagen borrosa para su ventaja aquí si está preocupado por los tiempos de carga. Hay menos datos para leer y puede ahorrar un poco más y seguir obteniendo 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 donde se enciende hay acción en movimiento en las páginas web de los sitios 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 adherirse a un video de bucle bastante corto para evitar problemas de carga. Otros optan 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 guardado de alta calidad.
También requiere mucha planificación cuando se trata de cómo se reproducirá y verá el video en el diseño del sitio. Un video héroe de pantalla completa, por ejemplo, debe ser filmado horizontalmente para que se ajuste a la pantalla. Para facilitar su uso, los editores de video simples lo ayudarán a ajustar los fotogramas por relación de aspecto; elija 16: 9 para una sensación de pantalla ancha o 4: 3 para el aspecto más cuadrado.
Truco divertido Utilice? Todavía video? para un efecto de alto drama. Aquí está la idea: filmar algo que es principalmente estático con solo un poco de movimiento en el fondo. Obtendrá una excelente experiencia de usuario 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, que se ajuste al diseño y que no se desmorone al aumentar o reducir la escala. La forma más sencilla de hacerlo es centrarse en la simplicidad.
Si bien puede ser fácil involucrarse para crear una ilustración complicada o un fondo texturizado, probablemente sea una mejor opción. Si desea agregar más interés, considere hacer que un elemento animado pequeño forme parte del diseño, o sazone con opciones de colores más audaces de las que normalmente usaría.
Y luego está el componente técnico: es necesario utilizar un formato de imagen escalable para que todo se pueda escalar según lo previsto y alcanzar su máximo potencial en HD.
Truco divertido Agrega un toque de animación al fondo en un bucle largo. Los visitantes de la navegación rápida pueden pasarlo por alto, pero la pequeña recompensa hará las delicias de los usuarios habituales y de 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 debe saber: SVG y CSS. Y todos estos elementos probablemente serán clasificados 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 algunos más antiguos que no funcionan (estamos hablando con algunos de ustedes que trabajan en Internet Explorer), como texto y renderizado de manera muy similar a HTML.Scott Murray tiene una excelente guía en su blog si quieres 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 tiene tanto SVG como CSS: los elementos se mueven con su sitio. Esto es lo que necesita en un marco sensible. Nada matará el diseño de tu sitio web de alta definición más rápido que un montón de botones pixelados.
Truco divertido No tienes que reinventar la rueda para encontrar algunos elementos ingeniosos SVG o CSS. Echa un vistazo a estos botones SVG de Tympanus o el CSS Button Generator.
Conclusión
La alta definición diferenciará su sitio web de todos los que no lo hacen. Los usuarios comienzan a esperar una experiencia de alta definición en cada una de sus pantallas, desde televisores hasta computadoras y teléfonos. Su sitio web debe cumplir con esas expectativas.
La buena noticia es que puede 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 estás mostrando píxeles y cada imagen es perfecta y de alta calidad.