Descubrir música nueva es más fácil que nunca. Google y Spotify están repletos de géneros inexplorados al alcance de un clic. Existen muchísimas formas de que los artistas den a conocer su música, pero tener un sitio web sigue siendo una de las mejores. Aquí tienes 12 sitios diseñados en Webflow para inspirar un sinfín de direcciones creativas y promocionar tu música.
1. Mejores álbumes de 2017
Quizás recuerdes el sitio web de álbumes favoritos de Drew Roper de nuestra lista de los 10 mejores sitios de Webflow de 2017. Hoog Design también quedó encantado y se inspiró para crear su propio Mejores álbumes de 2017. El amor por la música y el diseño se unen en este top 20 (con menciones honoríficas adicionales).
Este sitio web musical es un diseño de una sola página, en el que se navega mediante bandas de colores dispuestas verticalmente a ambos lados de la pantalla. Es una forma rápida y curiosa de hojear sus álbumes favoritos del año. ¿Quieres crear tu propio sitio para compartir los álbumes que te gustan? Mira cómo lo hizo Hoog Design.
No solo tiene un diseño limpio, sino que Hoog ha integrado unos efectos interactivos muy ingeniosos. Para cada álbum destacado, el tono del fondo cambia al pasar el cursor. También aprovecha las interacciones 2.0 de Webflow. Al hacer clic en los círculos que palpitan a ambos lados de la portada del álbum, aparecen citas reveladoras de cada artista sobre su obra.
Algunas canciones están disponibles a través de Google Play. Hay suficiente contenido sobre cada álbum como para satisfacer incluso al más fanático de la música (incluyéndome a mí).
2. Trenchwerk
Si eres un dúo de producción de hip hop que ha hecho bases para Migos y T.I., ¿realmente necesitas un sitio web? Para el equipo de productores de Atlanta Nard and B, la respuesta es sí. Y se presta tanta atención a los detalles del diseño como a la música que producen.
Un efecto visual genial es la imagen principal del dúo, que se desplaza y distorsiona como si fuera golpeada por el sonido atronador de un bajo de una caja de ritmos 808. Es un gran guiño a su trabajo de producción de graves que hacen temblar las ventanas.
Dicen que “prefieren el estudio al centro de atención”, y este diseño está libre de los adornos ostentosos en los que se deleitan tantos artistas de hip hop. Este diseño se centra totalmente en la autenticidad artística de Nard and B.
¿Tienes un estudio o haces tu propio trabajo de producción? Mira cómo se montó el sitio web de Nard & B en Webflow y crea el tuyo propio.
3. Beyond The Valley 2018
Probablemente hayas visto aparecer esto en tu feed de redes sociales: carteles de Coachella (u otro festival de música paródico) con un montón de nombres inventados.
Cuando llegué por primera vez a esta página del festival de música Beyond The Valley de Niika, pensé que era una sátira. Quiero decir, ¿The Kooks? ¿DJ Tennis? ¿Winston Surfshirt? Seguro que son falsos.
Pero son artistas reales que tocan en un festival de música australiano. Y, por favor, ten piedad de mi ignorancia: la última música nueva que compré fue un álbum de Interpol en 2002.
Este diseño parece un cartel de concierto. Al hacer clic en cada grupo musical del cartel, accedes a una página con más información sobre cada artista y su música. Esto da a los visitantes la oportunidad de conocer a los artistas antes del espectáculo. Todo lo que un asistente a un concierto querría saber está disponible en un diseño sencillo y fácil de navegar.
Si estás organizando algún tipo de festival o evento cultural, puedes sacar mucha inspiración de este diseño. Mira cómo fue hecho en Webflow.
4. Moonlands
Moonlands es una banda indie con sede en Londres. Este diseño tiene el mismo aire soñador y relajado que su música, con azules y verdes oscuros que dominan la estética. De hecho, la banda parece ser muy fan del color azul, con un EP llamado "Paradise Blue" y una canción destacada titulada "Out of the Blue".
Este es un gran ejemplo de cómo usar una paleta de colores que refleja la temática del sitio. La música de Moonland está llena de esa melancolía londinense tan sombría, pero hay destellos de color en la oscuridad, muy parecidos a los elementos visuales de este diseño.
5. Mateus Gageiro
Mateus Gageiro es compositor, diseñador de sonido y productor musical. Ha hecho de todo, desde crear la música animada de fondo para un anuncio de concesionario de coches hasta los sonidos electrónicos futuristas de un anuncio de perfume de lujo.
El sitio de Gageiro ofrece un amplio portafolio de su trabajo con enlaces a las diferentes categorías de proyectos musicales que aparecen bajo su nombre. Su música y su trabajo de producción se presentan junto a los vídeos en los que aparecen. Esto demuestra la alta calidad del trabajo de Gageiro y los clientes con los que colabora.
¿Te gusta este diseño? Mira cómo se creó esta página tan genial y estilizada.
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
6. Orchestral Manoeuvres in the Park
Orchestral Manoeuvres in the Park es una experiencia de una semana en la que los jóvenes crean música nueva con una orquesta. El uso de tipografía manuscrita y animaciones en el sitio —como un globo aerostático flotante y nubes— encaja perfectamente con el público joven al que se dirige. Pero, junto a este toque divertido, encontrarás toda la información que un padre necesita saber antes de inscribir a su hijo. Logra el equilibrio perfecto entre lo divertido y lo serio.
Este es un gran ejemplo de sencillez combinada con la creatividad suficiente para mantener el interés. Para ver cómo se montó, echa un vistazo a su página de presentación en Webflow.
7. Francis Phan
Vale, ¿cómo íbamos a dejar fuera a un diseñador de UX que además resulta ser músico y diseñó su propia página web? Ah, ¿y que también tiene títulos en ingeniería eléctrica e ingeniería biomédica? ¡Francis Phan es un crack!
Su música instrumental es una especie de híbrido entre electro y post-rock, llena de ritmos enérgicos, líneas de sintetizador atmosféricas y piano eléctrico. Es un maestro creando capas de texturas musicales y variando las dinámicas, lo que hace que sus canciones suenen frescas y nunca monótonas; algo que también logra visualmente con el diseño. Hay mucho movimiento en este diseño tan meditado y da la sensación de que cada elemento se ha colocado con precisión.
¿Tienes curiosidad por saber cómo montó Francis esta genial web de música y portafolio? Echa un vistazo a su página en Webflow.
8. emby music
Parece que muchísimos músicos y sellos electrónicos tienen sitios web increíbles. ¿Será la versión digital del proceso de composición —desarrollar una canción a partir de un solo ritmo les da a los músicos un punto de referencia sólido para estructurar una web? ¿O es que aprovechan mejor el tiempo que las bandas de rock porque no tienen que esperar a compañeros de grupo informales que llegan tarde a los ensayos?
Sea lo que sea, los sitios de música electrónica suelen ser fantásticos.
emby music es un sello discográfico con sede en Filadelfia centrado en el house. Colocan su bloque de redes sociales al principio para captar nuevos fans, seguido de un reproductor de audio con los nuevos lanzamientos que los visitantes pueden escuchar.
No hay mucho contenido, pero tampoco lo necesitan: han reunido solo lo esencial en este espacio atrevido y creativo. Además, el uso de un efecto de paralaje rotativo al pasar el ratón llena lo que podría haber sido un espacio estático con formas curiosas y movimiento.
Echa un vistazo a la página de presentación de emby en Webflow.
9. Toast Recording Studio
La grabación digital da como resultado canciones impecables. Al poder controlar cada componente de una pieza de audio, los errores se pueden borrar y, con la magia del autotune, hasta los peores cantantes pueden sonar aceptables. Pero todo ese control da lugar a canciones que pueden carecer de calidez y humanidad.
Toast Recording cuenta con herramientas digitales a su disposición, pero el corazón de su proceso de grabación es la cinta analógica de 2 pulgadas, que produce un sonido más cálido y vivo. (Echa un vistazo a este clip de una banda de ska que grabó allí).
La sección principal destaca un video sobre el productor musical detrás de este estudio, Chris Hamilton. Es un clip muy bien producido donde Chris, mediante una voz en off, explica su filosofía de grabación analógica. Es genial escucharlo explicar esto con sus propias palabras, acompañado de música e imágenes del estudio. Una experiencia mucho más significativa que leer un largo bloque de texto.
Este diseño también complementa la naturaleza analógica del estudio, con diferentes texturas de papel y algunos dibujos tipo garabato usados para el fondo. Son estos pequeños detalles los que personalizan el diseño y evitan que parezca un bloque plano de píxeles. ¿Quieres ver cómo se hizo? Ábrelo en Webflow.
Parece que hay alguna funcionalidad que necesita ser activada aquí, pero es un diseño fantástico para un estudio comprometido con capturar la música de una manera más humana y auténtica.
10. Orquesta Sinfónica de Mississauga
Este diseño para la Orquesta Sinfónica de Mississauga está lleno de imágenes vívidas que capturan a la sinfónica en plena acción. No hay ni una sola mala toma en este diseño cargado de imágenes.
Es un sitio con mucha información que necesita mantenerse organizado y actualizado. El diseñador hace un buen uso del CMS de Webflow para las noticias actuales de la orquesta y el calendario de próximas presentaciones.
Mi única pequeña crítica es que no hay videos de la orquesta fácilmente accesibles. Actualizan su página de Facebook con imágenes de conciertos, pero el bloque de redes sociales está muy abajo, al final de la página. Sería genial ver este contenido destacado y fácil de encontrar. Pero su enfoque es difundir información sobre los próximos conciertos y facilitar la compra de entradas, algo que hacen de manera efectiva.
¿Quieres ver cómo se construyó? Echa un vistazo en Webflow para ver cómo el CMS y otros elementos se unieron en este diseño rico en contenido.
11. Jane Bordeaux
Este es un diseño de una sola página para la banda israelí de folk/country Jane Bordeaux. Lo primero que ves es un clip de reproducción automática de un video animado, con un botón de reproducción prominente. Es un elemento visual genial y fue un movimiento inteligente usar esta imagen existente en la página de inicio.
Se incluye una gran cantidad de material multimedia maravilloso sobre la banda. Hay muchas imágenes, videos musicales y otra información que realmente da a los visitantes una buena idea de la banda y su música.
Una característica ingeniosa es cómo usan el CMS de Webflow para poner a disposición las progresiones de acordes de algunas de sus canciones. Es un toque agradable que acerca a la audiencia y pone la música de la banda al alcance de quienes quieran aprender a tocarla.
Abre el sitio en Webflow para aprender más sobre cómo funciona.
12. RSU Summer Ball
RSU Summer Ball es un festival de música organizado por la Unión de Estudiantes de Roehampton de la Universidad de Roehampton en Londres. Y hay mucho sucediendo en este festival: DJs, artistas, comida e incluso una banda de mariachis, todos formando parte del evento.
Este es un diseño de una sola página, con la navegación anclada en la parte inferior. Hay perfiles y clips de canciones de todos los artistas principales que tocan en el festival. Los visitantes pueden encontrar todo lo que necesitan saber junto con una clara llamada a la acción —"Comprar entradas"— fijada en la parte inferior derecha de la pantalla.
Para ser un festival de música universitario, este diseño compite con muchos eventos más grandes y establecidos.
Dirígete a su página de presentación y descubre cómo se ensambló esta página.
Haz que tu música llegue a todas partes
¿Te pones a crear bases de hip hop en tu portátil durante la comida? ¿O quizás tienes el disco duro lleno de grabaciones tuyas cantando con una guitarra acústica?
Sea lo que sea lo que te mole, internet ha hecho que sea pan comido compartir tu música. Y tener una web es una forma genial de que la gente te escuche. ¿No sabes por dónde empezar? Échale un ojo a esta plantilla para webs de grupos de Webflow para orientarte.
