Analizamos los recursos gráficos y tipográficos del sitio web de SIRUP, un cantante japonés de R&B/Soul.
La interfaz elegida para nuestro análisis está destinada a promocionar un concierto que se realizó en Noviembre de 2022, con motivo de la celebración del 5to aniversario del lanzamiento del primer EP del cantante.
A medida que navegamos a través de la interfaz podemos encontrar toda la información correspondiente al evento, así como imágenes y links que nos llevan a la compra de tickets o de su merchandising oficial, entre otros. Cuenta también con un botón de audio que al cliquearlo nos permite escuchar una canción del cantante mientras recorremos la web. Podríamos decir entonces que la web está destinada a los usuarios que consumen la música de SIRUP (en su mayoría un público joven) y que se encuentren en Japón, ya que es allí donde se realizará el concierto.
Las tipografías utilizadas en esta interfaz son 3:
En primer lugar tenemos Glodok, una fuente display que resulta muy atractiva por las formas y terminaciones de sus signos. Esta tipografía se utiliza principalmente para títulos y para algunos destacados.
Por otro lado, tenemos una segunda tipografía, la Source Han Sans Japanese. Es una tipografía Sans Serif que destaca su uso por su funcionalidad, ya que es una fuente que incluye glifos que son necesarios para el japonés, y como dijimos anteriormente, esta web está dirigida a un público local. Esta tipografía se utiliza en distintas variables para todos los paquetes de texto de la web, y para ciertos títulos o destacados, en donde se varía el idioma según sea necesario.
Por último tenemos la fuente Termina, una Sans Serif moderna, sencilla y de fácil lectura. Cuenta con distintas variables de peso que se utilizan en la interfaz para algunos botones, subtítulos, textos cortos que complementan a los títulos o información adicional.
Decidimos enfocar nuestro análisis en cómo las distintas familias tipográficas funcionan y se complementan con los demás recursos gráficos de la interfaz, como imágenes, texturas y colores, ya que creemos que es ahí donde se encuentra su mayor atractivo.
Para empezar, la interfaz tiene una paleta de colores muy definida. El blanco y el naranja son los colores principales, y se utilizan para todos los textos, botones y recuadros. Tenemos colores secundarios como el rojo, verde, azul, violeta y amarillo, que podemos ver en el fondo del sitio, en un gradiente junto con el blanco y el naranja. Estos colores aparecen también en todas las imágenes, lo que nos hace dar cuenta de que hay una decisión cromática y no son fotografías seleccionadas de manera arbitraria. Podemos ver también que todo el sitio, a excepción de la tipografía, está intervenido con una textura granulada, lo cual ayuda a reforzar la identidad.
Esta intencionalidad en cuanto a lo estético se evidencia bastante en la primera “pantalla” que vemos apenas ingresamos. Nos encontramos con una fotografía del cantante que ocupa gran parte del espacio, junto con otras más pequeñas, donde ya podemos notar que los colores de su ropa responden a la paleta mencionada antes. Además, su pose y el diseño de la camisa, remiten a lo retro, algo que se refuerza con la textura granulada, el logo de “Roll&Bounce” y con la tipografía “Glodok”, cuyo diseño está inspirado en ese estilo. Tenemos un título bastante grande que pasa por detrás de la imagen, y en contraste con esto tenemos en una menor escala pequeños bloques de texto y destacados que nos brindan información. Debajo encontramos también un botón que al clickear nos muestra el video de presentación del Evento.
Todos estos elementos están de cierta forma contenidos por un óvalo blanco que sirve como recuadro, lo que ayuda a que toda esta información se visualice como un todo. La relación que se establece entre los textos y las imágenes generan un buen contraste que ayudan a jerarquizar y ordenar para poder seguir un orden de lectura.
Si bajamos, podemos notar cómo se va organizando el resto de la interfaz. La página se divide en distintas secciones, las cuales identificamos rápidamente ya que casi siempre se sigue una estructura de TITULO – BAJADA – IMAGEN, con sus variantes correspondientes según el contenido de cada una. También vemos el uso de líneas horizontales como misceláneas que ayudan a organizar y separar ítems.
Además, muchos de los elementos se mueven, aparecen/desaparecen, cambian de color, etc. a medida que scrolleamos o cuando pasamos el cursor por encima, lo que hace que la navegación se sienta más fluida.
En este análisis, concluimos que la interfaz elegida hace un buen uso de todos los recursos que elige, y logra captar la atención del usuario a través de ellos. La página tiene dinamismo, y si bien sigue una estructura sencilla no deja de resultar atractiva, ya que la manera en la que se complementan los colores, imágenes, textos y demás elementos permite captar la atención de los usuarios, sin dejar de lado el objetivo del sitio, que en este caso es promocionar el recital de SIRUP, así como también su música y productos relacionados.