Buena parte del diseño web se está trasladando a los dispositivos móviles. Cada vez más gente accede a la red desde teléfonos y tabletas, y los diseñadores deben adaptarse a este cambio.
Una de las exigencias que presenta este fenómeno es la de optimizar las imágenes para dispositivos móviles. Sin dudas, hay que evaluar aspectos como la resolución y la reducción del tamaño del archivo, pero ¿qué hay de la relación de aspecto y el contenido de las imágenes en sí mismas?
Bueno, a veces la mejor inspiración puede venir de un ambiente nada relacionado con el nuestro. En este caso, las portadas de discos, especialmente las diseñadas para reproductores de música portátiles, dispositivos móviles, tiendas online, servicios de música por streaming y más.
En este artículo te diremos de qué manera las portadas de discos pueden ayudarte a optimizar imágenes para dispositivos móviles.

Evita la confusión
La mayor diferencia entre el diseño móvil y el diseño para ordenadores es, obviamente, el tamaño. Esto implica no sólo un menor espacio para las imágenes, sino también que las imágenes pierdan precisión. Los detalles pequeños, la abundancia de elementos y otros recursos similares se verán mejor en imágenes grandes (como una imagen de gran ancho para ser visualizada en una laptop). Pero no se verán bien en una imagen pequeña. Por el contrario, resultarán confusas y poco nítidas.
Que una imagen se pueda ver bien en tamaño pequeño es exactamente lo que hacen los diseñadores de portadas cuando realizan trabajos especialmente para pequeñas pantallas de móviles, tiendas en línea y servicios de música por streaming.

Concéntrate en un solo elemento
Haz imágenes donde sólo se muestre un elemento. Así como en una imagen pequeña no estarás en condiciones de incluir muchos detalles y que sean correctamente apreciados, la abundancia de elementos en una misma imagen irá en contra de la nitidez. Por ejemplo, en vez de utilizar una imagen de una persona pateando un balón frente a una portería, recórtala de manera que sólo se vea el pie en contacto con el balón. La idea queda correctamente expresada sin ahondar en tantos elementos.

Utiliza texturas sutiles (o colores sólidos)
Las texturas sobrecargadas también generan confusión, ya que distraen del elemento principal. Si bien esto puede funcionar en una pantalla grande (donde el elemento principal es fácilmente distinguible), en una pantalla de un móvil no hace más que distraer. La razón es que en una textura sobrecargada hay menos espacio entre cada elemento, de manera que cuando la imagen es pequeña se ve más como una puerta de tela metálica (muchos cuadraditos apretados) que como una pared de azulejos (que es más amigable para la vista y donde cada elemento se distingue con facilidad). En cambio, una textura sutil será más discreta y no distraerá la vista del usuario de un móvil. Por ejemplo, piensa en un fondo con una trama de cuadrados grandes blancos y grises en vez de optar por un fondo de delgadas rayas blancas y negras.
Por supuesto, una elección gráfica aun mejor es el uso de colores sólidos. Una vez más, los elementos con varios matices de un mismo color generan confusión en una pantalla pequeña.

Contraste
Si las texturas se relacionan con el aspecto micro de la imagen, el contraste lo hace con el aspecto macro, con la imagen entera. Allí donde lo micro no debe distraer, lo macro debe ser tan visible como sea posible. Y esto, generalmente, significa dar un mayor contraste a las imágenes. Asegúrate de que el elemento principal sea fácilmente visible y “salga” de la imagen. Por ejemplo, para un objeto gris oscuro es muy difícil destacarse sobre un fondo gris claro. Una vez más, cuando trabajamos sobre una imagen grande podemos discernir el objeto, pero esto no sucede cuando estamos ante una imagen chica en un dispositivo móvil. Trata de utilizar imágenes con colores que tengan un contraste lo más marcado posible.

Piensa en cuadrado
Esto tiene una relación directa con las portadas de discos, que son cuadradas. Haz que tus imágenes sean lo más cuadradas posibles. No habrá problemas si la imagen es ligeramente horizontal o vertical, pero el punto es tratar de llevar a nuestras imágenes a una orientación lo más aproximada posible a la cuadrada.
¿La razón? En los dispositivos móviles, especialmente en teléfonos donde la visualización suele ser vertical, no puedes darte el lujo de suponer que el usuario podrá ver las imágenes en una nítida resolución full widescreen. Si la imagen es demasiado ancha, se verá como una raya horizontal en una pequeña pantalla cuya orientación es vertical. Lo mismo corre para las imágenes verticales: el usuario tendrá que desplazarse hacia abajo para verlas completas.
Diseñando imágenes de una orientación tan cuadrada como sea posible, estarás maximizando su verstilidad.  Piensa que las portadas de discos, al ser cuadradas, se ajustan naturalmente a dispositivos móviles, tiendas online y servicios de música por streaming.

Ver artículo: What web designers can learn from music album artwork

Posts Relacionados

• No related posts