Ayer en la noche iba a liberar este post, pero por falta de tiempo no pude hacerlo. Hoy he llegado tarde al trabajo y al querer publicarlo no tenía acceso a mi servidor. Al entrar al periódico la Jornada veo que han rediseñado justo antes de haber yo liberado mi propuesta y análisis correspondiente.
Las comparaciones son odiosas, pero creo que en este caso es útil. Revisen el rediseño de ellos y el mío y dejen sus opiniones en los comentarios.
Aquí mi nota, tal como fue redactada el día de ayer:
En diciembre pasado, La Jornada lanzo una encuesta para mejorar sus servicios. Entre otras cosas prometían un rediseño, sindicación de contenidos, actualizaciones diarias y un largo etcétera. Este periódico es de los primeros que tuvieron edición online y junto con El Universal, debe ser uno de los más visitados por ser de acceso gratuito.
La imagen de La Jornada en internet desde siempre, ha dejado mucho que desear. En su sitio web no hacen más que vaciar automáticamente gran parte de los contenidos de su edición impresa a un layout muy básico. En fin, con ayuda de Otl nos hemos dado a la tarea de proponer un rediseño. Aquí el proceso.
Primero se identificaron 7 grandes áreas, como se ilustra en la siguiente imagen:
Clic para ampliar
Una cabecera, el pie, dos columnas principales, un espacio central para la nota principal, y dos columnas secundarias.
En el encabezado se incluye el logotipo, la fecha y un menú para algunas secciones que deseen resaltarse. Así como el campo de búsqueda. A la derecha puede ubicarse publicidad que se integre al diseño sin mayores problemas.
La columna principal de la izquierda servirá para ubicar las secciones del diario tal como aparecen actualmente, además de las columnas de opinión.
En la columna de la derecha se ubicara una imagen de la portada y contraportada del diario para poder descargarlas en formato PDF, la sección Rayuela y espacio para banners publicitarios.
El área marcada en rosa esta reservada para la nota principal, la cual en ocasiones presenta una fotografía, el pie de esa misma foto, el título y resumen de la nota. La implementación en CSS no debería suponer algún problema cuando esta nota venga acompañada de una imagen.
Justo debajo de la nota principal podemos observar 2 columnas marcadas en azul. A la izquierda colocaremos las demás noticias de portada, mientras la columna de la derecha se reserva para las notas de la contraportada. De este modo el contenido queda jerarquizado y no se le da más ni menos importancia a las diferentes noticias.
El pie, sobra decir para que sirve, se usara para las políticas del diario y la leyenda de copyright.
En tipografías no nos hemos complicado, se usa la fuente Georgia, Arial y Verdana. Fuentes más o menos universales, legibles y adecuadas para un diario. Los textos que tienen enlace se dejan subrayados, ya que en la versión actual es difícil saber donde puede hacerse clic.
En cuanto a colores, se han usado el azul y el rojo, es decir los mismos que usan actualmente pero en diferentes gamas. Se prescinde del bullet usado por ellos, que no es más que el sol de su logo en miniatura. Al estar tan pequeño se emplasta y pierde legibilidad, así que hemos optado por usar un balazo cuadrado sin mayores complicaciones.
Como se puede apreciar, este ejercicio no es más que una redistribución, tratando de optimizar el espacio y que el usuario pueda identificar de manera más clara los contenidos. El resultado final pueden verlo a continuación haciendo clic para ampliar la imagen.
Clic para ampliar
Con algunas pruebas de usabilidad y heurísticos podríamos sacar más en claro que aspectos y secciones del diario deberíamos resaltar y donde ubicarlos, todo ello combinándolo con algunos de los resultados del Eyetrack III.
La implementación en HTML y CSS no se ha realizado por falta de tiempo como es natural, pero no tiene muchas complicaciones. Si alguien desea realizarla, actualizamos el post sin problemas. Si alguna persona del departamento de diseño e informática llega a leer esta nota, les comento que la propuesta puede usarse siempre y cuando den el crédito correspondiente.
Actualización
______________________________
Agrego una panorámica del diseño anterior, para quienes no estaban familiarizados con el sitio:
Clic para ampliar