Se divisa una nueva era en el diseño web. Hemos pasado de las decadas de los 90, donde ni siqueira se podían estilar las páginas con CSS, los gifs animados, las marquesinas y las imágenes retocadas por paint a barrocos diseños basados en sitios de comunidades propulsadas por un pesado motor PHP bajo un maquillaje hecho en Photoshop. Tras unos años en los cuales hacer una página web se regía por dominar o no el uso de tablas, llegó la era de su propia y tajante prohibición, para que los elementos flotantes, div, span y demás maquetación en cascada de estilos sustituyese el código basura generado por interminables ristras de tags como font, u, i, b, &nbsp…

Dentro de esta época donde xHTML y CSS forman una irrompible alianza se diferenció una batería de sitios donde se promocionaba la interacción absoluta con el usuario y el dinamismo de carga de elementos de forma selectiva gracias a AJAX, o como se diría a la vieja usanza, la propiedad XMLHttpRequest de Javascript. Aunque sería sensato proponer que nos encontramos en esta moda, algunos nos atrevemos (dígnese usted de mirar nuevos diseños como los de Minid.net o Rodrigo Galindez) a afirmar que el diseño web está de vuelta buscando aquello que solo tenía en sus mismísimos comienzos: la simplicidad y el minimalismo absoluto.

Tirando líneas generales, un sitio creado o renovado recientemente será escaso en número de imágenes, hará un trabajo intenso de tipografías (muy probablemente usando unos tamaños por encima de la media de las mismas), valorando como oro en paño el peso de cada palabra y resaltando la prioridad de los elementos que se muestran por su soledad en la pantalla y la abundancia de whitespace que los rodean.

Mis dos céntimos

Tienen ante sus ojos el nuevo y estudiado diseño de mi weblog personal. Aunque nunca llueve a gusto de todos, intentaré justificar las decisiones que he tomado durante la maquetación del mismo para intentar convencer a los escépticos.

Ready? Como he visualizado el layout

Cuando se empieza a diseñar un sitio web, se empieza a diseñar en papel de manera top-down: primero nos imaginamos aquellos bloques más grandes y donde será la posición de cada uno. A medida que vamos diseñando esta rejilla podemos ir añadiendo detalles dentro de cada elemento e ir apuntando en un aparte una paleta de colores y la tipografía deseada para cada elemento. Asimismo, en una fase temprana del diseño primordia la colocación de los elementos flotantes sobre la tipografía, y esta primordia sobre los colores. Asimismo la creación e instauración de imágenes en el diseño es lo menos primordial y se dejará para última instancia.

Uno de los puntos más importantes a la hora de realizar cualquier tipo de diseño es comprender el objetivo del sitio y el público al cual va a ser presentado. Este es un sitio técnico y de diseño, donde lo que importa es más la información que la manera de la cual se presenta. Es por este motivo por el cual se han seguido pautas absolutamente minimalistas y se ha hecho un uso intensivo de espacio blanco a los laterales del texto.

Vayamos entonces por partes:

1. La cabecera: Es el único elemento que tiene la propiedad background distinta a las demás. Cuando entramos en un sitio, nuestros ojos escanean los elementos que hay en el de forma vertical hasta localizar la sección que buscamos. Una vez que nuestros ojos concretizan la zona donde es posible encontrar la información que buscamos, empieza el escaneo horizontal. Si se encuentra la información en el primer intento, estamos ante un sitio usable. Por eso mismo, un cambio gradual de color entre cabecera y cuerpo ayuda al escaneo visual a diferenciar ambas zonas sin ni siquiera mirar para ellas. De esta foma, aquí resaltamos dónde nos encontramos, sin importar el contenido. El visitante novel ignorará completamente esta parte. Asimismo es la única parte donde se introduce asimetría en el diseño, haciendo un acolchamiento lateral de un 30% del espacio presentado en vez de un 40% como en el resto del sitio. Aquí también se encuentra la única imágen permanente del sitio por motivos tipográficos.
2. El contenido: Una vez que sabemos donde estamos, lo más importante es encontrar de que se habla en ese sito. Sin más intermediarios como barras de menú -o peor todavía- anuncios, adsense o derivados, se encuentra el post más recientemente públicado. Y aparece solo por el siguiente motivo. Existen dos tipos de visitantes a un blog: aquellos que lo hacen a través de su navegador y los que lo hacen por sindicación. Evidentemente, todo esfuerzo en un diseño va dirigido al primer tipo de visitante, normalmente más asiduo. Esta frecuencia de visita no busca más que la última actualización del sitio, conociendo de antemano publicaciones anteriores: de esta manera presentar únicamente la información más reciente es otra vía para liberar peso de carga y complejidad visual.
3. La participación: Aunque normalmente en un weblog se puede acceder al permalink de una anotación haciendo click directamente sobre el título de la misma, he decidido recomendable incluir un link a mayores al final de cada entrada que invite al usuario a interaccionar con la web más activamente. De esta forma, se hace un bocadillo con la información como sustancia y tapas las vías de comunicación y discusión con la misma. Para detalles sobre el post como autor, fecha de publicación, categorías y demás detalles que más del setenta por ciento de las veces son ignorados, se encuentran presentes en la página individual de cada entrada.
4. Navegación: Todos los posts del blog son individualmente accesibles a través de una navegación cronológica de los mismos. Aquí se presenta un detalle muy poco habitual pero a mi parecer lógico. Usualmente en los weblogs se presentan varios posts, encabezando la página el más reciente y a medida que descendemos los más antiguos. La navegación de los mismos suelen rezar palabras como “anteriores” y “siguientes” precedidas por flechas hacia la izquierda o a la derecha, cuando verdaderamente el contenido está visualmente ordenado de forma vertical. Por este motivo la navegación en este blog se presenta con flechas verticales y no horizontales, ya que algunos usuarios presentan problemas al entender temporalemte las palabras entrecomilladas anteriormente ya que, si se presenta de primero el post más reciente, el “siguiente” es justamente el “anterior” cronológicamente: absurdo.
5. El footer: semánticamente el pie de página tiene como misión cerrar la misma y darle la sensación al usuario de que a partir del mismo la página ha terminado, y no de forma arbritaria como si no existiese. Múltiples blogs aprovechan para colocar en el mismo información excesiva como autores, años, licencias, múltiples sindicaciones, links a los diseñadores del layout y del motor de publicación empleado… Desmereciendo el objetivo original del mismo. En mi weblog el footer es aquel lugar donde acceder a dos partes fundamentales del blog: la sindicación y el menú del mismo. Sobre lo segundo se hablará más adelante.

