Inspiración para tener un sitio web de 5 estrellas

[insert_php]the_date();[/insert_php]

“El error más tonto es ver el diseño como algo que puedes hacer al final de un proceso, para amarrar un desastre, cuando en realidad es algo que debes entender desde el primer día, como parte de un todo.”

Tom Peterson.

Sabemos que el diseño es tan amplio como subjetivo, usualmente las personas tienen gustos diferentes marcados por una cantidad infinita de variables, sin embargo hay algunas tendencias que pueden ser nuestras guías a la hora de diseñar, y darles la importancia que merecen es el primer paso para obtener mejores resultados como empresa, más aún si ésta hace parte de una industria tan competitiva como la del entretenimiento.

Hay distintos aspectos en los que se involucra el diseño y que permiten agregar valor a tu empresa de entretenimiento: diseño de la identidad corporativa, sitio web, medios impresos, contenido para redes sociales, entre otros. Aunque todos son muy importantes, el diseño de sitios web, en el que vamos a profundizar en esta nota, tiene un especial protagonismo ya que suele ser la principal puerta de entrada para tus clientes potenciales en una era donde la digitalización marca la pauta, de ahí la importancia de un buen diseño que sea tan atractivo como funcional y que se convierta en tu mejor arma para potenciar lo que tienes para ofrecer al mundo.

Para algunas personas; y me incluyo, la mejor forma de aprender es con el ejemplo, por eso a continuación veremos algunos casos de éxito para ejemplificar lo que funciona muy bien en cuanto a diseño web, enfocándonos en compañías dentro de la industria del entretenimiento en campos como televisión, diarios y revistas, danza, entre otros.

Este primer diseño fue el ganador en la categoría de Best Home Page (Mejor página de inicio) en los 20th Annual Webby Awards de este año, este reconocimiento descrito por The New York Times como “El más alto honor de internet” es presentado por la Academia Internacional de Artes y Ciencias Digitales (IADAS); un grupo de más de 1000 expertos en distintas disciplinas que destacan lo mejor de internet dentro de seis grandes categorías, siendo una de ellas los sitios web. Este sitio fue diseñado para el Ballet Milwaukee , una de las más importantes compañías y academias de ballet de Estados Unidos.

Lo que funciona muy bien en este sitio es bastante claro: el uso de videos, la sensación de movimiento incluso cuando no se está haciendo uso de videos y las constantes animaciones que transforman las imágenes en blanco y negro a color, hacen que este sitio parezca arte, como el mismo ballet.

Un truco muy sencillo pero valioso que podemos aprender de este diseño, es el poder de hacer una correcta selección de fuentes que sean coherentes con lo que buscas comunicar y fáciles de leer. El caso de Milwaukee, evidencia como jugando con las fuentes puedes hacer ver tu sitio con un toque clásico sin parecer aburrido.

Ahora, si entre todos los campos del entretenimiento te encuentras en uno donde una gran cantidad de contenido es necesario; especialmente si es contenido escrito, estos casos podrían resultante interesantes: el primero de ellos es el de National Geographic , con su sitio dedicado a los osos que habitan en el Parque Nacional Yellowstone.

De su sitio destacamos el uso de una paleta de colores que aunque sobria no es aburrida y aún más importante, cómo con un buen diseño se puede entregar gran cantidad de contenido, de manera que no sea tediosa para el usuario a la hora de leer. Quienes diseñaron este sitio convirtieron la experiencia de leerla en una “aventura”, combinando textos relevantes, vídeos, animaciones y fotografía para obtener este resultado.

Nuestro segundo caso de un sitio web con gran cantidad de contenido es The Undefeat, un sitio web de deportes que logra llevar el contenido a sus clientes de manera amigable haciendo uso de bloques de información, distinciones mediante el uso de un color llamativo como el amarillo y diferentes fuentes para sus títulos, subtítulos y contenido.

