Creación de un sitio web (IV)
por Luciano Moreno, del departamento de diseño web de BJS Software.

Primeros diseños.-

Bien, ya hemos estudiado cómo vamos a crear nuestro sitio web. Ya hemos recopilado la información necesaria y sabemos qué tipo de estructura y de sistema de navegación vamos a darle. También tenemos una gama de colores definida, para trabajar sobre ella, y disponemos del logo y las imágenes que nos ha facilitado nuestro cliente. Es hora de empezar con el proceso de creación.

Frecuentemente, llegados a este punto, los diseñadores abren su programa editor preferido y comienzan a escribir líneas de código HTML y Javascript sin freno. Sé que en cuanto una persona siente la llamada de la creatividad es dificil ponerle límites, pero si pensamos un poco en el tema vemos rapidamente que esta no es la forma de actuar adecuada. ¿Porqué?.

Si hacemos un estudio de las horas perdidas en un proyecto por adelantarnos demasiado a las pautas lógicas de proceso, veremos que al final se pierden tiempo y dinero tontamente, ya que ese código que se escribe generalmente se tira a la papelera (de reciclaje, claro), al no ser luego aprobado por el cliente, pués no se adapta a lo que él desea, bien porque no hemos sabido plasmar sus objetivos, bien (y es lo que generalmente ocurre) porque de un día para otro ha cambiado de opinión sobre lo que desea.

Para evitar esto es conveniente siempre empezar esta fase del proceso creativo abriendo nuestro programa gráfico preferido y plasmando en una serie de gráficos vectoriales una primera visión de la interfaz que vamos a crear, basada en la información que tenemos recopilada, así como de alguna de las páginas secundarias y de los formularios necesarios.

Normalmente deberemos crear 2-3 versiones de la misma, que se diferenciarán en algunos aspectos clave como la disposición de los elementos, la distribución de los colores, etc. Y luego debemos presentar estos gráficos a nuestro cliente, para que vea cómo van a resultar sus páginas al final, y en base a ellas nos diga qué le gusta de nuestra idea y qué no, qué desea que cambiemos y qué desea que dejemos.

Este proceso previo al paso a HTML puede parecer innecesario, pero nos va a ahorrar mucho tiempo luego y nos va a dar una base sólida sobre la que empezar a programar. Además, si en el proceso de diseño en HTML hay implicadas varias personas, con estos gráficos tendrán una idea clara y concisa de qué es lo que deben construir.

Es en esta fase también cuando deberemos crear el logotipo y todos las demás imágenes que vamos a necesitar luego en las pantallas generales. En cuanto al logotipo, generalmente los clientes no poséen uno en formato vectorial, si no que nos darán una imagen del mismo en un folleto, tarjeta,etc, que deberemos pasar nosotros al formato conveniente. Este conviene que sea de tipo vectorial, ya que entonces podremos modificarlo, ampliarlo y reducirlo con toda comodidad. Y si es una empresa nueva que todavía no tiene un logotipo definido, deberemos entonces crear uno adecuado, tema este que puede dar para escribir un manual entero, pero que a grandes rasgos se recopila en que dicho logotipo debe resumir el espíritu de nuestro cliente (casi nada).

Una vez oida la opinión del cliente sobre nuestras imágenes de interfaz previas haremos, también en formato gráfico, la interfaz definitiva, con lo que tendremos ya la base final sobre la que construir con código y además habremos conseguido dejar claro al cliente que lo que vamos a hacer es lo que él desea, lo que ha aprobado de antemano, por lo que si posteriormente desea cambios en la interfaz estos serán debidos a su propia decisión, no a fallos nuestros, y consecuentemente, deberá ser él el que cargue con los nuevos gastos ocasionados con los cambios.

Para dejar claro esto, vamos a ver un ejemplo. Supongamos que vamos a crear un sitio web para una empresa dedicada a la venta de zapatos, que desea tener una presencia en Internet mediante una serie de páginas informativas (no de venta). Hemos hablado con el cliente y hemos recopilado la información que necesitamos. Vamos pués a hacer una versión de lo que será la interfaz principal del sitio web a crear.

Para ello, cogemos nuestro programa gráfico preferido y empezamos a trabajar. Yo suelo usar Adobe Ilustrator, pero también son válidos Corel Draw, Paint Shop Pro y cualquiera con el que vosotros os sintáis cómodos. Los resultados obtenidos en una primera intentona son los siguientes:

Citamos a nuestro cliente, le enseñamos esta imagen y le pedimos su opnión. Y nos dice que desea que el nombre de la empresa aparezca de mayor tamaño, que los enlaces del menú lateral le parecen demasiado grandes y que el fondo blanco central no le gusta. Así que procedemos a cambiar nuestra imagen (cosa muy fácil en un gráfico vectorial), obteniendo el siguiente resultado:

Y así seguiríamos hasta obtener la aprobación del cliente. Y entonces, y sólo entonces, procederíamos a la creación de la interfaz en código HTML, siguiendo ya las especificaciones derivadas de este gráfico.

El ejemplo anterior es tal vez demasiado simple, pero con él sólo pretendo que comprendáis el objeto de esta fase de creación. Generalmente la creación de estos gráficos previos en un trabajo real ocupan un buen número de días.

Una vez que tenemos ya el modelo sobre el que trabajar, es hora de empezar a escribir el código. Pero la forma idónea de hacerlo la veremos en una próxima entrega. Hasta entonces....¡Que la fuerza os acompañe!.