El propósito de este post es ofrecer una guía básica de ayuda, para dar a conocer las diferentes etapas que hay en el proceso y ejecución para diseñar un sitio web. También nos puede servir para diseñar un sitio web móvil o aplicación web. Para más adelante iré desglosando cada etapa en diferentes posts para tener una visión más completa.
1. Etapa de planificación inicial
Antes de ponerse a diseñar y desarrollar, hay que definir principalmente las expectativas que queremos generar en base a nuestro producto web.
Para ello hemos de analizar y definir:
Objetivos que queremos conseguir
Para poder medir la efectividad de las acciones realizadas. Es importante definirla al principio para que todo el mundo (equipo y clientes) tenga claro de lo que se va a realizar. Se puede empezar por un objetivo general y luego dividirlo en secundarios. Ejemplo: para vender, para dar un uso al público, como presencia de marca etc.
A quien va dirigido
Analizar, conocer y definir nuestros usuarios, cuáles son sus objetivos, necesidades y expectativas de nuestro producto. Para ello usaremos técnicas como las encuestas, los arquetipos de usuarios (personajes) y las historias de usuario
Y la infraestructura tecnológica que necesitamos para conseguirlo
Definir las tecnologías para poder desarrollar el funcionamiento y mantenimiento del sitio web. Que servidor utilizaremos, el gestor de contenidos a utilizar, el proceso de publicación, el servidor de base de datos serán esenciales para definir la arquitectura web de nuestro sitio.
2. Etapa de la definición de nuestro sitio web (AI)
Gracias a la Arquitectura de la Información (AI) nos permitirá organizar los contenidos, para ser encontrados y utilizados por los usuarios, de manera simple y directa.
Las fases a seguir son:
Definir el contenido del sitio web
Con las conclusiones de la etapa de planificación (objetivos y usuarios) hemos de definir más concretamente los contenidos que va a tener nuestro sitio. Para ello empezaremos con el inventario para poder organizar y estructura la información, después la clasificaremos por temática, funcional o orientada al usuario gracias a técnicas como el Card sorting para finalizar en el Benchmarking.
Definir la estructura del sitio web
En esta fase definiremos la forma que tendrá el sitio web con sus secciones, categorías, funcionalidades y sistemas de navegación. En esta fase no está incluida la fase del diseño visual o gráfico. El primer paso es definir que estructura tendrá nuestra web, puede ser lineal, de árbol o jerárquica y en red. Seguido de esta fase, crearemos el mapa web en el que se mostrará de manera práctica cuántas secciones tienen el sitio en desarrollo y los niveles de cada una. Para finalizar, definiremos los sistemas de navegación para acceder a estos contenidos, ya sean globales, específicos de la sección o contextuales
3. Etapa del diseño visual
Después de definir el contenido web y estructurado ya podemos empezar la etapa del diseño visual.
El proceso a seguir es:
Realización de Wireframes
Muchos procesos web ubican esta fase en la etapa de la AI. En mi caso creo que es mejor este en manos de los diseñadores (de experiencia, de interacción…), el wireframe es una representación esquemática y está enfocada a visualizar la distribución y comportamiento de los contenidos de la web. También lo podemos usar en pruebas de usabilidad. Las ventajas de usar wireframes es ayudar a centrarse en el diseño de contenidos y no en el diseño visual, y por otro lado, definir la organización y estructura en etapas previas al diseño y desarrollo se evitando cambios posteriores, reduciendo así costos y tiempos.
Diseño de la interacción
Definiremos en esta fase el comportamiento interactivo en respuesta a los usuarios, mediante iteraciones de análisis y pruebas con usuarios. Sobretodo priorizaremos la finalidad y la experiencia del usuario, teniendo en cuenta la usabilidad de la misma. Podemos utilizar los diagramas de flujo y los wireframes para conseguirlo.
Diseño visual o gráfico
Finalmente empezaremos la fase del diseño visual. Generaremos los gráficos acorde a los wireframes y al diseño de la interacción. También hay que tener en cuenta la identidad grafica de nuestro cliente.
4. Etapa del desarrollo del sitio sitio web
En esta etapa desarrollaremos del lado del servidor y del cliente para crear tanto la funcionalidad como toda la interfaz de usuario, dependiendo de las tecnologías utilizadas. En esta etapa realizaremos las pruebas de usabilidad que permitan realizar las modificaciones oportunas y asegurarse que los usuarios van a entender la forma en que está organizada la información.
Las fases a seguir son:
Maquetación de las plantillas html
Generaremos las diferentes plantillas que nos servirán para poder generar toda la información del sitio web. También generaremos todas las páginas estáticas de nuestro sitio
Programación
Es la fase de la integración de nuestros diseños y contenidos con nuestro gestor de contenidos y base de datos, más o menos, que no soy técnico, si hay alguno en la sala que me corrija.
Podemos diferenciar dos tipos de programación:
Front-end, relacionada con la interacción del usuario, en este tipo se programan las maquetas definiendo las áreas de contenido de cada una de ellas para posteriormente cargar el contenido dinámicamente a través del gestor de contenidos.
Back-end, es la programación y la configuración de las bases de datos que soportara la publicación de los contenidos de la web
5. Etapa de puesta en marcha y promoción
Y para finalizar sólo nos queda la etapa de puesta en marcha del sitio web y su promoción. Evidentemente antes de la estrena habrá que realizar una serie de pruebas para medir realmente las acciones que realizara el usuario así como las pruebas de rendimiento y carga.
Una vez puesta en marcha solo nos quedara la promoción del sitio, registrando el sitio en buscadores, generar enlaces con otros sitios y pensar en tota la estrategia de captación y fidelización de nuestros usuarios. Evidentemente sin olvidar de la presencia de nuestro sitio en las redes sociales. Para esta etapa mejor confiar en los expertos sobre marketing digital.
Deja una respuesta