Una propuesta de diseño para Menéame…

A fines del año pasado, un diseñador llamado Jeroen van Meerendonk propuso un rediseño de Menéame muy interesante:

Rediseño de Menéame de Jeroen van Meerendonk.

Rediseño de Menéame de Jeroen van Meerendonk.

Os recomiendo que visitéis su blog para leer cuales fueron sus decisiones de diseño, que estaban bien razonadas.

No es la primera vez (ni la última) que se propone un rediseño para Menéame.

El sitio ha pasado ya por varios cambios en su diseño desde su nacimiento en 2005: uno en el año 2006, otro en 2008 (del que participé con maquetación y código) y recientemente con varios cambios que se han implementado progresivamente hasta llegar a la versión actual.

Desde luego, mucho han cambiado las cosas en Menéame desde aquella versión que salió en 2005:

Menéame en el año 2005

Menéame en el año 2005

¿Por qué plantear un rediseño?

Hay una cosa que es importante dejar en claro: el diseño actual de Menéame no es malo. A base de iteraciones, se ha llegado a un diseño que cumple la función para la que fue pensado perfectamente.

El mayor inconveniente que se le puede achacar al sitio es que el diseño no fue pensado inicialmente para móviles, sino que se ha ido adaptando de la mejor manera posible para que pudiese visualizarse en estos dispositivos, y es en ellos donde sufre sus mayores carencias.

La web ha cambiado enormemente, sobre todo en los últimos años. El principal factor, como se puede adivinar, que ha convulsionado el diseño web es la aparición y adopción de forma masiva de los smartphones y su utilización generalizada para la visualización de páginas web.

Inicialmente Menéame tenía dos versiones del sitio, una móvil, realizada antes de la aparición de los smartphones y con funcionalidad limitada (desde ella no se puede enviar noticias, por ejemplo), y una para escritorio. Este sistema dual funciona bien desde el punto de vista del usuario, ya que cada versión es específica para cada dispositivo, pero es muy complicado de mantener, al tener que ir actualizando dos versiones del código distintas. Esto ha hecho que la versión móvil languideciera con respecto a la versión de escritorio.

Es por ello que la tendencia en los últimos años es hacia lo que se llama “responsive design” (diseño receptivo o adaptable). A través de esta forma de diseño y maquetación, el sitio se adapta al dispositivo para presentar la información de la mejor manera posible.

Pero además de ello, y dada la importancia cada vez mayor que tienen los smartphones en el mundo de la web, se ha comenzado a contemplar en diseño web la idea de realizar primero el diseño para dispositivos móviles y luego ir adaptando los elementos para los ordenadores con pantallas mayores, como tablets y PCs de escritorio, lo que se suele llamar diseño “mobile first” (el móvil primero).

Es por ello que decidí hacer un ejercicio de diseño para un sitio complejo como puede ser Menéame, comenzando por la visualización para móviles y utilizando todos los recursos que se utilizan en diseño web actualmente. Y aquí os lo presento para que podáis verlo y dar vuestra opinión.

(Entiéndase esta maqueta como una interpretación libre realizada por un diseñador –lo que yo haría en el hipotético caso de poder rediseñar el sitio– y no como una critica enfocada a forzar ningún tipo de cambio en el sitio actual.)

Consideraciones generales

El primer aspecto que he tenido en cuenta es el ritmo general del flujo de texto (el “color” de la tipografía). Uno de los problemas que encuentro en Menéame es que, a mi gusto, la información se encuentra demasiado junta, dificultando la lectura. El título se encuentra demasiado cerca del texto, y el autor y la fuente, inmediatamente por debajo, se confunden con la entradilla.

Sitio actual de Menéame (septiembre del 2013).

Sitio actual de Menéame (septiembre del 2013).

Bloque de noticias

Para comenzar, he cambiado la tipografía por la Open Sans, una humanista de fácil legibilidad, que cuenta con un juego completo y está liberada con licencia Apache 2.0; dando un poco más de espacio al título, utilizando un cuerpo mayor y separando el autor de la entradilla.
He prescindido de la fuente (URL), ya que agrega ruido visual y no aporta demasiada información (más que para servir de enlace a la noticia original). Este enlace se ha pasado al bloque de herramientas/meneo (ver más adelante).

Bloque de noticias

Bloque de noticias

Las etiquetas se han pasado arriba, para agregar contexto al grupo, y también he prescindido del número de conteo de karma, ya que no cumple ninguna función informativa relevante para la noticia.

Bloque de noticias rediseñado

Bloque de noticias rediseñado

Los comentarios, click-throughs (proporción de clics, o las veces que se ha visitado la fuente original), botón de favoritas y el combo de “problemas” se han trasladado al bloque de herramientas/meneos de la izquierda en forma de botones.

Cabecera

