En una plática que di, donde presenté las herramientas Expression de Microsoft, le platiqué al público que cuando se diseña la interfaz de una aplicación--ya sea tipo desktop o Web--hay dos tipos de personas: las que nos gusta tirar código y las que les gusta hacer rectángulos con esquinas redondas y cosas que brincan y hacen fade-in en la pantalla. En el caso de las aplicaciones Web, a los primeros les dicen desarrolladores Web (web developer) y a los segundos diseñadores Web (web designer)--una distinción que al parecer los reclutadores que me llaman nunca han podido entender.
Expression es para el segundo grupo. Pero yo, definivamente pertenezco al primero. Soy de ese tipo de personas que si les pides una aplicación, te sabe hacer la arquitectura, la capa de objetos de negocio, la capa de acceso a datos, servicios, etcétera, es decir, un sitio que funcione perfectamente de pe a pa, pero no me pidas que te diga qué móndrigos colorcitos o que tipo de layout deberíamos usar para las "paginitas", porque no sabría ni por donde comenzar.
Últimamente traía la idea de cambiar el diseño "gráfico" de este sitio/blog, tomando en cuenta que: A) no quería uno de los diseños estándares de Blogger, B) quería algo completamente original, lo cual descartaba usar los templetes que están disponibles en otros sitios como este, este y este, y C) a pesar de que domino CSS a un buen nivel, no sé ni p*** de "diseño gráfico".
Así que se me hizo una buena oportunidad para aprender. Comencé a interesarme por el tema, busqué libros y cuando me topé con The Principles of Beautiful Web Design de Jason Beaird (SitePoint, ISBN 978-0-9758419-6-9) supe que había encontrado el indicado. Este es un excelente libro de apenas 165 páginas--y con muuuchas ilustraciones--donde en apenas 5 capítulos pretende enseñarle a los "programadores" las bases para el diseño de un sitio Web: composición y arreglo (layout), color, textura, tipografía e imágenes. También contiene un montón de enlaces útiles que comparto a continuación.
Composición y arreglo
Aunque algunos de los arreglos en el web son casi estándar--y ni siquiera tienes que quebrarte el coco para echar el CSS requerido--el libro explica bastante bien la teoría de cuadriculado (grid theory), la regla de tercios--así es, no solo se utiliza en la fotografía--y los layouts estándar. Además hace un buen trabajo identificando algunas tendencias recientes que quizá ustedes ya hayan notado.
Un buen argumento que hace el autor, es que para que uno pueda hacer un buen diseño es importante ver varios diseños buenos. Algunos recursos en este departamento son:
Color
Si son como yo, y no saben ni qué colores escoger y combinar para la ropa que se ponen en la mañana, mucho menos para un sitio Web, entonces este capítulo les servirá. Explica desde las asociaciones psicológicas que tenemos con algunos colores, hasta la teoría RGB para combinarlos y poder desarrollar un esquema y paleta de colores basándonos en cuáles son análogos, complementarios, monocromáticos, etc. Alguna de la información pueden encontrarla en un artículo por el mismo autor llamado Color for Coders.
De las herramientas que menciona, están unos sitios que puede ayudar enormemente en esta tarea:
Textura
Este capítulo es uno de los dos que trae algo de código CSS. Y tiene una introducción que me cayó como pedrada (traducción mía):
Hay muchas personas bien-intencionadas por ahí que construyen un sitio Web con un layout estándar de dos o tres columnas, escogen unos cuantos colores para él y lo dan por terminado. No se molestan con empujar su diseño más allá, o afinar los detalles. Quizá no tienen suficiente tiempo o dinero en el proyecto, o quizá se han tomado el axioma de "menos es más" demasiado literalmente.
No todos los sitios Web tienen que estar hermosos, pero cada sitio puede serlo. El surgimiento de CSS le ha dado a los diseñadores Web un gran control sobre cómo se ve un sitio, pero creo que el problema es que muchas personas simplemente no saben por dónde empezar cuando se trata de personalización. (p. 67)
Y sí, como habría de esperarse, habla--entre varias otras cosas--de cómo hacer rectángulos con esquinas redondas, jejeje. Para ello hay una herramienta que menciona el autor que también es bastante útil:
- Spanky Corners - Una herramienta que genera las imágenes y CSS necesarios para este efecto de acuerdo a los colores que tú escogas.
Tipografía
Este quizá fue el capítulo con el que más familiarizado estaba dado mi interés por la tipografía. Es decir, yo ya sabía la diferencia entre un font serif y uno sans-serif, así como cuáles eran los 7 fonts "seguros" para el Web. Aún así aprendí algunas cosas nuevas.
De los enlaces útiles en este capítulo están:
- sIFR 2.0: Rich Accesible Typography for the Masses - Explica una técnica que se degrada "graciosamante" utilizando Flash y JavaScript para aplicar prácticamente el font que quieras a encabezados.
- Typetester - Una herramienta que permite comparar el efecto de diferentes configuraciones sobre distintos fonts.
Y si de veras se quieren clavar en el tema, yo agregaría el siguiente:
Imágenes
Este fue uno de los capítulos que quizá le faltó un poco más de "carnita", aunque trae buenos ejemplos del proceso de criticar y arreglar una fotografía. También explica muy bien sobre los diferentes esquemas de licenciamiento para fotografías stock--gratis, royalty-free y rights-managed--y dónde conseguirlas.
El autor menciona dos sitios donde puedes obtener fotografías stock completamente gratis:
Conclusión
The Principles of Beautiful Web Design es un libro que es tan corto que me lo eché en tres sentadas. Se clava más con los muchos ejemplos e ilustraciones sobre los conceptos de diseño, en vez del código CSS necesario para producirlo, lo cual fue perfecto para no desviarse de los temas. La narrativa y es amena y tiene muchos chistoretes con los que me identifiqué. Hasta veces sentía como si estuviera leyendo una revista larga, más que un libro. Si están en la misma lancha que yo con respecto al "diseño gráfico" de sitios Web, entonces se los recomiendo.
Armado con este nuevo conocimiento, comenzará el re-diseño de este sitio, así que si de repente ven cosas raras no te asustes, solo soy yo experimentando y aprendiendo un poco.