A la hora de comenzar un trabajo, no sólo de diseño gráfico, es de gran importancia tener un plan. Un plan nos ahorra mucho tiempo, ya que sabemos a dónde vamos, qué objetivos hay que cumplir, y nos permite sobre todo organizarnos. Es muy fácil perderse en detalles sin importancia y nimiedades sin un plan. En el diseño encierra lo que los diseñadores llamamos “el proceso de diseño”, pero abarca también aspectos como el briefing, planteamiento de objetivos y fechas de entrega.
Cuando uno planea para diseñar en CSS, la traducción de un diseño hecho en Photoshop a códigos HTML y CSS se hace mil veces más fácil.
Verán, los primeros sitios que diseñé con CSS terminaban haciéndose una maraña un tanto confusa, ya que partía de detalles del diseño y sólo iba agregando cosas hasta que al final me quedaba el diseño lo más parecido a lo que quería. Este enfoque qué podría llamarse “por adición”, resulta ser a veces tedioso y largo ya que no sigue un plan definido sino el mal aprovechado instinto de diseño que todo artista gráfico posee. Ahora estoy siguiendo un proceso que me está ayudando más y todo gracias a la ayuda de un papel, mi mente y un poco de paciencia, la temida palabra para personas que sólo quieren ponerse manos a la obra a la producción del diseño en sí.
Este proceso va así:
Paso 1. Definir qué layout va a tener el sitio. Esto lo hago en papel, más o menos ubicando en un dibujo muy simple secciones del sitio. Es necesaria la información de lo que el cliente necesita. Comienzo definiendo lo más simple: 1 columna, 2 columnas, o 3 columnas.
Paso 2. Realizo el draft en Photoshop. Esto me permite hacer cambios rápidos moviendo las cosas nomás. SIEMPRE usando líneas guías ya que más adelante, junto a la Herramienta Regla serán de suma importancia para establecer las medidas en código.
Paso 3. Una vez terminado el draft o drafts, tengo que pasar el diseño a código. Para esto comienzo agarrando una hoja y un lapicero. Cada sección irá en una caja o div, así que escribo los nombres de todas esas secciones, y escribo los números a usar. Ancho de la caja prinipal, márgenes, divisiones, tipo de letra, etc. Todo en lenguaje “humano”.
Paso 4. Ahora es tiempo de empezar con el editor de páginas Web. Yo uso Dreamweaver 8. Contrariamente a lo que hacía antes, comienzo con poner código HTML de estructura tal y como quiero que sea visto por los buscadores y gente discapacitada. Así, evito poner siempre el Sidebar antes que el contenido que es lo más principal. Gracias al CSS es posible hacer esto sin importar que el Sidebar aparezca antes.
Como ven, es solo la estructura, el esqueleto.
Paso 5. Es hora de poner el contenido. Nada de estilos, nada de fonts, nada de colores. El contenido se pone usando tags que le den sentido. Uso h1, h2, etc. para encabezados. Los párrafos encerrados en su p tag. La navegación en listas no ordenadas (ul).
Paso 6. Ya tenemos todo listo para darle el aspecto gráfico que teníamos en mente. Comenzamos entonces armando la estructura, lo que será fácil ya que tenemos todos los números en nuestro papel.
Paso 7. Trabajamos la página sección por sección, definiendo imágenes de fondo, colores, letras, espaciado. En fin, cientos de cosas que podemos hacer con CSS. Yo trabajo de arriba hacia abajo. Definiendo primero fondos y dimensiones, y al final encargándome de detalles.
Paso 8. Una vez que el sitio está terminado hay que probarlo. En realidad lo mejor es ir probando en los varios navegadores mientras avanzamos. Una revisión final nos librará de cualquier problema que el usuario pueda tener.
Paso 9. El paso final, validar el código. Esto nos permitirá corregir errores que no veíamos o se nos chispotearon, como cerrar tags por ejemplo. Al final quedamos con nuestra página validada en código XHTML, cumpliendo los estándares.
Ése es mi proceso, lo más sencillo que puede ser. Claro que siempre hay momentos inesperados como ciertas cosas que cargan bien en Mozilla y no en IE por ejemplo, pero esas cosas entran a tallar más bien en el aspecto técnico y no en el proceso que quiero delinear acá. A pesar de que pueda parecer un poco “rígido” de esta manera, en realidad no lo es, al contrario el diseño va sobre ruedas y uno siente que las cosas están acabándose como se planeaba.
Etiquetas: diseño gráfico, diseño web, objetivos, plan, proceso de diseño, tutorial de diseño
