Todo lo que necesitas saber sobre diseño HD

Todo comenzó con las pantallas retina y de alta resolución. El acceso a conexiones más rápidas no hizo más acelerar todo este fenómeno, proporcionando un mayor acceso a sitios web HD desde cualquier dispositivo. ¿Te interesaría diseñar en alta definición? Aquí hablamos sobre ciertas cosas que debes considerar antes de ponerte a ello...

Imágenes

Seguramente, lo primero que se te viene a la cabeza al hablar de HD, como diseñador que eres, han sido las imágenes. Los días de guardar cada imagen a 600 px de ancho y a 72 pp han terminado. En las pantallas de hoy en día, eso se verá un poco pobretón.

El estándar base para el HD es de 200 pp. Eso es más del doble de lo que se solía utilizar anteriormente. Añádele el hecho de que las pantallas de hoy en día son cada vez más grandes. Por ejemplo, las ventas de monitores de 1920x1080 están creciendo a un ritmo trepidante. Según W3Schools.com, las pantallas más comunes son las de 1024x768 o mayor, y un 30 por ciento de los usuarios de la web trabajan ya con un monitor HD.

Lo mismo ocurre con las pantallas pequeñas. Dispositivos tan populares como el iPhone 6 (401 pp) y el Samsung Galaxy S5 (577 pp) también cuentan con soporte HD.

Así que, a la hora de trabajar con imágenes, no debes dormirte en los laureles, u obtendrás imágenes borrosas o pixeladas. Seguir trabajando en la antigua “resolución estándar” hará que tu diseño se vea un poco cutre en los nuevos monitores, mientras que las imágenes en alta definición parecerán mucho más pulidas. La gran desventaja de utilizar este tipo de imágenes, es el rendimiento. Mayor calidad de imagen, equivale a tiempos de carga más lentos. Trata de comprimir y optimizar dichas imágenes lo máximo posible, y no satures tu servidor.

Vídeo

El vídeo ha sido una tendencia a tener en cuenta en este 2016. Parece que todas las web de este año cuentan con algún vídeo autoreproducido en sus portadas. Al igual que pasa con las imágenes, los vídeos también deben ser HD.

Para la mayoría de diseñadores y sitios web, esto se traduce en reproducir un clip corto de vídeo en bucle para prevenir que se ralentice la velocidad de la web. Otros optan por vídeos más largos y entretienen a los usuarios en su espera para que se reproduzca con una animación de carga (spinner y demás). Un vídeo en alta calidad requiere que esté grabado en alta calidad, y sobre todo, que esté bien comprimido.

Una cosa que no se suele tener en cuenta es la planificación del vídeo antes de insertarlo en la web. Debemos saber antes de grabarlo, en qué zona de la web de va a reproducir, cuánto queremos que dure el vídeo... Por ejemplo, un vídeo que se va a reproducir a pantalla completa en el fondo de nuestra web, debe grabarse en horizontal para que encaje en la pantalla. U otro caso, si queremos dar la sensación de pantalla ancha, lo suyo es mostrar el vídeo a 16:9, mientras si queremos un vídeo más cuadrado, lo mejor es mostrarlo a 4:3. De todas maneras, si no has planificado tu vídeo muy bien, no hace falta que te eches las manos a la cabeza. Hoy en día, los editores de vídeo pueden llegar a realizar auténticas maravillas.

Ilustraciones y fondos

El HD también es importante cuando hablamos de ilustraciones y fondos. Recuerda que cada detalle (o la falta de estos) es muy visible a la hora de navegar en HD, por lo que lo suyo es asegurarnos de que cada parte del diseño contribuye a la estética general de la web.

Como hemos dicho antes, a la hora de trabajar con ilustraciones y fondos, los detalles son importantes. Debemos centrarnos en elaborar un diseño prácticamente perfecto en píxeles, que se ajuste a nuestro proyecto y que no se desmorone cuando se amplíe o se reduzca. La forma más sencilla de hacer esto es siendo simples.

Aunque te curres la ilustración o el fondo de tu vida el cual te ha llevado mucho tiempo elaborarlo, seguramente una opción más simple quedará mucho mejor. Si deseas que sea más interesante, puedes agregar algún elemento animado, o prueba otras paletas de color más atractivas para captar la atención del usuario.

Si nos metemos a lo técnico, lo mejor es utilizar un formato de imagen escalable para que todo se muestre como deseamos y en HD.

Iconos y elementos

A la hora de trabajar con elementos de la interfaz del proyecto y con iconos, hay seis letras que debes conocer: SVG y CSS. Y todos estos elementos probablemente se clasificarán como uno de estos dos tipos.

Los SVG, o gráficos vectoriales escalables, son esencialmente vectores para la web. Puedes utilizar el formato SVG para guardar formas, iconos y demás elementos de la interfaz del usuario. Los elementos CSS son código puro que pueden ser escalables y los cuales se pueden personalizar mediante código.

Utilizar el HD en tu web diferenciará muy mucho tu proyecto, de los sitios web antiguos. Los usuarios esperan ya el HD en cada una de esus pantallas, monitores y televisores. Tu sitio web debe satisfacer dichas espectativas.

Lo bueno es que con unos pequeños cambios puedes hacer que tu sitio luzca en HD. Presta atención a tus imágenes, vídeos y demás elementos para asegurarte que todo está perfecto y que lo que muestra es y está en alta calidad.

Fuente: designshack.net