El aspecto gráfico de un sitio juega un rol muy importante. Mucho se habla en la web de esta importancia y de cómo se deben construir técnicamente los sitios, sin embargo poco de como lograr aspectos gráficos profesionales o diseños “atrayentes”.

Con la movida de los sitios basados en stándares muchos han decidido sacrificar el aspecto de sus sitios por diseños muy austeros y así tener un código validado. Si bien esto no es directamente negativo se debe recordar que en los sitios comerciales el aspecto cumple una función de “gancho” y logra que los visitantes lo recuerden por su imagen o aspecto.
Pero no caigamos en el error de hablar sobre los “porque” y hablemos de los “como” lograr buenos diseños.

1) Utiliza 100% de CSS y XHTML.

Una de las cosas más importantes a la hora de lograr buenos trabajos de diseño es utilizar CSS. Además de las bondades que este sistema de maquetación tiene (separación entre contenido y diseño, mayor rapidez de carga, mejor accesibilidad, etc) , este nos brinda un sinfín de posibilidades gráficas. Las tablas son realmente muy limitadas en este sentido. No es mero capricho el usar CSS en todos los diseños
La utilización de CSS permite un manejo avanzado de “fondos” y de un control al milímetro de cada objeto.

2) Mira y aprende.

Una buena forma de aprender es mirando, no estoy hablando de copiar o plagiar diseños. Pienso que no hay actitud más denigrante que esta. Me refiero a utilizar las galerías showcase (captura de pantallas de diseños) que están concebidas con la pura idea de "inspirar". Aquí un pequeño listados de las galerías más conocidas. Mira el código fuente y estudia como trabajan muchos diseñadores. No es necesario que copies nada, de esta forma te estarás imponiendo un estilo y forma de trabajo que te hará aprender muy rápidamente la mejor forma de realizar web profesionales.

2) Aprende a editar imágenes.

Con la utilización de CSS viene aparejada la necesidad de trabajar con imágenes. Estas deben ser livianas en peso, y en donde se necesite, debemos aprovechar los efectos de transparencias que nos permite el formato GIF o PNG. Esto nos abrirá un mundo de posibilidades que no teníamos con las tablas. El simple hecho de tener un control absoluto sobre los fondos, márgenes y espacios nos hace mucho más fáciles el aplicar buenos diseños.

3) Utiliza un programa Vector para Maquetar Bocetos.

Muchos diseñadores cometen el error de ponerse a diseñar improvisando el tema de la forma o aspecto que tendrá el sitio. Sin embargo existe un sistema que nos permite tener una visión más global de lo que estamos haciendo.
Si utilizamos un programa para manejar vectores (Adobe Illustrator, Corel Draw, etc) , podremos simular como quedará nuestro sitio tanto en formas como en combinación de colores y fuentes. Podremos mover, ampliar y manejar espacios con total libertad.
Para lograr un trabajo óptimo podremos ir haciendo capturas de pantalla de determinados desde nuestro navegador con el fin de tener dimensiones a escalas reales.

4) Aprende los principales Conceptos de Diseño Gráfico

No solo de CSS y HTML se hacen los sitios web, si bien reviste una gran importancia el código de nuestra web, para lograr buenos diseños es necesario conocer los principales fundamentos de diseño; armonía tonal, combinación de colores, uso acertado de tipografías, contrastes, manejo de espacios, etc.

Sin embargo el lograr buenos trabajos se logrará con el tiempo y cuando tengas unos cuantos sitios diseñados.

En mi sitio web, webnova.com.ar, puedes encontrar bastante información en la sección de diseño web. Os indico algunos enlaces que serán de ayuda:

Teoría Visual sobre la afectación de las formas

Como Armonizar los colores

Uso de Imágenes en diseño Gráfico

Teoría Avanzada sobre el uso de fuentes

Blog Sobre tipografías y sus usos

Todas las Teorías del diseño Gráfico. Documento muy entendible. (PPT)

Estética, usabilidad y emoción en el diseño

Las Modas del Diseño Web

Como elegir el color de las tipografías