Supongamos que ya tienes definida una paletas de colores como parte de tu identidad y está compuesta por muchos colores vivos, el diseño del Museo Nacional de Historia y Cultura Afroamericana es un buen ejemplo de cómo usar colores fuertes manteniendo un equilibrio con espacios “vacíos” para evitar que el sitio se vea recargado, lo que es importante si no queremos aburrir a nuestros usuarios.

Nuestro próximo caso demuestra porque la fotografía no falla. Éste es el diseño del sitio de Lonely Planet y es un claro ejemplo del uso impecable de la fotografía.

Ésta, mundialmente conocida guía de viajes, da protagonismo a sus increíbles imágenes manteniendo el resto del diseño de su sitio muy limpio, usando una paleta de colores neutra y una fácil navegación para que acceder a la información que necesitas no se convierta en una tragedia. Si algo podemos aprender de este caso es que aunque hagas uso de muchas fotografías, éstas no tienen que ser utilizadas en la totalidad del sitio, puedes apoyarte en iconos que mantengan la línea con el resto de tu diseño.

Si ya estás convencido de que el uso de fotografías es coherente con el servicio o producto que ofreces y quieres que tu diseño vaya por esta línea, es bueno que recuerdes hacer uso sólo de imágenes de muy buena calidad y hacer tu sitio responsive; lo que permitirá que sin importar desde qué dispositivo ingreses, tu página se adaptará para verse perfecta.

Ahora bien, cuando una imagen no es suficiente y quieres conectar con tus clientes tanto como sea posible, el uso de grandes franjas con videos de muy buena calidad llevará tu sitio a otro nivel, esto justamente es lo que hace Google Brand Studio.

Videos en escenarios sorprendentes combinados con un sonido envolvente convierten la experiencia de visitar este sitio web en algo increíble, ¿te imaginas lograr un resultado similar en tu propio sitio web?, aquí sin duda nuestra mejor sugerencia es apoyarte en expertos como Spicy Minds para que te entreguemos propuestas que exalten tu propuesta de valor.

Por otro lado, para quienes ofrecen productos o servicios diferentes y buscan propuestas menos usuales, este sitio diseñado para el Budweiser Made in America Festival un festival de música realizado en Estados Unidos por la famosa marca de cervezas Budweiser, nos presenta un sitio donde se elimina el menú de la parte superior; que es lo más usual y en cambio se convierte en una serie de iconos en la parte lateral izquierda, al pasar el cursor sobre cada icono puedes saber qué representa lo que facilita la navegación por el sitio.

Si tu sitio web tiene una gran cantidad de contenido como videos o fotografías de alta calidad, es usual que tarde un poco más a la hora de cargar y como cuando hablamos de diseño la experiencia lo es todo, la manera en que esperas a que cargue tu sitio no debería descuidarse y debería ser tan pensada y diseñada como el resto del mismo. Dentro de nuestra exploración estas fueron nuestras 3 esperas favoritas:

• El sitio web de Residente, el conocido artista puertorriqueño fue diseñada para que no llegues a notar cuándo dejaste de esperar.

• Retomamos este sitio de National Geographic porque con una animación muy sencilla pero altamente coherente con su contenido, hacen tu espera agradable.

• El sitio web de La huella de las mujeres en la historia de la organización ONU Mujeres mantiene tu expectativa hasta el último segundo, cuando entras descubres que la animación no es más que una extension del mismo sitio web.

Finalmente te dejo estas recomendaciones generales:

En cuanto a las fuentes trata en lo posible de no tener más de 3 tipos distintos, y frente a su uso se trata de equilibro, ya que tener una sola fuente puede hacerlo aburrido y muchos cambios entorpecen la lectura más aún cuando se encuentran en bloques grandes de texto. Definir una tipografía principal que pueda ser usada en encabezados o títulos y otra diferente para los cuerpos de texto

Los principios que se quieren compartir deben encontrarse claramente definidos para que de esta manera tanto la tipografía, como la paleta de colores e incluso los recursos como animaciones, videos e imágenes respondan a estos principios.