fases diseño web

Fases en la creación de una página web

Tras muchos años de experiencia en el diseño y creación de páginas webs, uno de nuestros aprendizajes más clave es darle especial atención al detalle y al proceso en sí mismo. Cuidar la metodología y seguir cada uno de los pasos son clave a la hora de evitar malos entendidos con clientes y llegar a tener siempre el producto deseado. 

Es recomendable no abrir otra fase mientras la anterior no esté cerrada (puede haber excepciones).

Planificación desarrollo web

Toma de requisitos

diseñar, olvidamos pero que es esencial. La toma de requisitos nace antes que el proyecto mismo y es cuando cliente y desarrollador/webmaster/diseñador se sientan a traducir en funcionalidades aquello que el cliente tenga en la cabeza. Es necesario apuntar toda uso o requerimiento que la web vaya a tener, incluso si a ti como cliente te parece una banalidad o a ti como diseñador algo demasiado sencillo. Tenerlo por escrito ayudará a tenerlo en cuenta tanto en el presupuesto previo como en todos los siguientes pasos. 

Qué tenemos en cuenta en esta fase:

  • Objetivos de la página web
  • Requisitos técnicos previos
  • Funcionalidades necesarias
  • Contenido relevante
  • Contenido del que disponemos (fotos, textos, etc. ) y quien va a encargarse de ello
  • Idiomas
  • Tecnología a utilizar: WordPress, Woocommerce, Prestashop, web a medida…
  • Cuando hablamos de una tienda online, hemos de saber si va a haber opciones de envío, tasas, variaciones en los productos o algo específico a tener en cuenta.

Plan de acción – Kanban

Desglosamos todas las tareas a realizar y le otorgamos una fecha y un encargado. Para nosotros, una herramienta que funciona muy bien para esta fase es Trello ya que gracias al modelo Kanban podemos ver el proceso del proyecto en un sólo vistazo. Gracias a la planificación podremos obtener una fecha aproximada de la entrega de la página web.

Set-up SEO

Una vez definido tanto el idioma como el objetivo de la página web así como los apartados. Hacemos un SEO destinado a optimizar la web en buscadores. Lo que hacemos en esta fase es:

  • Kw research: con el fin de identificar las palabras claves de nuestra página web. 
  • Arquitectura web: gracias a los resultados del KW research, elaboramos la estructura de secciones y subsecciones más óptima, enfocando cada una de ellas a una palabra clave.

Diseño web

Parece que ya disponemos de algo con lo que poder comenzar a diseñar, y, en efecto, es aquí cuando empezamos a crear. Existe la eterna guerra entre copywriters y diseñadores en la cual unos necesitan del trabajo previo del otro para comenzar a trabajar. Es muy difícil diseñar sin contenidos, pero también es difícil escribir sin una estructura. Es por ello que aquí es clave la fase de wireframing.

Wireframing

Se trata de un esquema de la apariencia de la página web en cuanto a titulares, extensión del texto, imágenes etc. De esta manera podemos hacernos una idea de cual va a ser la estructura de cada una de las páginas. Además, al validarlo con cliente comprobaremos que todas las funciones y secciones establecidas en la toma de requisitos están siendo tenidas en cuenta.

Copywriting

Elaboramos los contenidos en texto de nuestra página web a partir del wireframe, así como las pautas SEO en cuanto a palabras clave, etc.

Una vez obtenemos los textos, se les hará una revisión SEO (a veces es la misma persona, a veces no) optimizando el contenido.

Diseño y prototipado web

Ahora sí, vamos a empezar a ver la parte más visual de nuestra página web. Es el momento más creativo. Gracias a herramientas como Figma, podemos realizar el diseño navegable de nuestra página web para que veamos de manera fiel el acabado de ésta. Es importante tener en cuenta el funcionamiento en todo tipo de dispositivos ya en esta fase para facilitar la tarea del desarrollador/maquetador y no dejar puntada sin hilo.

Maquetación y desarrollo

Una vez cerramos la fase de diseño web y, tras haber realizado los cambios que nos ha sugerido el cliente, pasamos a la fase de maquetación y desarrollo web.

En esta fase, convertimos el diseño web sobre Figma a código o módulos de WordPress según corresponda. Dependiendo del tipo de proyecto, esta suele ser la fase que más se demora. Además, en paralelo, se realizarán los desarrollos a medida necesarios por parte del encargado de desarrollo.

Revisión y testing página web

Una vez tenemos una versión bastante terminada de nuestra página web, por no decir 100% terminada. Realizamos una revisión concienzuda y un testing de ésta. Aquí trataremos de buscar errores que los propios usuarios encontrarían, probando el formulario, probando buscadores, testeando en diferentes dispositivos y navegadores, etc. 

Esta fase se hará antes de entregar al cliente, con el fin de darle el producto lo más terminado posible. 

Los cambios por parte del cliente, si se han seguido todos los pasos deberían ser mínimos, ya que hemos ido validando con él cada uno de los pasos: desde el wireframing, hasta el diseño y contenidos.

Entrega y publicación

Una vez terminado el proyecto, se entrega en el formato que se haya acordado. Si el cliente dispone de equipo de IT, es probable que ellos hayan dispuesto un entorno de prueba de manera que ahora ellos se encarguen de la publicación. Si no es así, deberemos publicarlo nosotros. Todo esto ha debido quedar claro desde la toma de requisitos, ya que una publicación o migración no es una tarea sencilla y conviene aclarar todos los pormenores.

Este es nuestro proceso el cual hemos ido evolucionando y mejorando año a año, es posible que en función del tipo de empresa éste cambie, pero las fases que aquí os mostramos son las que creemos esenciales para la creación de una página web. 

Si necesitáis ayuda en la estrategia de diseño y creación de vuestra página web, no dudéis en contactarnos.

Scroll al inicio