En la cabecera he realizado algunos cambios para mejorar la funcionalidad y legibilidad.
Los margenes se ajustan al ancho del texto, en lugar de llegar hasta el borde de la ventana, lo que da una imagen de conjunto más sólida (en la versión actual la cabecera se pierde un poco en pantallas panorámicas, al situarse fuera del foco de visión.)

Cabecera de Menéame

Cabecera de Menéame

He vuelto a unir el isotipo y logotipo en un solo Imagotipo para crear una identidad más fuerte, ya que ambos elementos se encontraban un poco disgregados al tener el logotipo en un área (barra negra) y el isotipo (la elefanta Eli) en otra (barra gris), agregando la edición correspondiente por debajo del logotipo, creando un bloque. (La elefanta que he utilizado es un redibujo que realice hace 5 meses atrás y publiqué en Twitter).

Por debajo de esto he colocado los enlaces a las otras ediciones (me he permitido inventarme algunas ediciones más), que reemplazan a los que se encontraban en la parte superior (barra negra) y a las categorías que se encuentran inmediatamente por encima de las noticias (área blanca), ahorrando espacio.

E inmediatamente por debajo de las ediciones, los conocidos enlaces a las secciones del sitio (Portada, Pendientes, Populares…), resaltando, tal como hiciera Jeroen en su rediseño, el enlace para enviar una noticia en forma de botón, propuesta que me pareció muy interesante y he reutilizado para mi diseño.

Rediseño de la cabecera

Rediseño de la cabecera

El buscador, que actualmente se encuentra en la barra gris, se ha colapsado y representado por un icono, y se abriría al pinchar sobre el botón a la derecha (de manera similar a como se realiza en Google Chrome o el Spotlight de Mac OS X).
El avatar de usuario se colocaría en el sitio ocupado en la propuesta por el icono de login (identificarse), sin utilizar el nombre de usuario. Al hacer clic sobre el avatar se accedería al menú de usuario, donde estarían los datos correspondientes y el enlace para cerrar sesión. De esta forma se ahorra espacio para la versión móvil, aunque en pantallas grandes sería posible agregar el nick de usuario o poner el campo de búsqueda directamente en la barra, para facilitar su uso.

El resultado es una cabecera mucho más compacta, pero que no pierde ninguna funcionalidad.

Nueva cabecera

Nueva cabecera

Esta nueva disposición, resaltando el naranja en la barra superior y agregando la edición, permitiría, cambiando la paleta de colores, identificar a las distintas ediciones.

Cabecera de la edición Ciencia y Tecnología

Cabecera de la edición Ciencia y Tecnología

Noticia destacada

También he modificado un poco la noticia destacada:

Noticia destacada

Noticia destacada

Actualmente se ve un poco deslucida. Le he dado un color de fondo y una posición mucho más destacada, resaltando su función.

Rediseño de la noticia destacada.

Rediseño de la noticia destacada.

El aspecto general para la versión de escritorio es el siguiente:

Propuesta de rediseño

Propuesta de rediseño

Por hacer: No se ha rediseñado la barra lateral, ni he encarado el diseño de la sección interior de una noticia (con sus comentarios anidados). Quizás en el futuro, si dispongo de tiempo para ello.

Móviles

Esta propuesta de rediseño se inició, como se comentaba, por la versión para móviles.
La principal diferencia con la versión de escritorio es que el bloque de herramientas/menear pasa a la parte inferior de la noticia, ya que el espacio horizontal en los móviles (al sostenerlos en modo retrato) es escaso, por lo que hay que optar por soluciones que aprovechen más el alto de la pantalla en lugar del ancho.

En la cabecera se ha ocultado la barra de ediciones (que se revela haciendo click sobre el icono del menú a la izquierda del isotipo) y se ha limitado la cantidad de elementos de la barra de secciones para mostrar solo el ítem activo (en este caso la portada). Los demás elementos se pueden acceder al desplegar el menú correspondiente, haciendo click sobre la sección activa.

Esto crea una cabecera mucho más simple y funcional, que da paso a la información mucho antes, incluso a pesar de contar con un tipo de letra mucho mayor al actual.

La diferencia se puede apreciar bien si hacemos una comparativa entre la versión actual y el rediseño:

Comparativa de las versiones móviles

Comparativa de las versiones móviles

Conclusión

Aplicando criterios modernos de diseño web, partiendo de la versión móvil como plantilla inicial y utilizando diseño responsive, se logra una versión del sitio mucho más sencilla de leer, mejor organizada y más atractiva. Las mejoras en la versión móvil son apreciables, así como la mayor legibilidad de los textos y títulos de las noticias.

Espero que este ejercicio de diseño pueda servir como referencia para futuras versiones del sitio.

(La maqueta estática se puede acceder en el siguiente enlace: http://damianvila.com/meneame/).