Refinando la retÃcula del mundo.es
En el mundo.es puede ser que tengamos una retÃcula, pero no la hemos encontrado. La retÃcula es la base de cualquier diseño. Trabajar sin retÃcula es como trabajar sin reglas. Si no tienes reglas, nunca sabes si te has salido o si sigues dentro.
Tomando como referencia dos elementos "fijos" (ancho de 1024 y el banner lateral) definimos una retÃcula que nos sirva para apoyar el diseño. Diseñamos una retÃcula de 12 columnas para poder tener suficiente flexibilidad.
Ver imagen a tamaño completo
Como se puede ver los elementos de la página de elmundo.es casi se ajustan a la retÃcula. Será fácil por tanto ajustar los espacios para disponer de un orden más claro para el usuario.
La retÃcual es necesaria para que el usuario pueda organizar la información en su mente. Sin una retÃcula el usuario tiene que interpretar cada elemento como un elemento independiente y por tanto requiere de más energÃa. Con una retÃcula el usuario puede rápidamente interpretar la escala de los módulos e interpretar los espacios con fácilidad.
Bye bye cabecera
La cabecera del mundo es muy gruesa, con mucho color, y con poca utilidad. Si es asÃ, ¿por qué mantenerla?
Ver imagen a tamaño completo
La cabecera a todas luces no tiene sentido. Puede tener sentido en páginas interiores porque puede ser que un % de los usuarios accedan a esta página vÃa buscadores, links en blogs, etc… pero para una portada no tiene sentido marcar con tanta contundencia el dominio. Probablemente el 95% de la gente que accede a la portada de ElMundo.es son usuarios que ya buscan está marca.
¿Menú horizontal o vertical? Nos da igual, mientras tenga el fondo blanco
El menú actual, en texto blanco sobre un fondo azul, pasa desapercibido, dificil de leer (todo mayúsculas), etc… Aquà el mundo está perdiendo el tiempo y dinero.
Ver imagen a tamaño completo
Proponemos un menú vertical, sobre fondo blanco (para ser diferentes) y con todas las opciones desplegadas.
Ver imagen a tamaño completo
Articulando la retÃcula
Despues de muchos pasos y variaciones, podrÃamos llegar a un punto parecido a este.
Ver imagen a tamaño completo
Básicamente tenemos un poco más de orden, más información en portada, algo de color para decirnos que es importante y que no, y sobre todo, una mejor presencia de la publicidad.
Texto subrayado, ¿depende?
Los enlaces subrayados no se suelen aplicar a sites en los que se presenta una gran densidad de enlaces como puede ser la portada de un periodico porque se puede suponer que afea el diseño.
Ver imagen a tamaño completo
Yo creo que los enlaces subrayados fijan con más claridad la acción de pinchar y deberÃan aumentar el número de páginas vistas. Como todo esto parte de suposiciones lo mejor serÃa mandar una version con enlaces subrayados a unas ips y sin subrayar a otras y medir los resultados. En un site con tanto tráfico como ElMundo, probablemente unas horas de medición pudieran ser suficientes. En base a los datos de clicks, se podrÃa tomar una decisión objetiva.
Muy poco color
En general, es bueno mantener la paleta en 3 colores, contando el blanco del fondo como uno de los 3 colores. Es decir, lo ideal serÃa mantener la paleta de la web en pocos colores, sobre todo, para que la publicidad destaque y no estemos luchando contra ella.
Ver imagen a tamaño completo
Mantener un entorno predominantemente uniforme, ayudar al usuario a que cuando tengamos un destacado, resalte de verdad.
¿Hemos llegado muy lejos?
La idea no era convertir ElMundo.es en un Flickr o cualquier otra aplicación tipo 2.0. La idea era sencillamente optimizar y refinar la portada del mundo.es que ultimamente era un poco "brutal".
Esta claro que en este tipo de redacciones la velocidad hace que muchas veces el diseño sufra y el aspecto de la web a nivel visual pase a un segundo plano. Se podrÃa argumentar, que un diseño más consistente ayuda a producir más rápido. Por otro lado, si la velocidad de publicación es una constante en todos los medios, se deberÃan buscar otros factores que añadidos a la ecuación, ayuden a un medio a despegarse de otro. Sólo velocidad de publicación no sirve.
Velocidad + inteligencia + refinamiento + consistencia + claridad + … si pueden dar como resultado una ecuación alternativa.
Todas las imágenes empleadas en el rediseño
En esta carpeta tienes acceso a todas las imágenes utilizadas en el proceso de rediseño. Intenté guardar paso a paso el proceso para hacerlo más claro y que de alguna forma se pudiera ver la evolución.
En general el diseño de ElMundo.es está bien, aunque quizás le falta algo de elegancia. Por lo general es muy brutal y en la portada todos los elementos compiten unos con otros. La publicidad con la cabecera, la cabecera con los titulares, los titulares entre ellos… demasiado ruido visual. Una vÃa de evolución podrÃa ser hacia un concepto algo más equilibrado, sosegado y uniforme, en el que el contenido cobre más protagonismo.