Se ha intentado minimizar el número de bloques, así como el número de elementos presentes en cada uno de ellos: en la cabecera figura solo el logotipo, en la info del post sólamente el número de comentarios y una flecha que invita a “adentrarse” en las entrañas de la anotación, el pie de página…

Para una explicación magistral del uso de espacio blanco, podéis echarle un vistazo a este artículo.

No menos importante, la rejilla utilizada en este diseño es líquida y no de ancho fijo. Esto no es más que un intento de ser respetuoso con aquellas personas que aún usan resoluciones bajas o se conectan a través de dispositivos con pantalla pequeña. Por tanto, esta web se visualiza correctamente tanto como desde un iPhone hasta un televisor de cuarenta y dos pulgadas. Se trata de una adaptación similar como aquel líquido que volcamos en un recipiente: da igual su dimensión, éste se adapta en su seno.

De esta retórica se desprende otro comentario: la naturaleza porcentualmente centrada del diseño permite que el lector, tras la lectura de un par de líneas, conozca perfectamente los límites del texto y su escaneo horizontal sea más natural y cómodo. En mi opinión (cada uno ve con sus ojos) aquellos diseños que se apoyan en una parte del monitor no gozan de una simetría visual tan clara como los centrados: sabremos donde empieza la línea (ya que es normalmente veinticinco píxeles adentrado el marco del monitor) pero dónde termine es a elección del diseñador. En cambio, si forzamos al usuario a empezar a leer en una posición arbitraria y a terminar en otra con el mismo márgen al final de la pantalla, se consigue situar en el contenido de una manera mucho más natural.

Se dice a menudo que en el diseño impreso (y probablemente este precepto sea aplicable al digital) que la línea de un libro no debería de contener más de cuarenta palabras. A parte de cumplir este requisito, tomo la “ley de los tres tercios” de la fotografía tradicional para emplazar las entradas: estas ocupan un 66% (~2/3) de la página, dejando un 33% (~1/3) de espacio blanco. Aunque todos estos temas sean quizás demasiado avanzados para alguien no metido en el tema, son perceptibles para todo el mundo de forma inconsciente.

Helvetica

Este sitio utiliza (a excepción de la imágen utilizada en la cabecera para darle un toque de asimetría de entrada) una única tipografía: Helvetica. Es más que factible asegurar que el 95% de las páginas web que existen en la actualidad usan o bien Arial o bien Helvetica. De hecho, un ojo no entrenado sería incapaz de distinguir entre estas dos tipografías, mientras que las sutiles diferencias suelen ser a menudo las más importantes.

Helvética (también conocida como Neue Haas Grotesk, Helvetica y ultimamente expandida a Neue Helvetica) es una tipografía desarrollada por Max Miedinger en 1957 para la fundición de tipografías Haas’sche Schriftgießerei (también conocida como “Haas”) de Basilea, Suiza. Su diseño está basado en una anterior tipografía llamada Berthold Akzidenz Grotesk que data de 1896.

Más tarde, Microsoft hizo una réplica de esta fuente llamada Arial. Sin embargo, Helvetica es la presente en el logotipo de la empresa. También es la tipografía utilizada en todo el sistema de transportes de la ciudad de New York y es asimismo la utilizada por la Nasa en la etiquetación del transbordador espacial y toda su documentación.

