Proyectar un sitio web II. Encarando el diseño, por Luman

En el artículo anterior vimos como encarar la primera cita con el cliente y presentarle una propuesta lo más acorde con sus necesidades. En este vamos a plantarnos delante de la hoja en blanco y tratar de salir airosos en el menor tiempo posible (el tiempo es dinero, no?).

En nuestras manos anda ya el material gráfico que nos ha facilitado el cliente. Logo con indicación de los colores corporativos, tipografía… Es lo que se llama manual corporativo y que en la mayoría de los casos a nivel de pequeña o media empresa no existe, por lo que tendremos, con suerte, un jpg en un doc o una caja de cartón para escanear y trazar, en el peor de los casos. También nos han proporcionado unas cuantas fotos de sus productos, fotos de los productos en el almacén que tendremos que limpiar y retocar un poco, fotos escaneadas de un catálogo o que tendremos que escanear nosotros míos o, incluso, fotos sacadas de las webs de la competencia. Con todo esto es tiempo de diseñar nuestro boceto.

Aquí entramos en diversos casos, ya que podemos haber acordado con el cliente la realización de varias propuestas… nunca nunca nunca más de tres, porque os merecerá el tiempo. Lo mejor es una propuesta y trabajar sobre esa algunos cambio de color o posición de elementos. Es importante que estemos siempre atentos a las tendencias y detalles que se llevan en cada momento. Para ello sitios como CSS Beauty o CSS Vault nos van a resultar de gran utilidad. También Google si buscamos sitios webs que lleven a cabo la misma actividad que nuestro cliente. Podemos y debemos examinar estos sitios para ver sus virtudes y defectos, adaptándolos y corrigiéndolos para nuestro sitio.

Y con un montón de ideas en la cabeza tras un par de días recopilando información, es hora de empezar a plasmarlo todo en un papel a modo de esquema o directamente sobre vuestro editor gráfico favorito, Photoshop, FireWorks, Gimp… Lo podemos ver este proceso como un puzzle en el que tenemos que encajar las piezas de la mejor manera posible, logos, colores, fotos de productos, la navegación con sus menús, submenús, bloques… Para la presentación ante el cliente de nuestra propuesta no es necesaria que la maquetemos. Unos jpgs valdrán con la Home y varias páginas interiores con contenido (detalle de productos, formulario, información general…).

El diseño de esta propuesta nos puede llevar tiempo y a algún callejón sin salida, y mientras, el cliente querrá ver algo en su dominio. Por lo que podemos montar un index.htm con el logo, datos de contacto de la empresa y alguna foto mientras realizamos el sitio, no sólo el diseño. Tratad de no poner mensajes de "En construcción" y mucho menos gifs animados de vallas o personajes de la construcción, jejeje. Sí puedes crear una lista de suscripción para informar del lanzamiento de la web.

Intentemos a la hora de diseñar no tener sólo contento al cliente sino pensar en el usuario y su conexión. Y no poner fotos enormes en las primeras páginas. Es mejor dar la opción al usuario de ver las imágenes ampliadas sólo sí el quiere. Tratar de que todos los apartados de la web estén accesibles al menor número de clics y que el usuario que entra en nuestro sitio web sepa a los poco segundos qué puede encontrar allí y como llegar a los distintos apartados. Todo esto se consigue estudiando muy bien la estructura del sitio y los elementos de navegación, y haciendo pruebas con distintos usuarios y fijándonos donde hacen clic y en donde no, como navegan, que visitan… Podemos decirles que lleguen hasta tal apartado y ver su respuesta de reacción, tiempo que invierten, etc. También tener en cuanta la cantidad de textos que pongamos y posiblemente nos pase el cliente. Tratemos de reducirlos lo más posible ya que no es cómo leer en una pantalla de ordenador. Se suele decir que tratemos de reducir esos textos en una primera lectura al 50%, y en la segunda a otro 50%. Si lo conseguimos tendremos los textos perfectos para Internet .

Durante la presentación de los bocetos expliquemos el porque de la distribución, de los colores y su significado, de la nevagación… o sea, defendamos nuestro trabajo para evitarnos horas innecesarias de trabajo. Abajo con la sumisión hacia el que paga! Tratemos de educar y explicar como funciona la web y todos seremos más felices.