lapiceros

10 webs de músicos + 10 trucos para mejorar tu página web

Tener una web significa mostrarte al gran público, pero muchas veces no somos conscientes de la imagen que transmitimos. El mundo del diseño web es muy amplio, y abarca desde marketing, conocimiento del color, programación, etc… Desde mi experiencia como programador web, te descubriré mediante este post algunos trucos que harán que tu espacio web comunique de una manera más efectiva tu imagen profesional.

 

Además, al final del artículo ejemplificaré todo esto con algunas páginas web extraídas de los propios usuarios que componen Emusicarte. Si todavía no tienes página web, ya sabes que en Emusicarte puedes tener un espacio donde mostrar tus actividades y que podrás mantener actualizado.

 

Allá vamos 😉

 

Diseño de páginas web para músicosPaint your life, de happykiddo. Licencia

 

1. Mantén una unidad en la web

 

Es posible que alguna vez hayas estado visitando pisos para comprar o alquilar. Imagina que en uno de ellos, al entrar te encuentras con un recibidor que tiene las paredes blancas y lisas; luego entras al salón y la pared es amarilla con estuco; luego vas al baño y está pintado de verde con el suelo de madera; luego la cocina es azul, tiene un rodapié de flores y encima tiene forma triangular; ahora vas a las habitaciones y el techo está formado por casetones, etc… Quizás he exagerado un poco, pero no creo que te sintieras muy cómodo viviendo ahí por mucho tiempo.

 

Una página web es igual: está compuesta por diferentes secciones, por lo que el usuario tiene que percibir una cierta coherencia en su estructura. Evita tener cada página de un color y diseño diferente, y procura colocar los elementos iguales (menús, botones, títulos, etc…) en el mismo sitio.

 

2. Contraste de color

 

Este tema es uno de los más importantes por una sencilla razón: imagínate que entras en una web cuyo texto está en color granate sobre fondo amarillo; o negro sobre fondo azul. Por muuy interesante que te parezca, leerás dos o tres cosas, y después te entrará dolor de cabeza. Ahora imagínate que aparte de esto, eres daltónico (el 8% de las personas que entrarán en tu web son daltónicas). El resultado será que dejarán de leer y cerrarán la página, y tú no quieres eso.

 

Hay que tener especial cuidado con el contraste entre el fondo y el texto. Hay una serie de fondo-texto prohibidos, como puede ser el azul, rojo o verde sobre blanco, amarillo sobre negro, blanco sobre negro, etc… No obstante, hay muchas páginas web de músicos que tienen fondo negro y letras blancas, ya que da una imagen más artística: vale, no pasa nada siempre y cuando no haya demasiado texto. Aún así, la vista se cansa muy rápidamente leyendo esta combinación de colores.

 

Un truco: incluso el negro sobre blanco se termina leyendo mal en una pantalla. Para ello te recomiendo un color de letra que no sea negro puro, sino un gris muy oscuro.

 

En esta página podrás leer más información sobre contraste de colores, y aquí tienes una herramienta para trastear con colores de fondo y texto.

 

3. Comprime imágenes grandes

 

Seguro que no hay nada que te irrite más como usuario que una página tarde 20 horas en cargar. En webs que utilizan muchas imágenes (galerías de fotos), o imágenes grandes, existe el riesgo de que tengas que estar esperando pacientemente a que se termine de mostrar todo.

 

Si muestras una imagen pequeña, pon una imagen pequeña: no pongas la original que seguramente será muy grande y después ajustes su tamaño en la web. Comprime la imagen, redúcela al tamaño que la quieras mostrar, y después súbela a la web. En el caso de galerías de imágenes, es imprescindible el uso de thumbnails enlazadas a su imagen original. Así se evitará un excesivo tiempo de carga, sobre todo en dispositivos móviles.

 

Aquí va un consejo: una foto se verá estupendamente con un tamaño de 900px (píxeles) de ancho/alto (un poco menos que el tamaño de una pantalla estándar), por lo que no tiene sentido subir una foto de 12 megapíxeles que para verla entera necesites 4 pantallas, ya que el navegador la ajustará automáticamente.

 

Hay muchos programas para reducir imágenes, desde Photoshop hasta el sufrido Paint que viene con Windows (o GIMP y MyPaint para los linuxeros 😉 ). Como curiosidad, decir que en la web de Emusicarte, aunque subas una foto de 2800px de ancho, se redimensionará automáticamente a un ancho máximo de 850px.

 

4. Evita la música en reproducción automática

 

