He estado ajustando el diseño del blog a un sistema reticular más coherente que el de la plantilla original. Como ahora tengo que lidiar a diario con retículas, estoy aprendiendo a valorarlas y casi casi a utilizarlas :)

Desde un primer momento, el diseño de Khaducsti sigue un esquema fluído de maquetación. El contenido se adapta al ancho de la ventana manteniendo siempre las proporciones (que no las medidas) entre los elementos y sus distancias.

El primer paso a la hora de definir un sistema reticular para un site con dos zonas tan diferenciadas como éste (el contenido y la barra lateral), es valorar la importancia que ambos elementos deben tener en pantalla. En mi caso, teniendo en cuenta que la relación de usuarios nuevos por día es bastante alta (principalmente porque el blog es nuevo y los lectores habituales, que alguno hay, acceden vía RSS), decidí darle a la barra lateral un tercio del espacio total en pantalla. De esta forma, se puede acceder de un vistazo a la información principal del blog, que puede interesar a primeros visitantes, de manera mucho más cómoda. Además, la longitud de línea del contenido quedó reducida de 20 a 15 palabras, facilitando más la lectura (estimado a un ancho de 1024px).

Este primer paso compensó bastante las dos zonas de información principales. Las alineaciones horizontales se limitaban a ajustar el logo con respecto al campo de búsqueda y la sección “About” con el primer titular. Lo siguiente fue recolocar los elementos de la barra lateral.

En un principio, la barra lateral se disponía en una única columna. Los primeros elementos ocupaban sin problemas el ancho reservado, pero al llegar al listado de links, categorías y archivo, dejaban un espacio enorme a su derecha que descompensaba el diseño y alargaba demasiado el contenido. Algo tan sencillo como subdividir la barra en dos columnas (una vez sobrepasado el contenido principal) resolvió el problema de la economía de espacio y añadió un plus de coherencia a la jerarquía de los contenidos de esta sección.

Quizás puedan parecer ajustes poco significativos, a mí hasta hace unos meses también me lo parecerían, pero la verdad es que el resultado es un equilibrio mucho mayor entre los elementos y mucha más facilidad en la experiencia de lectura.

Al fin y al cabo, de eso se trata.

Recursos
Grid systems for web design: Part 1 (y siguientes!).
Si usas Fireworks, deberías echar un ojo a Reticulator, desde Sofá Naranja, y al resumen de su clase en el Programa Vostok.

Voy a dejarle a Luis el libro “Cómo nacen los objetos”, de Bruno Munari. A pesar de estar orientado al mundo del diseño industrial, es toda una referencia para el diseño en general y la interacción en particular.

Me gusta especialmente la parte dedicada al lujo y su relación con la cultura:

El lujo es pues la utiización impropia de materiales costosos sin mejorar sus funciones. Por tanto, es una estupidez.

Naturalmente el lujo está relacionado con la arrogancia y con el dominio sobre los demás. Está relacionado con un falso sentido de autoridad. Antiguamente la autoridad era el brujo que tenía aderezos y objetos que sólo él podía poseer. El rey y los poderosos se vestían con costosísimos tejidos y pieles. Cuanto más sumido en la ignorancia se tenía al pueblo más rodeada de riquezas se mostraba la autoridad. Y todavía hoy se producen en muchas naciones estas manifestaciones de apariencias milagrosas. A la vez, sin embargo, entre la gente sana va ganando terreno el conocimiento de la realidad de las cosas y no su apariencia. El modelo ya no es el lujo y la riqueza, ya no es tanto el tener como el ser (para decirlo con palabras de Erich Fromm). A medida que desciende el analfabetismo la autoridad aparente disminuye y en lugar de la autoridad impuesta se considera la autoridad reconocida. Un cretino sentado en un gran trono tal vez podría sugestionar en tiempos pasados, pero hoy, y sobre todo mañana, se espera que deje para los dirigentes impuestos, los decorados especiales para los mandatorios, los estrados de lujo levantados sobre tarimas de caoba, los oropelas, los graderíos y todo lo que servía para sugestionar.

En fin, quiero decir que el lujo no es un problema de diseño.

Me ha encantado Presdo, una webapp para crear y enviar citas que además no ha pasado por proceso Beta.

