Rediseño HA! (Parte 5 —Artículos)
Traducción al español del quinto post, escrito en tiempo real, sobre el rediseño de la web historia-arte.com. Ver la versión original en gallego
Una pequeña reflexión previa
Siempre pensé que el diseño web fue perdiendo cierta frescura con el tiempo, debido a la aparición de cada vez más herramientas que tienden a estandarizar y modularizar todo con la intención de acelerar el proceso de diseño y desarrollo. Esta tendencia a dividir todo en componentes reutilizables como si fuesen piezas de un puzzle, provoca que las webs sean cada vez más parecidas entre si. Por supuesto hay excepciones (muchísimas), pero basta con ver alguno de esos sitios que recopilan diseños para darse cuenta de que la mayoría de páginas son iguales.
El discurso y la práctica del diseño web está cada vez más influenciado por el discurso tecnológico impuesto por herramientas como CMS (Wordpress, Drupal, etc) o frameworks frontend (Bootstrap, React, Angular, Vue, etc) que promueven este tipo de prácticas. Un mismo componente es utilizado por cientos de webs distintas. Tampoco ayudan mucho los estándares estéticos impuestos (interesadamente) por las grandes compañías como Google, Apple o Microsoft. De repente, Material Design pasó de ser la guía de estilo de Google a ser un estándar para una gran parte de la web.
La excesiva influencia tecnológica creó entornos donde la sinergia entre diseñadores, escritores, fotógrafos, ilustradores y programadores está reducida al mínimo. Una revista o un libro, por ejemplo, acostumbra a tener unas bases de diseño y estructura común en todas sus páginas, pero lo suficientemente flexibles para adaptarse al contenido. Las imágenes no están todas al mismo tamaño, ni el texto se distribuye siempre igual, sino que existe variedad dentro de sus páginas. Hay, por lo tanto, equipos de diseño en las editoriales y en las redacciones de revistas y periódicos preocupados de darles forma a las historias que se cuentan. En el caso de la web es menos común encontrar medios que se preocupan no solo en contar una historia o noticia, sino de darle la forma adecuada. En su lugar tienen una serie de plantillas estándar que llenan con todos los contenidos que producen.
En el interesante artículo Design machines, Travis Gertz aborda este tema y nos da pistas de cómo sobrevivir a esta tendencia de hacer páginas iguales. De hecho la propia web (Louder Than Ten) es un buen ejemplo de diseño adaptado al contenido y no al revés. Aprovecho para recomendarla, si no la conocéis, ya que está llena de contenido de calidad.
Rediseño de artículos
Los artículos de HA! son resultado de estudios e investigaciones sobre diferentes aspectos del mundo del arte. La mayor diferencia con respecto a las fichas de las obras es que no trata sobre una obra específica (con alguna excepción), sino que su temática es mucho más diversa, desde la historia de la Bauhaus hasta una recopilación de películas que tratan sobre artistas pasando por los inicios de Adolf Hitler como pintor.
Actualmente hay 21 artículos y debido al trabajo que hay detrás de cada uno, tienen un ritmo de producción no demasiado grande, saliendo una nueva criatura cada 1–2 meses. Por eso he pensado que sería una buena ocasión para poner en práctica la idea de que cada artículo tuviese un diseño propio. Del mismo modo que para las fichas de las obras creamos un sistema automático que tiene en cuenta el tamaño de las imágenes para seleccionar el layout, en este caso queremos que las soluciones de diseño estén definidas por seres humanos, teniendo en cuenta el contenido y el tema del que trate.
Esto nos obliga a crear 21 diseños distintos para los artículos que ya existen actualmente e ir haciendo nuevos diseños para los nuevos artículos que saldrán en el futuro. Tampoco se trata de crear páginas individuales desconectadas entre sí, sino que tienen que tener elementos en común para dar la sensación de conjunto, de formar parte de un proyecto más grande llamado HA! Por eso se respetan determinados elementos:
- La tipografía sigue siendo la misma (Solitas y Archia), tal como se había definido para toda la web. Y los tamaños y medidas igual
- Existe una estructura de contenidos similar. Cada artículo tiene un título y un subtítulo, un autor y puede estar etiquetado.
- También existen recursos comunes como carruseles para mostrar una serie de imágenes, secciones destacadas con otros fondos, etc.
A nivel tecnológico, el html de los artículos se genera siempre del mismo modo, por lo que la diferencia entre un artículo y otro está simplemente en que usan un archivo CSS distinto (como gran defensor de la separación de responsabilidades, no podría ser de otro modo).
Todos estos artículos me permitieron también poder experimentar determinadas técnicas CSS como css grid, modos de fusión de fondos y elementos, recortes y máscaras, etc. Puedes ver la lista completa de artículos en el subdominio v2, y proporcionar feedback si lo crees oportuno.
Y esto ha sido todo en esta nueva entrega. Como se puede apreciar, es un proceso lento, debido sobre todo a la falta de tiempo, no solo para el diseño sino, sobre todo, a la investigación, reflexión y pruebas necesarias. Pero esto es lo que tiene el Slow design.
Si te gustó y quieres darme un aplauso (virtual), estaré muy agradecido. Seguimos.