Ponte en situación: estás navegando por internet mientras escuchas las gimnopedias de Satie, y de repente entras en una web y te asalta a todo volumen la segunda danza húngara de Brahms. Una de dos, o estiras del cable de los altavoces o cierras la página. Como te podrás imaginar, hacer un click cuesta mucho menos que tirar del cable.

 

Hace unos años era algo relativamente común, aunque bien es cierto que es algo que cada vez menos webs tienen. Normalmente la gente escucha música mientras está en el ordenador, y resulta invasivo para el usuario que suene algo que él no ha puesto.

 

Si quieres mostrar una interpretación específica cuando alguien entre en tu web, puedes poner un vídeo en la página principal, o un reproductor con el botón de “play” muy a la vista. De esta forma, aunque no directamente, le estarás diciendo al usuario “Oye, dale al play y escucha cómo toco!!”.

 

¡La primera impresión del usuario tiene que ser perfecta!

 

5. Usa un buen logo

 

El logo será la imagen de tu marca. Uno cutre dará sensación de cutre; uno muy bueno transmitirá profesionalidad y calidad; uno original te diferenciará. A la larga, merece la pena invertir muy poco en un logo.

 

Esto es como la vida misma: en la gran mayoría de los casos nos formamos imágenes de las personas mediante su aspecto exterior, y si nos agrada entonces estamos dispuestos a conocerlas un poco más. Vale, ésto es algo muy superficial que no debería ser así, pero en el mundo web lo es en el 99% de los casos.

 

6. Usa imágenes para complementar texto

 

El cerebro es principalmente visual. Presta mucha más atención a una foto que a un texto, por lo que llamará mucho más la atención una web con imágenes que otra sin ellas. Además, da sensación de confianza. Las puedes poner en la página principal, intercaladas entre texto, en la página de contacto para mostrar más cercanía, etc…

 

Las imágenes tienen que ser de un mínimo de calidad: nada de fotos pequeñas que se pixelan cuando se amplian. En este caso es mejor pasarse de calidad que no quedarse corto. Está comprobado que en las redes sociales la gente comparte mucho más las publicaciones que van acompañadas de una foto. Ya sabes lo que dicen, una imagen vale más que mil palabras 😉

 

7. Pon tu contacto de redes sociales

 

Una web, todo hay que decirlo, es muy fría. Es un escaparate de tu trabajo. Las personas necesitamos “humanizar” las páginas, sentir más cercanía con el músico o agrupación. Por lo tanto, incluye en todas tus secciones una parte dedicada a enlaces sociales: tu Facebook, Twitter, Linkedin, etc… Haz que te conozcan y que interactúen contigo, que vean que hay una persona activa detrás de la web con la que pueden intercambiar opiniones y hablar. Si tienes un Blog, inclúyelo también.

 

8. Dale al usuario la información que necesita con el mínimo número de clicks

 

Hay una regla no escrita en el mundo de la accesibilidad web que dice que cualquier contenido que muestres al usuario debe estar como máximo a 3 clicks de distancia. Esto quiere decir que si para llegar a un contenido de tu web, tienes que pasar por 4 páginas, deberías buscar otra forma de reorganizar el contenido.

 

Hoy en día con el poco tiempo que tenemos todos, escaneamos las webs y queremos conseguir la información sin tener que estar buscándola. Por lo tanto, si tienes mucho contenido que mostrar, será necesario una muy detallada planificación y estructuración del sitio.

 

9. Actualízala

 

Éste es uno de los puntos que más cuesta cumplir. Realmente da mucha pereza ponerse a actualizar una web, pero una vez que te pones sólo se tarda unos minutos, y el esfuerzo definitivamente merece la pena. Una web vive de su contenido, y un usuario que entra y ve que tu página no se ha actualizado desde hace 2 o 3 años, pensará que ya no estás activo. Hoy en día las webs son más fáciles que nunca de actualizar, por lo que ya no tienes excusa para no hacerlo 😉

 

Por cierto, no mires la mia porque le tengo que dar un buen repaso… En casa del herrero… 🙂

 

10. Menos es más

 

Cada página web es un mundo, y cada vez que una persona entra a la tuya, tiene que adecuarse a su diseño y estructura. A veces, una web con mucho contenido puede ser confusa para el usuario. Si tienes mucho material para poner, intenta centrarte en el más importante y resáltalo en la página principal. Dale al usuario la posibilidad de que sepa en un golpe de vista lo que tú quieres mostrarle.

 

10 diseños de páginas web de músicos y agrupaciones

 

