Hace unos meses, el equipo de Mosaic nos encargó el rediseño de la revista: tenía que ser un cambio de imagen, un cambio en su estructura y ritmo de publicación, y, por supuesto, responsive. Pero por encima de todo, se trataba de combinar una nueva Mosaic con un legado de 13 años de artículos y recursos sobre tecnología y multimedia, manteniendo WordPress como gestor de contenidos. Era complejo, pero nos encantaba la idea de diseñar una nueva experiencia alrededor de la lectura de una revista online.

En el planteamiento anterior, la web se estructuraba en las secciones de Entrevistas, Artículos, Experiencias y Recursos, y el ritmo de publicación era de unos 4 artículos nuevos (una edición de la revista) cada mes. Tras el rediseño, la clasificación principal sería por áreas temáticas (Diseño, Interacción, Tecnologías, Medios, Redes) y la publicación cambiaría a una media de un artículo a la semana (lo cual otorgaría más flexibilidad y una renovación más frecuente de contenidos), pero manteniendo la clasificación en “números de revista” porque formaban parte del alma y de la historia de Mosaic.

En Mosaic, como en cualquier otra revista online, el artículo es la pieza fundamental y por ello fue el punto de partida del rediseño. Los artículos en Mosaic suelen ser relativamente extensos, y nuestro objetivo principal era proporcionar una buena experiencia de lectura, fuera cual fuera el dispositivo o circunstancias desde las que se accediera.

Y así fue como empezamos.

Sketching

Tras haber analizado el contenido y las necesidades del rediseño, comenzamos con la arquitectura de la información de dos páginas fundamentales: la página de artículo y la home. Aunque faltaba aún mucho por redefinir en el árbol de contenidos de la web, estas dos plantillas nos darían las claves de lo que iba a ser la experiencia principal (la lectura del artículo) y cómo Mosaic se presentaba ante sus lectores (la home).

El formato que elegimos para hacer un primer acercamiento a la estructura de estas páginas fue el de bocetos en cartulina, dibujados a lápiz. Nuestra intención era invitar a la participación e iniciar una discusión; el formato papel era perfecto en este sentido (transmite que algo no está acabado, y que se puede cambiar), y resultó muy cómodo para presentar en grupo. En cuanto la estructura quedó lo suficientemente definida, comenzamos a construir un prototipo en HTML. La discusión sobre la estructura continuaría tras pasar las ideas a un formato web, por lo que nuestra intención era no invertir demasiado tiempo en esta fase de bocetado.

Los bocetos con los que estuvimos trabajando fueron la estructura de un artículo y de la home en pantalla pequeña (una columna de cuerpo de texto), que nos daba el punto de partida y una jerarquía clara de los contenidos, y en pantalla grande (equivalente a escritorio), que nos ayudaba a definir la estructura y retícula cuando disponíamos de más espacio para ello. Aunque en la concepción de un diseño responsive hay que tener en cuenta la organización de los contenidos en todos los puntos intermedios, esta primera acotación (pantalla más pequeña y pantalla más grande) sería suficiente hasta la realización del prototipo en HTML.

Navegación y estructura del site

La organización en categorías de los artículos de Mosaic representaba un interesante reto: existía una organización histórica (Artículos, Experiencias, Entrevistas, Recursos), pero que ya no respondía bien a las necesidades del usuario. Se propuso una nueva organización por categorías (y subcategorías), que permitiría al lector buscar artículos por áreas temáticas; y una organización por etiquetas, que no necesariamente coincidirían con las categorías.

La navegación se dividió en un menú principal de categorías (Diseño, Interacción, Tecnologías, Medios, Redes) cuyas subcategorías se mostraban solo en la parte inferior de la página, a modo de “fat footer”, y un menú más general, en el que se mostraba el Archivo (todos los números de Mosaic), información sobre el equipo organizador (Acerca de) y las titulaciones ofertadas (Formación), así como la sección de Noticias, que servía para mostrar novedades y otro tipo de información que no formara parte de los artículos.

Para no perder del todo la clasificación de Artículos, Entrevistas, Experiencias, Cursos (por motivos de archivo e historia de la revista), se diseñó una sección destacada en la home, sobre el “fat footer”, en el que se podía ver el número de revista actual y navegar por esta clasificación.

Tipografía y retícula

Partiendo de la experiencia de lectura como punto fundamental del rediseño de Mosaic, el trabajo principal iba a estar en la tipografía y la retícula. Decidimos centrarnos en el catálogo de Google Fonts, y tras algunas pruebas de legibilidad con la aplicación Typecast, elegimos Oswald (una sans-serif condensed, que permitiría mostrar títulos que podían llegar a ser bastante largos en un espacio aceptable) y Lora (una fuente con remates pensada para el cuerpo de texto).

Los dos layouts más relevantes de la web eran la home y la página de artículo. En la home nos decidimos por una estructura de cuatro artículos destacados, en la cual, a partir de un cierto tamaño de pantalla, el primero (el de más reciente publicación) ocupaba todo el ancho de columna, dejando los otros tres en una segunda fila. Para la página de artículo optamos por mostrar el contenido principal a una columna en todos los tamaños de pantalla, pues esta era la mejor disposición para poder tener una lectura cómoda del artículo. A partir de determinados tamaños de pantalla, en los cuales contábamos con más espacio para la composición, dispusimos algunos elementos del artículo (títulos, imágenes) “rompiendo” la retícula, para crear un ritmo de lectura más interesante.

La arquitectura de la información y el diseño visual conformaron una parte importante del rediseño de Mosaic; la otra parte fundamental fue el diseñar la web de manera que pudiera accederse desde diferentes dispositivos y circunstancias. Pero de esto y de la estructura responsive hablaremos en el siguiente artículo.

Cita recomendada: USOBIAGA, Javier; ARMADA, Marta y BASSOLS, Andreu. Rediseño responsive de Mosaic (parte I): Concepción. Mosaic [en línea], mayo 2014, no. 118. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n118.1419.