En caso de no tener instalado Helvética, el CSS admitirá como válida Arial y en último recurso, cualquiera parecida de la familia sans-serif. Además, la estipulación en sistemas Unix de usar Helvética como fuente sin tenerla instalada muestra una Arial bastante bien antialisada. Son todos estos motivos, además del monopolio que comparten estas dos tipografías en diseño, los que me han llevado a usar Helvética en la totalidad del texto presentado.

Disminuir la cantidad de tipografías distintas que se muestran en un sitio relaja los ojos del lector además de no tener que someterle a cambios de hábitos de lectura (por ejemplo, es posible leer un texto escrito con sans-serif mirando únicamente la parte superior de las letras, mientras que esto es inviable con un texto escrito únicamente con seritas). La monotonía tipográfica le da uniformidad al diseño además de restarle barroquismo y complejidad visual.

Además, se utiliza una relación de interlineado de 1,5 veces mayor que la tipografía usada en el párrafo, lo que se viene usando en el diseño impreso minimalista muchos años. El interlineado es un elemento vital para una lectura cómoda, por lo que se ha respetado esta tradición usando una relación tamaño de letra interlineado 14/23px.

Por último, se intenta huír de la saturación que brinda la negrita en un texto para jerarquizar títulos y rótulos, realizando esta tarea simplemente con el tamaño de la letra.

Pinta y colorea

La paleta de colores es una de las facetas más importantes y objeto de estudio a la hora de construir desde cero una página. Según este criterio se pueden dividir las webs en dos tipos: claras y oscuras. Como podreis observar, knithx luce un estilo completamente oscuro.

Un estilo oscuro emite a nuestros ojos muchísima menos radiación que uno claro. La lectura en un fondo negro (únicamente en monitores y no en libros ni en diseño empreso) es mucho más relajada y suave que en un fondo completamente blanco, además de ser incluso peligroso cuando no tenemos ninguna iluminación indirecta en donde nos encontremos con nuestro ordenador. Más como una curiosidad, un diseño oscuro a efectos prácticos “contamina” menos que uno claro (y dada la gente que usa Google y lo blanco que es, han surgido interfaces para el mismo alternativas y oscuras para salvar un poquito el medio ambiente).

Siguiendo la misma filosofía que en la tipografía, me he limitado a escoger una colección de colores reducida para la elaboración de este diseño. La paleta de colores es la siguiente:

Donde el marco se usa para la cabecera, el fondo para el cuerpo del blog, el verde para el código, el blanco para las letras de la cabecera y los restantes tonos de gris para el texto que se muestra en la página, incluído el plano, los links, las etiquetas h1, h2, h3...

Usabilidad

El diseño es ligero, carga bien en cualquier dispositivo y se puede considerar usable. ¿Por qué? Pues porque una vez entrado al sitio, se muestra la información que buscas solamente (la última actualización) y se te brindan las cuatro opciones más comunes de la forma más rápida posible: leer (inmediata), comentar (un click), explorar el blog (un click) y obtener la sindicación del mismo (un click).

Sí,¿Pero dónde está el menú?

No es habitual que los visitantes usen el menú del blog. Normalmente, la actividad en un blog es la de leer y discutir mediante comentarios. Ahora, siempre hay un grupo de visitantes minoritarios que llegan al blog con objetivos diferentes, como explorarlo por categorías o (más extraño todavía) por fecha. De todas formas, estas formas de explorar el contenido (así como un formulario de búsqueda directa y un párrafo introductorio sobre de que trata el blog) para aquellos usuarios nuevos y minoritarios se encuentran en el en principio oculto menú. Se puede acceder al mismo mediante el pie de página (al estilo de Microsiervos pero en la parte opuesta del layout.

Se presentaban dos opciones: incluir el menú permanentemente barroquizando el diseño con un elemento inadvertido en la gran mayoría de los casos u ocultarlo (en este caso con JavaScript, por lo que no requiere ni siquiera carga adicional de datos) haciéndolo visible mediante un enlace, donde se mostrarán las posibilidades de navegación del blog. He optado por la segunda para mantener la claridad y el aspecto anteriormente descrito, aunque no tan radicalmente como, por ejemplo, Leon Pater Noster, donde ni siquiera son accesibles las categorías, las fechas o un mero formulario de búsqueda (error que también cometió Minid en su diseño de una columna, donde no se encontraba por ningún lado el formulario).

Conclusión

Tras discutir los tres elementos fundamentales de una página web (layout, tipografía y colores) podemos concluir con que nos encontramos ante un diseño radicalmente minimalista, donde no se añade ningún elemento que no sea realmente funcional y se hace intensivo uso de espacio en blanco para resaltar los elementos allí donde se encuentren, emplazados visualmente por orden de importancia.

Por útimo, este artículo será traducido al inglés donde incluiré explicaciones no sólamente de lo qué he hecho, si no también cómo lo hice (código, como hacer el tema en sí). Como siempre digo, stay tunned.