Por último, te muestro 10 páginas web de músicos, agrupaciones e instituciones registrados en Emusicarte, y que son interesantes para ejemplificar algunos aspectos que hemos visto.

 

  • Sencillez y dinamismo. La web del trombonista Miguel Galdón es un ejemplo perfecto de lo que comentaba sobre redes sociales. Aparte de ofrecer todo el contenido de una forma clara, incluye un Blog en el que habla sobre cómo las nuevas tecnologías están cambiando el mundo de la música. http://miguelgaldon.wordpress.com/
  • Extensa y bien organizada. Seguimos con otro trombonista, Javier Colomer, en cuya web hay multitud de información: desde todas sus actividades hasta una tienda online donde expone sus libros sobre trombón contrabajo, ofrece clases, etc… Tener una web personal es la mejor forma de dar a conocer tu actividad al gran público. http://www.javicolomer.com/
  • Sencilla y muy uniforme. La web de la violinista Clara Badía es un ejemplo de lo que comentaba de la sencillez y coherencia. Está compuesta casi en su totalidad por el blanco y el negro, resaltando especialmente bien la galería a color. http://clarabadiacampos.wix.com/clarabadiaviolin
  • Diseño cuidado y coherencia. En la web del flautista Pedro López se opta por dar coherencia a través del color rojo de las letras mayúsculas. Puede parecer un detalle sin importancia, pero es este tipo de cosas las que hacen que un usuario se sienta bien navegando por una página. Además, su biografía sobre fondo negro se lee perfectamente. ¿Por qué? Porque la letra no es completamente blanca, sino gris, suavizando el contraste a los ojos del visitante. http://www.pedrolopezcampos.com/
  • Página muy visual. La web del barítono Eliseu Mera contiene multitud de imágenes que combina perfectamente entre las diferentes secciones. Además es simple y bien organizada, dando relevancia también a la agrupación a la que pertenece, Herbens Consort (muy buena web también, por cierto). http://eliseumera.com/es/
  • Elegancia. Aunque todavía no pertenece a Emusicarte (lo conocí a través de Twitter, @manuelbonino), me ha parecido interesante incluir la web del compositor Manuel Bonino. Es una web de fondo negro, pero cuyo texto está sobre fondo blanco, por lo que conserva la elegancia de una web de colores oscuros, y la facilidad de lectura de una web de colores claras. http://www.manuelbonino.com/
  • Actualizada y con un buen logo. La web de la orquesta Opus 23 contiene todo tipo de información sobre sus componentes, actividades que realizan y notas de prensa perfectamente organizadas. Además poseen un logo especialmente diseñado para la web, muy original por cierto. http://opus23musica.com/
  • Fotos explicativas. Aquí un ejemplo de cómo intercalar fotografías entre el texto para hacer una lectura más amena. La web del taller de claves Rafael Marijuan muestra con multitud de fotos el proceso de construcción de sus claves. Un detalle que permite conocer su forma de trabajo, y acercarse mucho más al visitante. http://www.clavesmarijuan.com/
  • Fuerte imagen de marca. Me ha llamado especialmente la atención la página del trío “Este cuento me suena” en el que muestran la información más importante de una forma muy clara, y además transmiten al usuario de una manera muy directa su forma de hacer música. http://cuentomusical.blogspot.com.es/
  • Coherencia y fácil lectura. La web del grupo de piano-clarinete García Esteban / Fundación García-Esteban contiene varios aspectos que he comentado: logo propio, coherencia en el diseño, uso de dos colores principales y contraste del texto. Como ves, no es completamente negro, lo que facilita su lectura. Cada pequeño detalle es importante si queremos causar una buena impresión general al usuario. http://www.duogarciaesteban.com/cas/biografia.php

 

No he podido resumir más todas estas cuestiones que quería abordar, ya que el análisis de cada punto y de cada página web daría para 20 diferentes posts, por lo que si tienes cualquier pregunta, duda o sugerencia, déjala en los comentarios. ¡Gracias! 😉

Ismael Palacio

Compositor nacido en Zaragoza y residente en Lund, donde estudio un máster en composición con Luca Francesconi. Programador web y cofundador de Emusicarte.

Deja una respuesta

*

1 comment

  1. Manuel Zaragoza

    Hola Ismael, muchas gracias por esta aportación. Realmente me ha parecido muy interesante e instructora tus indicaciones para mejorar la conversión de tu página web. Por si sirve de ayuda, os dejo un link donde tienen muchos ejemplos de diseños web para músicos https://pymesworld.com/diseno-web-musicos-musica-grupos-deejays/. Hay para todo tipo de profesionales de la música, desde deejays, hasta grupos de rock, conciertos, soul, etc. Espero que os sirva. Saludos!

Next Article¿Por qué te subes a un escenario?