El proceso de diseño web que sigo con mis clientes es una de las cosas que más interés despierta cuando hablo con personas que desean dar el salto a Internet y con profesionales que quieren incluir el diseño web entre sus servicios.

Cuando empiezas es normal que ciertos temas se te escapen. Si estás decidid@ a hacer algo, lo vas a conseguir. No va a ser fácil. Todo lo contrario. Va a ser un camino realmente jodido. Tendrás que trabajar duro y pasarte muchas horas delante de ordenador. Pero eso es parte del juego.

En este artículo voy a hablarte del proceso que sigo cuando un cliente me encarga el diseño de su web.

Merece la pena que leas hasta el final para que puedas valorar la importancia de cada una de las fases antes de lanzarte a la aventura.

Eso sí, tienes que tener claro que este es mi método, el que a mi me funciona y con el que me siento más cómodo, no es la guía definitiva.

La idea es que con el tiempo tu mism@ seas capaz de crear el tuyo.

Venga, ¡vamos allá!

PROCESO DE DISEÑO WEB: LAS FASES

1. Objetivos

Este es el momento más importante de todo el proceso.

Tienes que ser capaz de involucrar al cliente en el proyecto y conocer las metas que quiere alcanzar con su web.

Aunque parezca una tontería, la mayoría de las personas que deciden crear una web para su proyecto o su negocio, no suelen tener muy claros los objetivos que persiguen con su sitio.

Quieren vender más, tener más clientes y más visibilidad, pero esto no es suficiente.

Se necesitan objetivos más concretos, por eso les ayudo a definirlos teniendo en cuenta que sean alcanzables, medibles y temporales.

La conexión entre ambas partes es fundamental. Si no hay feeling, si el equipo que voy a formar con mi partner no me convence, no sigo adelante con el proyecto.

Sí, ya sé que a veces hay que ceder, pero esto no tiene nada que ver con el ego.

Si un proyecto está mal enfocado desde el inicio terminará siendo un desastre y yo vivo de los resultados que obtienen mis clientes cuando trabajo con ellos.

¡Ojo! no siempre ha sido así.

He tenido que morderme la lengua en muchas ocasiones hasta poder tomar este tipo de decisiones.

Si acabas de empezar, lo más probable es que empieces diseñando cosas que no te gustan y por las que te pagaran, con suerte, una cantidad ridícula.

Ya te dije al principio del post que el camino iba a ser jodido.

2. Estrategia

Supongamos que los objetivos están bien definidos y que conocemos el perfil del cliente ideal al que tenemos que dirigirnos. Sabemos quién es, dónde vive, qué necesita, etc…

Es hora de pasar a la segunda fase: la estrategia.

Quiero que te hagas una idea global de todo el proceso así que no me voy a extender demasiado en este tema.

Los objetivos de un blog nicho, no son los mismos que los de una web corporativa que vende servicios o los de una tienda online de ropa. Como imaginarás, la estrategia para lograr esos objetivos también es distinta en cada sitio.

En el blog lo más probable es que nos centremos en generar una lista de suscriptores a través de un buen lead magnet. En la web corporativa perseguiremos potenciar la solicitud de presupuestos a través de un formulario; y en el ecommerce buscaremos generar tráfico y posicionar productos por palabras clave.

Es solo un ejemplo, pero creo que queda claro por donde van los tiros ¿verdad?

3. Contenidos

Llega el momento de definir, junto con el cliente, cuáles serán los contenidos de la web.

La mayoría de los diseñadores web prefieren enviar antes una propuesta para comprobar que lo que están haciendo está en sintonía con los deseos del cliente.

Yo, por el contrario, prefiero presentar un listado de las páginas que formarán parte de la web final y discutir con él los contenidos que vamos a incluir en cada sección.

Crear un diseño y después adaptar los contenidos a la maqueta es un error.

El Mobile First manda.

Cada día que pasa estoy más convencido de que las personas que usamos el ordenador para navegar por Internet, somos los que trabajamos a diario con uno.

