CAPITULO 11: Diseño para Internet y Medios Digitales

En la actualidad, nos encontramos en plena era de la globalización, siendo testigos de una revolución tecnológica y social que se ha integrado gradualmente en nuestras vidas. Esto ha llevado a una transformación significativa en la profesión del diseño, ya que a los canales de comunicación visual tradicionales se ha sumado uno nuevo: Internet. El rol del diseñador ya no se limita a crear y aplicar una identidad visual en los medios gráficos convencionales; ahora, debe ser capaz de adaptarla a una amplia variedad de plataformas digitales. Tanto los diseñadores como la disciplina del diseño gráfico seguirán evolucionando, ajustándose de manera fluida a las futuras formas de comunicación visual

DISEÑO MULTI-FORMATO

En la actualidad, la presencia en línea, ya sea a través de un sitio web o las redes sociales, se ha vuelto esencial tanto para empresas como para individuos. Se ha vuelto cada vez más cierto el adagio de "si no estás en Internet, no existes". Los fabricantes de software de diseño gráfico han reconocido esta necesidad y han incursionado en el ámbito digital, integrando herramientas de optimización de imágenes web en todas sus aplicaciones. Tanto los programas de diseño vectorial (como Adobe Illustrator y CorelDRAW) como los programas de edición de imágenes (como Adobe Photoshop y Corel PaintShopPro) incorporan diálogos específicos para exportar gráficos a la web. La World Wide Web también ha experimentado cambios significativos en los últimos años. La navegación en Internet ya no se limita a ordenadores y navegadores web; cada vez es más común el uso de dispositivos móviles, como smartphones y tablets. Las redes sociales captan gran parte de la atención mediática y, si esta tendencia continúa, es posible que pronto se utilicen más las redes sociales y los dispositivos móviles que los ordenadores para acceder al contenido digital. Esto implica un cambio de mentalidad para los diseñadores gráficos tradicionales, que han estado acostumbrados a pensar en términos de "papel", ya que ahora se trata de crear en "múltiples formatos", adaptando un diseño a varios tipos de soportes. Aunque hasta ahora, la mayoría de los encargos estaban destinados a medios impresos, la situación está cambiando rápidamente. No sería sorprendente que en los próximos cinco años, la proporción de encargos de proyectos gráficos para medios digitales supere a la de medios impresos. Afortunadamente, el diseño gráfico seguirá siendo esencial, ya sea para medios impresos o digitales, independientemente del medio en el que se presente."

FORMATOS GRÁFICOS PARA LA WEB

Para compartir gráficos en línea, se emplean una variedad de formatos estándar. Un diseñador gráfico competente debe estar familiarizado con estos formatos y dominar la técnica de optimización de imágenes para la web. Esto implica exportar imágenes de manera adecuada a los formatos comunes en la actualidad, como GIF, JPEG y PNG.

EL FORMATO GIF: El formato de archivo gif (graphic interchange format o formato de intercambio gráfico) se diseñó como un estándar gráfico independiente de la plataforma y es compatible con todos los navegadores de internet, incluso los más antiguos. el formato gif admite hasta 8 bits de color (256 colores) y ofrece una compresión sin pérdida, lo que significa que, al convertir a .gif, se almacena toda la información del archivo junto con la imagen. estas características hacen que sea ideal para exportar imágenes simples con colores planos, como logotipos, gráficos o iconos de señalización. además, el formato gif ofrece opciones avanzadas, como la capacidad de tener un color de fondo transparente, lo que resulta muy útil para eliminar fondos blancos en gráficos o logotipos de un solo color. la variante gif89a es perfecta para crear pequeñas animaciones, ya que permite guardar varios fotogramas en un único archivo gif, que al visualizarse se reproduce como una animación.

EL FORMATO JPEG: El formato de archivo JPEG (Joint Photographic Experts Group) fue desarrollado como un sistema de compresión específico para gráficos. JPEG es capaz de representar hasta 32 bits de color (equivalente a 16,7 millones de colores) y se destaca por ser una excelente elección para fotografías e imágenes con una amplia gama de tonalidades. Los archivos JPEG emplean compresión con pérdida, eliminando información redundante que no afecta significativamente la percepción visual. Esto permite obtener imágenes de alta calidad con un alto grado de compresión. Se puede ajustar la calidad de visualización en un rango que abarca desde reproducciones de alta calidad hasta aquellas de calidad inferior. A medida que se aumenta la calidad de la imagen, también aumenta el tamaño del archivo y, como resultado, el tiempo de carga. Por lo tanto, es esencial mantener un equilibrio entre la calidad de la imagen generada y el tamaño del archivo resultante. Para optimizar archivos JPEG, se utilizan varios niveles de compresión, que van de 0 a 100. Cuanto mayor sea la compresión, menor será el tamaño del archivo, pero la calidad de la imagen se verá afectada negativamente. Es importante destacar que la mayoría de las cámaras digitales utilizan este formato para almacenar fotografías en formato .jpg, lo que ha impulsado el uso y la distribución de este tipo de archivos. Una característica común en ambos formatos de archivo es la carga progresiva o entrelazada. Al activar la opción de GIF entrelazado, los archivos se cargan en múltiples pasos, lo que permite a los usuarios obtener una vista previa de la imagen en calidad progresiva, desde menor a mayor calidad. Del mismo modo, los archivos JPEG también pueden cargarse en varias etapas de resolución creciente utilizando la opción llamada JPEG progresivo.

