Cuando en verano de 2011 pensaba que me gustaría escribir artículos sobre diseño web tenía claro que quería que el diseño del sitio fuera de corte editorial: el texto debía ocupar el lugar más destacado, que respirara e invitara a la lectura sosegada. Mi objetivo era que el lector encontrara un lugar de reflexión o, al menos, que tuviera un visión más pausada de los aspectos de diseño que me interesaban. Hay miles de sitios fantásticos que reúnen imágenes espectaculares pero lo único que yo podía ofrecer y esos sitios no era mi punto de vista, mi opinión y mis preferencias en mi campo. Quería que este sitio sirviera de punto de encuentro de dos de mis pasiones: el diseño y la palabra escrita.Me gustan las palabras.De hecho muchos proyectos de diseño los afronto desde la palabra: escribiendo, describiendo, cómo creo que debe ser una maqueta, una sección de un sitio web o un logo. El 5 de agosto escribí: ¿Naranja, verde, negro? Y a continuación «Granulado». Los colores finalmente no fueron esos, pero sí que acabé aplicando una tenue textura al fondo. El 20 de julio hice las primeras notas con la estructura del sitio.[caption id="attachment_1017" align="alignnone" width="520" caption="Primer boceto de la estructura"]
[/caption]El 22 del mismo mes anoté varios nombres siendo el primero ernestojimenez. El segundo era Todas estas capas. El 4 de agosto escribía: «Creo que nombre personal es más fácil de recordar que otro. Además el sitio va a estar muy personalizado».
Maqueta
Cuento todo esto para explicar el peso que quería que tuviera el texto en la maqueta. Prácticamente todos los bocetos que dibujaba los empezaba plantando una gran caja sombreada en el cuadro de la pantalla. Así, dibujando cajas, encontré –estas cosas te las encuentras, ocurren, no las buscas– la disposición de los bloques de texto desplazados. La cabecera, el artículo de la página de inicio y los comentarios a la izquierda, el texto de saludo inicial, el texto de los artículos y el pie con un margen a la izquierda mayor… Aprovechando los espacios que crea el desplazamiento de las columnas definí un estilo sumario para destacar fragmentos de los artículos a la izquierda del texto.
La sección de portfolio divide el área de texto en tres columnas que, gracias al script masonry.js, crea una estructura muy dinámica al hacer que unas imágenes de proyectos encajen con otras.
Tipografía
Cuando comprobé lo bien que funcionaban algunos servicios de fuentes como Typekit mi entusiasmo se disparó (y me reconcilié con el hasta entonces tipográficamente pobre mundo del diseño web).El cuerpo principal está compuesto en Chaparral Pro a 18 píxeles con una interlínea de 24. La entradilla está en un cuerpo ligeramente mayor: 20 píxeles. Los titulares están en 45 píxeles con un espacio entre líneas de 48 píxeles (el doble de la interlínea del texto base).Para el menú, pie e información adicional he usado Museo Sans que hace un juego de contrastes muy interesante con Chaparral Pro.
Imágenes
En cualquier caso, por mucha importancia que quisiera darle al texto, estaría loco si no considerara igualmente importantes las imágenes que forzosamente debían acompañar a los textos. Después de todo, esto es un sitio sobre diseño. Al principio solo ideé una forma de presentar las imágenes: ocupando todo el ancho de la columna de texto (528 píxeles). Pronto vi que ópticamente quedaban mejor un poco más estrechas (520 píxeles) e hice el cambio en el archivo functions.php para que WordPress subiera las imágenes a este tamaño. Un día, haciendo pruebas, vi que podía utilizar la misma técnica que para los destacados (un margen negativo de −160 píxeles que sacara la imagen de la caja de texto).
En un próximo artículo detallaré la fase de desarrollo del tema de WordPress.