No digo que tengas que presionar al cliente para que te facilite todo el contenido antes de empezar a trabajar, ni mucho menos, lo que digo es que tienes que tener claro lo que vas a incluir en cada página antes de empezar a diseñar.

4. Propuesta

Ahora sí, con el contenido listo (textos revisados y corregidos, imágenes optimizadas, etc…), es momento de ponerse manos a la obra.

Esta es la fase que más me gusta.

Lo primero que hago es dibujar en mi libreta un boceto con la estructura general de cada una de las páginas del sitio. Si lo prefieres, puedes utilizar alguna herramienta de wireframing para esto, hay muchas: Gliffy, Mockflow, Denim, Balsamiq, iPlotz… yo soy más de papel y lápices de colores.

Ya no basta con hacer un único boceto, ahora necesitamos grids responsive que nos permitan adaptar el diseño a las diferentes pantallas (móvil, tableta, desktop…).

Como te decía antes, el Mobile First es el rey, mi recomendación es que empieces de menor a mayor.

Una vez que tengo listos los bocetos, empiezo a diseñar directamente con Photoshop.

Llevo más de 20 años trabajando casi a diario con este software, voy bastante rápido y si te soy sincero, me da bastante pereza cambiar a estas alturas.

Pero, Sketch3 es una muy buena opción si quieres probar otro programa.

Para presentar la propuesta (una sola), utilizo Invision.

Estoy enamorado hasta las trancas de esta App.

¿Qué incluyo en ella?

Básicamente, la Home y 3 o 4 páginas internas.

En el contrato, no suelo añadir una cláusula en la que especifico un número X de correcciones.

Prefiero marcar unos plazos razonables para que el cliente pueda revisar y comunicarme si hay que hacer alguna modificación en el primer diseño. Por lo general, suelo darle 48 horas.

5. Desarrollo y maquetación

Desde hace algo más de 8 años trabajo en exclusiva en el desarrollo de sitios web sobre WordPress. Hace unos días escribí un artículo dónde hablaba de sus ventajas, es este: WordPress.ORG el mejor aliado para la web de tu negocio.

Hay varias formas de trabajar con este CMS cuando diseñamos una web.

Podemos crear un tema base nosotros mismos y después aplicar el diseño de las diferentes páginas modificando el Theme hasta que se adapte a las necesidades del cliente.

Crear una maqueta en HTML/CSS y luego integrarla en el CMS.

Usar un tema padre, un framework…

Comprar una plantilla y modificar los colores.

Todo dependerá de tus conocimientos y del proyecto en sí.

Este no es un post técnico, así que no quiero entrar en detalle ni hacerme pesado.

6. Revisión

Con la web al 90% le doy acceso a mi cliente para que empiece a revisarla mientras sigo avanzando en el desarrollo.

No lo he dicho antes, pero todo este trabajo lo hago en local. No seas pardill@ y trabajes directamente en el servidor de tu cliente. No es serio.

Cuando el sitio está terminado, volvemos a repasar cada una de las secciones, esta vez en conjunto.

Probamos todos los enlaces.

Nos aseguramos de que la versión móvil se ve correctamente y… ¡listo!

7. Publicación

Toca sacar el sitio del servidor de pruebas y migrarlo al servidor definitivo.

Integro todo el paquete de Plugins necesarios para la correcta optimización de la web.

Aviso a Google para que empiece a rastrear las páginas.

Le doy 2 meses de soporte técnico (gratuito) a mi cliente para que me avise si encuentra algún error o para preguntarme cualquier cosa sobre la administración de la web.

Pasados esos 2 meses empiezo a cobrar por cada cambio, actualización o corrección que tenga que hacer.

SI ESTÁS EMPEZANDO…

…en el mundo del diseño web, espero que este artículo te haya servido como fuente de inspiración para definir tu propio proceso de trabajo.

Mil gracias por tu valoración de 5 estrellas y por compartir mis artículos en tus redes sociales.