La propuesta es sencilla y completamente funcional. Una línea, una cita: sólo necesitas escribir lo que quieres hacer y con quién, sin formularios, sin registros y plenamente integrado con las aplicaciones de calendario más utilizadas.

Las ventajas de registrarse son por otra parte, muy interesantes. Podrás acceder a tu cuenta con todas las invitaciones que hayas realizado recientemente, comunicarte con un chat con las personas invitadas, etc..

La integración es perfecta (al menos con Google Calendar, que es lo que yo utilizo), y el diseño muy cuidado. Además, les escribí con una pequeña sugerencia en cuanto a la usabilidad de la página y no sólo me contestaron en media hora sino que ya está implementada.

¡Así da gusto!

Recursos
El blog de Presdo, donde comentan las novedades más recientes.

Para los que, como yo, usan Gmail como gestor de correo en el que confluyen distintas cuentas de correo, puede ser un poco caótico mantener ordenados todos los mensajes de su bandeja de entrada. El uso de los filtros de correo y las etiquetas puede ser, en estos casos, una herramienta más que útil para tener el correo ordenado e identificar los mensajes de un simple vistazo.

Problema

En mi cuenta de correo recibo mensajes de: mi correo personal (uno o varios) y el correo del trabajo. Además a mi correo personal llegan habitualmente mensajes de una misma fuente (en mi caso mi escuela) y me gustaría identificarlos automáticamente.

Solución

Las etiquetas de Gmail nos permiten clasificar nuestros mensajes fácilmente. No tenemos más que crear una nueva etiqueta (en la barra izquierda “editar etiquetas”) y asignarle un color. De ahora en adelante, cuando marquemos un mensaje con una determinada etiqueta, veremos algo así:

En este caso el correo se ha etiquetado como “IED”.

Sin embargo es una lata etiquetar todos los mensajes según vayan entrando y, a menudo, acabamos olvidando la tarea y nuestro buzón vuelve a ser el desorden padre. Ahí es donde entran los filtros de correo.

Supongamos que tenemos una cuenta de correo del trabajo, queremos por ejemplo que se asigne la etiqueta “trabajo” a todos los mensajes enviados a esa cuenta. Para ello, en la configuración de la cuenta, tenemos la opción “Etiquetar los mensajes entrantes”, como puedes ver en la imagen.

Pero lo interesante llega cuando queremos etiquetar mensajes entrantes específicamente, es decir, no asignar una etiqueta a una cuenta, sino hilar más fino. En mi caso el problema era etiquetar todas las comunicaciones de mi escuela (que llegan a mi correo personal).

Gmail lo pone fácil, podemos crear filtros muy personalizados que asignen etiquetas a todo lo que queramos. Los pasos son sencillos:

• En la ventana filtro creamos un filtro nuevo.
• Asignamos los parámetros de filtrado (en mi caso, quiero filtrar todos los mensajes provenientes de correos “@madrid.ied.es”)
• Pinchamos en “paso siguiente”.
• Y ya sólo tenemos que decirle qué etiqueta queremos asignar.

De esta manera etiquetaremos todos los mensajes entrantes automáticamente para poder identificarlos de un vistazo y tenerlos bien clasificados.

Bonus: Si pinchamos en “aplicar también a las conversaciones siguientes”, aplicaremos la etiqueta a los mensajes que ya están en nuestra bandeja de entrada.

Doble Bonus: Podemos asignar y asociar todas las etiquetas que queramos, de este modo puedes tener una etiqueta de tu trabajo y tantas subetiquetas como quieras para los diferentes clientes. Así tu correo se va clasificando solo y acceder a emails viejos es tan simple como hacer click en la etiqueta correspondiente en la barra lateral.

La gente de Smashing Magazine ha colgado dos interesantísimos artículos sobre principios del diseño web que vale la pena releer, imprimir y pegar bien cerca de la pantalla.

Es habitual tomar por obvias muchas de estas indicaciones, sobre todo cuando se trata de “principios”. Sin embargo, a la hora de ponernos a diseñar, a menudo nos saltamos muchos de estos pasos básicos. Quiero decir que sí, yo también las tomaba por obvias, y sí, habitualmente tienen que recordármelo en el trabajo (suerte que estoy bajo la tutela de dos diseñadores impresionantes).

Recursos
10 Principles Of Effective Web Design
Five More Principles Of Effective Web Design