El proceso de diseño y creación de un proyecto web, al igual que otros procesos
creativos, debe cumplimentar diferentes fases de desarrollo hasta obtener como
resultado un producto de calidad. Podemos nombrar esas fases de la siguiente
manera:
- Información
- Estructura de la web
- Creatividad
- Desarrollo
- Contenido de la web
- Pruebas on-line
Información
¿Qué necesita el cliente? No siempre lo que quiere el cliente es lo que necesita, por lo que a veces debemos aconsejarlo y guiarlo hasta sacar en conjunto un esquema (sketch) que nos sirva para hacernos una idea de todo el trabajo que nos llevará el proyecto en cuanto a:
- páginas a diseñar
- programación
- horas de trabajo
- etc.
Antes de tirar una línea sobre un papel debemos tener claro la siguiente
información:
Objetivos de la web. Esta información nos indicará que tipo de web debemos
diseñar, un catálogo, una tienda, una web corporativa, un microsite, etc.
(Ejemplo: Vender productos, Aumentar contratos de servicios, Llegar a clientes en todo el mundo, etc.)
Público al que va dirigida la web. Conocer el público al que irá dirigida la web nos
dará pautas básicas de diseño. No es lo mismo una web que la utilizarán
profesionales de la salud, a una que utilizarán adolescentes.
Web de la competencia. Sin ánimo de copiar o imitar a nadie, siempre es
interesante estudiar a los rivales. Ver de qué manera le dan solución al mismo
problema que tienes delante. Nos sirve para estudiar como distribuyen la
información y para intentar superarlos brindando opciones que a ellos les falte.
Web de referencia. La mayoría de clientes no entienden de diseño, por eso
contratan a otra persona para que lo haga. Que no entiendan de diseño no quiere
decir que no sepan lo que les gusta y lo que no les gusta, así que mientras más
referencias de sitios que le gusta nos den, mayor idea de sus gustos tendremos e
iremos a lo seguro cuando le pasemos las propuestas gráficas para que las
valide.
Estructura de la web
La información lo es todo en la web. Cuando hablamos de información, nos
referimos a: textos, imágenes, videos, música, formularios, archivos, en definitiva todo lo que contendrá la web. La distribución y la forma de plasmar esta información en la web nos determinará la estructura visual del sitio.
La estructura de una web está compuesta por las siguientes páginas:
- Página Inicial (Home page)
- Layout (Todo lo que se repite en todas las páginas del sitio)
- Página general (Contiene la información de la web, textos, imágenes,
formularios, etc.) - Listado (puede ser de: categorías, productos, resultado de búsqueda, etc.)
- Ficha de productos
- Listado de artículos (blog)
- Artículos(post)
Estas páginas necesitan un diseño específico, y según la información que
contengan tendrán un comportamiento u otro. Es por ello que lo primero que
hacemos es crear un árbol de navegación, que le permitirá a los diseñadores y
programadores tener una idea global del funcionamiento del sitio.
Ejemplo de un árbol de navegación.
Una vez tenemos claro el árbol de navegación, y el cliente nos ha explicado el tipo
de contenido que quiere colocar en la web, en una hoja y con un lápiz recreamos
los Sketch, bocetos a línea sobre papel, en los que distribuimos en bloques la
información de cada página.
Ejemplo de un Sketch
Por lo general se hacen bocetos de las páginas que cambian dentro del sitio web o
simplemente de la página de inicio. Cuando el cliente nos valide los bocetos, ya
estamos listos para diseñar.
Creatividad
En este punto ya podemos trabajar la gráfica del sitio web y darle color, imágenes,
fuentes tipográficas, etc. Podemos buscar inspiración en galerías de sitios webs
como: www.bestwebgallery.com, www.cssmania.com, www.webcreme.com,
www.stylecrunch.com.
Podemos buscar y encontrar imágenes gratuitas en los siguientes sitios:
www.sxc.hu, www.morguefile.com.
Fuentes tipográficas: www.appendixsquared.com/downloads/fonts.php,
www.fontfabric.com.
Boceto de la página de inicio
De todas la páginas que componen la web, la más importante es la página de
inicio, por lo que tendrá un diseño especial, así como la información que
contendrá. En la Home Page deberemos encontrar la siguiente información:
- Breve descripción de la empresa o persona si es un sitio personal.
- Productos destacados o a los que se les quiera dar más importancia.
- Servicios más importantes a los que se dedica la empresa.
- Forma de contacto.
- Navegación y enlaces a todos las páginas de la web.
Debe transmitir confianza, ser legible. El visitante a un golpe de vista debe
identificar lo que busca, y saber qué hacer a continuación.
Una vez que el cliente nos ha validado el diseño de la página principal, podemos
continuar con el diseño de las paginas interiores del sitio. Haremos una propuesta para una página general (quienes somos), listado de productos, ficha de productos, página de contacto, blogs, artículos, etc. Debemos presentarle al
cliente una propuesta por cada página diferente para que pueda hacerse una idea
de cómo quedará distribuida su información y luego no haya problemas ni
pérdida de tiempo o dinero por hacer algo que no le gusta o que no lo quiera así.
Es preferible perder un poco más de tiempo en esta fase a tener que realizar
cambios en la fase de desarrollo, porque los cambios en programación son muy
costosos.
Desarrollo
Una vez validado todo el diseño, podemos pasar a programarlo en XHTML + CSS
para que posteriormente pueda ser integrado en cualquier CMS (gestor de
contenido). Nuestra aplicación, 3sellers, está desarrollo en Ruby on Rails que
brinda grande funcionalidades a todo tipo de web corporativa, tienda o catálogo.
El sitio web diseñado y ya pasado a XHTML + CSS se integra en 3sellers con liquid
y queda listo para probarlo y subir los contenidos.
Contenido en la web
Es responsabilidad del cliente proporcionarnos los contenidos de la web. Según al
acuerdo contractual que se haya llegado, se introducirán en la web una cantidad
determinada de contenido. Para ello utilizamos el panel de administrador de
3sellers.
Pruebas on-line
Cuando el sitio está totalmente acabado, se revisan todas las páginas del sitio,
que los enlaces funcionen correctamente, que el sitio esté validado y cumpla los
estándares, que los formularios funcionen perfectamente, etc. Se hacen compras
virtuales y se comprueba que las pasarelas de pago funcionen bien.
