Páginas

14/6/10

Antes y después

Tras el período de exámenes de este año, sentía la necesidad de hacer algo creativo para variar un poco y refrescar la mente, así que dediqué un par de tardes a renovar el diseño de mi homepage.

El nuevo diseño, a la derecha

El viejo diseño era una copia bastante descarada de la filosofía de la Zarfhome de Andrew Plotkin, hasta el punto de copiar el estilo del texto de bienvenida. Por supuesto, no he podido evitar con el tiempo añadir algunos toques de color e iconos, pero hasta esta última versión, la web siempre había sido poco más que texto simple con algunos encabezados en color rojo.

No tenía sentido mantener una página tan austera que rara vez se actualizaba. Al menos Plotkin tiene automatismos y contenido suficiente para justificar la simplicidad de su web. Había llegado la hora de hacer un diseño en condiciones.

Para este rediseño, quise conservar el esquema de color en rojo y blanco, solo que ahora verás que hay mucho más rojo. En cuanto al diseño gráfico, opté por utilizar una mezcla de fotografía y estética píxel. Esta decisión no es que fuera planeada con antelación, sino que surgió a raíz de experimentar con los programas de la Aviary Suite.

Aviary Suite es una colección de programas online que conocía desde hace tiempo, pero no me puse a utilizar en serio hasta esta semana pasada. En principio soy partidario de que las webs se utilicen para presentar información, no para desplegar programas, pero reconozco la utilidad de tener software y documentos en "la nube" para poder acceder a ellos desde cualquier ordenador conectado a Internet. Estos programas dependen de flash, así que aunque en teoría son multiplataforma, por defecto funcionarán mejor en máquinas Windows.

Concretamente los programas relevantes a mis intereses son el editor de color y el editor de efectos. El editor de color, llamado Toucan es el que usé para conseguir el esquema de color de la página, era lo único que tenía claro desde el principio. Es un software que ofrece muchas opciones útiles para descubrir esquemas de color, cosa que me entusiasma (estoy convencido de que los esquemas de color son para mí lo que las tipografías son para Steve Jobs). Toucan permite buscar colores complementarios, opuestos, variar multitud de parámetros, coger esquemas a partir de una imagen e incluso ver el resultado para gente con diferentes problemas de deficiencia del color.



Una vez creados los esquemas, se pueden guardar, como todos los documentos de la Suite, en tu cuenta personal, quedando accesibles desde cualquier ordenador.

El otro programa, y para mí el más interesante de todos, es el editor de efectos. Este programa ofrece un sistema para procesar y generar imágenes conectando diferentes componentes entre sí, lo cual permite hacer procesados muy elaborados. Además, este estilo de flujo de trabajo significa que puedes reutilizar fácilmente efectos inventados por ti o por alguno de los usuarios que los comparten con diferentes imágenes de forma no destructiva.


Esta pantalla muestra los componentes usados para crear el fondo de la página a partir de la fotografía base

Describir el uso de este editor y sus componentes no es sencillo, pero la propia página de Aviary tiene un vídeo explicativo muy útil para empezar. Recomiendo a todo el mundo que esté interesado en gráficos y diseño que le eche una ojeada.

La suite tiene otros muchos programas, incluido un programa de retoque (aunque de momento me quedo con Photoshop, gracias) y hasta programas para hacer música y mezclas de audio que todavía no he probado. Están todos en beta, así que yo recomiendo ejecutarlos en chrome o en un navegador alternativo al que normalmente tengáis abierto, en caso de que se cuelguen.

Una de las cosas más útiles de la Suite es que todas las creaciones tienen compatibilidad cruzada entre los programas, de modo que puedes, como se ve en el ejemplo de arriba, importar esquemas de color en el editor de efectos, o abrir imágenes procesadas en el programa de retoque. Eso sí, para guardar los archivos es imprescindible registrar una cuenta (gratuita), aunque los programas en sí pueden usarse sin necesidad de cuenta, sólo permiten exportar el resultado final.

Otro programa que descubrí hace poco y que me resultó tremendamente útil para la web es una extensión para Firefox llamada Firebug. Ofrece funciones para depurar javascript y cosas así, pero yo la utilicé exclusivamente para visualizar con claridad las "cajas" que componen la maquetación de una página en CSS, lo que me permitió ajustar márgenes de texto y, sobre todo, revisar la maquetación de las páginas de reviews. Desde que uso un monitor panorámico me irritan considerablemente las páginas que ocupan todo el espacio de la ventana, forzándote a recorrer mucha distancia con la vista para poder leer el texto. Esto causa fatiga rápidamente y mis páginas de reviews tenían ese problema. Ahora lo he corregido, junto con otros detalles de márgenes, y debería ser cómodamente legible incluso en monitores anchos.

Y así queda la cosa. La web está como hasta ahora, en esta dirección. La web antigua aún está alojada y se puede consultar aquí, pero no prometo que permanezca ahí indefinidamente.

En cuanto este blog, tengo pensado en los próximos días hacer varios posts que no sean autobombo como este. No tengo pensado remodelarlo, aunque ciertamente le haría falta (debería buscar la manera de hacer el logo clickeable).

3 comentarios:

  1. Hmmm, cuando voy a tu página se ven un fondo rojo plano, sin la imagen de la chica. WTF?

    ResponderEliminar
  2. Maid Marian3:03 a. m.

    ¿Cómo te da tiempo a estar en tantos sitios?

    Saliste raro en la foto de Facebook.

    ResponderEliminar
  3. No lleva tiempo, realmente. En Flickr no tengo nada subido, en Youtube poca cosa de momento (sólo lo uso para almacenar favoritos y playlists). Last.fm es un sitio automatizado. Lo único que actualizo realmente es el Facebook y esporádicamente el Tumblr.

    Es cierto lo de la foto, pero todas las demás eran peores!

    ResponderEliminar