Redeseño HA! (Parte 5 — Artigos)

Oscar Otero
5 min readApr 23, 2018

--

Quinto post, dunha serie escrita en tempo real, sobre o redeseño da web historia-arte.com

Ver versión traducida al español

Unha pequena reflexión previa

Sempre pensei que o deseño web foi perdendo certa frescura co tempo, debido a aparición de cada vez máis ferramentas que tenden a estandarizar e modularizar todo coa intención de acelerar o proceso de deseño e desenvolvemento. Esta tendencia a dividir todo en compoñentes reutilizables como se fosen pezas dun puzzle, provoca que as webs sexan cada vez máis parecidas entre si. Por suposto hai excepcións (moitísimas), pero basta con ver algún deses sitios que recompilan deseños para darse conta de que a maioría de páxinas son iguais.

O discurso e a práctica do deseño web está cada vez máis influenciado polo discurso tecnolóxico imposto por ferramentas como CMS (Wordpress, Drupal, etc) ou frameworks frontend (Bootstrap, React, Angular, Vue, etc) que promoven este tipo de prácticas. Un mesmo compoñente é usado por centos de webs distintas. Tampouco axudan moito os estándares estéticos impostos (interesadamente) polas grandes compañías como Google, Apple ou Microsoft. De repente, Material Design pasou de ser a guía de estilo de Google a ser un estándar para unha gran parte da web.

A excesiva influencia tecnolóxica creou contornos onde a sinerxía entre deseñadores, escritores, fotógrafos, ilustradores e programadores está reducida ao mínimo. Unha revista ou un libro, por exemplo, adoita ter unhas bases de deseño e estrutura común en todas as súas páxinas, pero o suficientemente flexibles para irse adaptando ao contido. As imaxes non están todas ao mesmo tamaño, nin o texto se distribúe sempre igual, senón que existe variedade dentro das súas páxinas. Hai, polo tanto, equipos de deseño nas editoriais e nas redaccións de revistas e xornais preocupados de darlles forma ás historias que se contan. No caso da web é menos común atopar medios que se preocupan non só en contar unha historia ou noticia, senón de darlle a forma axeitada. No seu lugar teñen unha serie de plantillas estándar que empregan para encher con todos os contidos que producen.

No interesante artigo Design machines, Travis Gertz aborda este tema e danos pistas de como sobrevivir a esta tendencia de facer páxinas iguais. De feito a propia web (Louder Than Ten) é un bo exemplo de deseño adaptado ao contido e non ao revés. Aproveito para recomendala, se non a coñecedes, xa que está chea de contido de calidade.

Redeseño de artigos

Os artigos de HA! son resultado de estudos e investigacións sobre diferentes aspectos do mundo da arte. A maior diferencia con respecto ás fichas das obras é que non tratan sobre unha obra específica (con algunha excepción), senón que a súa temática é moito máis diversa, dende a historia da Bauhaus ata unha recompilación de películas que tratan sobre artistas pasando polos inicios de Adolf Hitler como pintor.

Actualmente hai 21 artigos e debido ao traballo que hai detrás de cada un, teñen un ritmo de produción non demasiado grande, saíndo unha nova criatura cada 1–2 meses. Por iso pensei que sería unha boa maneira de poñer en práctica a idea de que cada artigo tivese un deseño propio. Do mesmo xeito que para as fichas das obras creamos un sistema automático que ten en conta o tamaño das imaxes para seleccionar o layout, neste caso queremos que as solucións de deseño estean definidas por seres humanos, tendo en conta o contido e o tema que trate.

Isto obriga a crear 21 deseños distintos para os artigos que xa existen actualmente e ir facendo novos deseños para os novos artigos que van a vir. Tampouco se trata de crear páxinas individuais desconectadas entre si, senón que teñen que ter elementos en común para dar a sensación de conxunto, de formar parte dun proxecto máis grande chamado HA! Por iso se respectan determinados elementos:

  • A tipografía segue sendo a mesma (Solitas e Archia), tal como se definiu para toda a web. E os tamaños e medidas igual
  • Existe unha estrutura de contidos similar. Cada artigo ten un título e subtítulo, un autor e pode estar etiquetado.
  • Tamén existen recursos comúns como carruseis para amosar unha serie de imaxes, seccións destacadas con outros fondos, etc.

A nivel tecnolóxico, o html dos artigos xerase sempre do mesmo xeito, polo que a diferencia entre un artigo e outro está simplemente en que usan un arquivo CSS distinto (como gran defensor da separación de responsabilidades, non podería ser doutro xeito).

O artigo Freud y Schiele orixinal (esquerda). No redeseño (dereita) aproveitei a temática da sexualidade e psicoloxía para xogar coa fusión do texto e da imaxe de fondo, para representar o profundo, o oculto e o prohibido.
Que mellores cores que vermello e negro para un artigo sobre unha exposición nazi? O novo deseño, ademais usa un layout de dúas columnas, mantendo o título sempre visible aínda que se faga scroll.
No deseño antigo, todo o contido estaba nunha única columna e as imaxes unhas debaixo das outras. No novo deseño as imaxes que vaian seguidas agrúpanse automaticamente en carruseis horizontais, o que fai a páxina máis curta e fácil de escanear. Un exemplo son os retratos de Gericault
Hai artigos que son basicamente listaxes de cousas. Aquí vemos dous exemplos redeseñados, un sobre portadas de discos que usan obras de arte e outro sobre cinema biográfico de artistas. O deseño orixinal amosaba todo este contido de corrido nunha única columna.
Outros artigos están compostos dun grande número de imaxes intercaladas con textos. Neste caso a xeración de carruseles e a distribución das imaxes crea, baixo o meu punto de vista, interesantes composicións.

Todos estes artigos permítironme tamén poder experimentar determinadas técnicas CSS como css grid, modos de fusión de fondos e elementos, recortes e enmascaramentos, etc. Podes ver a listaxe completa de artigos no subdominio v2, e proporcionar feedback se o cres oportuno.

E isto foi todo nesta nova entrega. Como se pode apreciar, é un proceso lento, debido sobre todo á falta de tempo, non só para o deseño senón, e sobre todo, á investigación, reflexión e probas necesarias. Pero isto é o que ten o Slow design.

Se che gustou e queres darme un aplauso (virtual), quedarei moi agradecido. Seguimos.

--

--