EL FORMATO PNG: A pesar de que GIF y JPEG son ampliamente utilizados en Internet, existe un tercer formato de archivo específicamente diseñado para funcionar eficazmente en la World Wide Web, conocido como PNG (Portable Network Graphics). Podría considerarse que el formato *.png representa una alternativa mejorada al formato *.gif.

El formato PNG ofrece varias opciones, incluyendo imágenes de color verdadero (PNG-24), escalas de grises y paletas de 8 bits (PNG-8). Además, PNG permite el uso de canales alfa para especificar niveles de transparencia, a diferencia del GIF, que solo permite especificar si un color es transparente o no. En PNG, se pueden definir hasta 255 grados de transparencia, lo que lo convierte en la elección ideal para exportar gráficos con fondos difuminados, como botones web con efectos de sombreado. Sin embargo, es importante tener en cuenta que, actualmente, el formato PNG solo es compatible con navegadores de última generación. Por lo tanto, en situaciones en las que su uso no sea ampliamente compatible, es aconsejable considerar otras opciones.

¿Qué formato elegir?

Cuando existan dudas sobre el formato de exportación web a utilizar, la mejor práctica es previsualizar la misma imagen en los diferentes formatos disponibles (GIF, JPEG y PNG). Luego, al comparar las previsualizaciones, seleccionar la calidad de imagen que ofrezca la mejor relación entre calidad visual y tamaño de archivo.

RESOLUCIÓN Y TAMAÑO ADECUADO PARA LA WEB

El formato PNG ofrece diversas opciones, que incluyen imágenes en color verdadero (PNG-24), escalas de grises y paletas de 8 bits (PNG-8). Además, PNG permite el uso de canales alfa para definir niveles de transparencia, a diferencia de GIF, que solo permite especificar si un color es transparente o no. PNG permite la especificación de hasta 255 grados de transparencia, lo que lo convierte en una elección ideal para exportar gráficos con fondos difuminados, como botones web con efectos de sombreado. No obstante, es relevante tener en cuenta que, en la actualidad, el formato PNG solo es compatible con navegadores más recientes. Por lo tanto, si la compatibilidad es un factor crucial, es recomendable considerar otras opciones. Entonces, ¿cómo decidir qué formato utilizar? En situaciones donde surjan dudas respecto al formato de exportación web, lo mejor es previsualizar la misma imagen en los diferentes formatos disponibles (GIF, JPEG y PNG). Luego, al comparar las previsualizaciones, se puede elegir la calidad de imagen que ofrezca la mejor combinación entre calidad visual y tamaño de archivo.

EL BANNER PUBLICITARIO: Como mencionábamos anteriormente en este capítulo, estamos presenciando cambios significativos en el diseño gráfico y la publicidad, especialmente en lo que respecta a los medios publicitarios. La llegada de Internet como un escaparate virtual disponible las 24 horas del día, los 7 días de la semana, ha captado la atención de agencias de publicidad y medios. Al igual que las revistas o periódicos impresos, un medio de difusión tan relevante como la web necesitaba su propio formato publicitario. Fue en 1994 cuando los responsables de la revista electrónica Hotwired acuñaron el término "banner-ad" para describir el anuncio publicitario en formato rectangular (468x60 píxeles) que publicaron en su sitio web de AT&T. Desde ese primer banner, la publicidad en línea ha experimentado una evolución notable, permitiendo la inclusión de animaciones, vídeos, sonidos y efectos interactivos en los banners.

 

DISEÑO DEL BARNNER:

Anteriormente, cuando un diseñador gráfico recibía un encargo relacionado con publicidad, este solía consistir en la creación de anuncios destinados a ser publicados en prensa o revistas. Sin embargo, en la actualidad, los diseñadores reciben encargos que involucran el diseño de banners y otras formas de "e-diseño", como invitaciones electrónicas, e-flyers e incluso e-posters. Los medios de comunicación tradicionales han evolucionado hacia el ámbito digital, lo que implica que el enfoque para diseñar un banner es prácticamente el mismo que el de un anuncio impreso. Las diferencias notables radican en los tamaños y la posible interactividad con el usuario. En Internet, los sitios web y comunidades que permiten la publicidad establecen formatos específicos diseñados para adaptarse a la estructura de sus plataformas. Estos formatos se basan en las dimensiones estándar definidas por organizaciones como el Interactive Advertising Bureau (IAB) (www.iab.net). A continuación, se describen cuatro tipos de formatos publicitarios ampliamente utilizados en la web:

Banner: Este es el formato publicitario estándar con dimensiones de 468x60 píxeles, empleado por la mayoría de las páginas web que admiten publicidad.

Megabanner o Leaderboard: Debido al aumento en la resolución de los monitores, el tamaño de los banners estándar ha crecido, y el megabanner se adapta a estas nuevas dimensiones de diseño con 728x90 píxeles.

Rascacielos o Skyscraper: Este es un formato de banner vertical con dimensiones de 120x600 píxeles y se coloca generalmente en el lado derecho de la página.

Robapáginas o Half page ad: Con dimensiones de 300x250 píxeles, este formato se ha vuelto muy popular ya que se integra de manera efectiva en el diseño de grandes portales o sitios web de noticias.

 

El formato gráfico del banner.

En cuanto a los formatos de imagen utilizados para crear banners, se emplean los mismos formatos mencionados previamente, en particular GIF y JPEG. Si el banner es una animación, entonces se utilizará el formato GIF89a.

 

DISEÑO PARA REDES SOCIALES

Como mencionamos en capítulos previos de este libro, el diseño de identidad visual es una de las tareas más cruciales para los diseñadores gráficos en la actualidad. La gestión y mantenimiento de la identidad visual de una persona o empresa debe extenderse al ámbito digital en Internet. Una empresa puede optar por contratar el diseño de su sitio web corporativo o utilizar banners publicitarios para mejorar su presencia en línea y fortalecer su imagen de marca. No obstante, no debe pasar por alto la importancia de mantener una identidad coherente en las comunidades y redes sociales a las que pertenece. Por lo tanto, cada detalle en la personalización de los perfiles de identidad digital es esencial.

ELEMENTOS DE IDENTIDAD GRÁFICA DIGITAL: Cuando mencionamos las aplicaciones básicas del diseño de identidad corporativa en el capítulo 8, nos referíamos a elementos como la papelería de empresa, que incluye papel con membrete y tarjetas de visita, entre otros. En el entorno digital, especialmente en redes sociales, elementos similares de identidad se encuentran en la firma de correo electrónico, que puede incorporar el logotipo de la empresa, y en la personalización de perfiles en redes sociales y comunidades profesionales. El creciente protagonismo de las redes sociales ha llevado a una mayor demanda de profesionales del diseño capaces de crear y optimizar gráficos para su uso en perfiles empresariales en plataformas de redes sociales. Además, ha surgido la figura del community manager, encargado de gestionar los detalles que pueden afectar positiva o negativamente la imagen e identidad de la empresa en Internet." Si necesitas más modificaciones o algún otro tipo de ajuste, no dudes en decírmelo. Estoy aquí para ayudarte.

 

Kit de gráficos para social media.

Comenzamos este libro explorando la comunicación visual, y ahora lo concluimos centrándonos en la comunicación visual a través de medios digitales. Todo lo que has aprendido hasta ahora te será de gran utilidad para crear los elementos que compondrán tu presencia visual en línea. De ahora en adelante, cuando un cliente te solicite un presupuesto para desarrollar su identidad corporativa, no olvides agregar un componente extra al cuestionario: '¿Necesita material gráfico para sus redes sociales?'. Aunque existen muchas comunidades y plataformas de redes sociales, la mayoría de ellas comparten formatos de gráficos estándar para personalizar los perfiles de usuario. A continuación, te presentamos los elementos básicos que podrían formar parte de un conjunto de gráficos para redes sociales:

1.     Imagen de perfil (Avatar): Estas imágenes suelen ser cuadradas y varían en tamaño según la plataforma. Por ejemplo, son de 80x80 píxeles en la mayoría de foros y Gravatar, 100x100 píxeles en comunidades profesionales como LinkedIn, 130x130 píxeles en Twitter, 160x160 píxeles en Facebook y 250x250 píxeles en Google+. Todos comparten un formato cuadrado, así que al diseñar un avatar, asegúrate de utilizar una proporción cuadrada que se pueda ajustar fácilmente.

2.     Portada o Cabecera del Perfil: Los perfiles de usuario se han vuelto más sofisticados con el tiempo. Algunas plataformas permiten incluir una imagen destacada como portada o cabecera del perfil. Por ejemplo, en Facebook, esta imagen es rectangular y tiene dimensiones de 850x315 píxeles, mientras que en Google+ también es rectangular, con 940x180 píxeles. Las dimensiones de estas imágenes son generalmente rectangulares.

3.     Fondo del Perfil: Algunos perfiles permiten personalizar el fondo, como en Twitter, donde puedes usar una imagen de fondo de hasta 865 píxeles de ancho. Sin embargo, ten en cuenta que, aunque el ancho total es de 865 píxeles, es recomendable mantener cualquier logotipo dentro de un área que no supere los 250 píxeles de ancho para evitar que los elementos de la interfaz de Twitter cubran el diseño del logotipo.

Comentarios