8 Fases del proceso de desarrollo web

Jose A. Cely • 3 Mayo 2018
Inicie sesión o registrese para enviar comentarios

Como desarrolladores, a menudo pensamos en la Web en términos de wireframes, sistemas de administración de contenido (CMS) y código. Pero los diseñadores inteligentes saben que el éxito de un diseño web no está determinado por el código, la integración de las redes sociales o los gráficos geniales. Diseñar un sitio web ganador requiere una estrategia en línea bien pensada centrada en alcanzar los objetivos de la organización, que puede ser desde atraer visitantes para comprar productos hasta lograr que el público entienda un problema y presentar a los visitantes una nueva marca.

Como diseñador o líder de proyecto, puede convertirse en uno de los miembros más valiosos e influyentes del equipo web cuando comprenda cómo desarrollar una estrategia en línea. Hay muchas personas que pueden escribir códigos y tener opiniones sobre el diseño y los matices del sitio, pero pocos tienen la variedad de talentos y herramientas necesarias para crear un sitio web que ayude a una organización a lograr sus objetivos. Este curso le proporcionará las herramientas fundamentales que necesita para dirigir un proyecto de diseño web exitoso. En lugar de centrarnos en HTML, CSS o programación, nos centraremos en las estrategias clave, el contenido y los elementos de diseño necesarios para crear una presencia web estratégica.

photo from Shutterstock
Foto de Shutterstock

Fases del proceso web

El proceso de diseño web no es diferente a otros procesos de comunicación. Si está familiarizado con el desarrollo de un brief creativo, un plan de relaciones públicas, un plan de comunicación o un nuevo producto, las fases le resultarán muy familiares. Las fases del proceso de diseño web incluyen los siguientes pasos.

Definición del proyecto

Las organizaciones tienen la necesidad de comunicar a las partes interesadas sus posiciones sobre los problemas y hacer que el público conozca sus productos y servicios. Muchas veces la necesidad de comunicación, como un sitio web, se desencadena por un cambio de dirección estratégica o una nueva oferta. Identificar las razones de la existencia del sitio y lo que se supone que debe lograr es el primer paso en el proceso. Las metas y objetivos que se establecen al principio del proyecto informan todas las decisiones futuras, desde la estructura del sitio y las convenciones de nomenclatura utilizadas en la navegación hasta el diseño visual del sitio. El primer paso en el proceso de definición es entrevistar a las partes interesadas de la organización para identificar los objetivos estratégicos del sitio, comprender las necesidades clave de la audiencia e identificar a los principales competidores. El objetivo del paso de definición es identificar tres resultados clave medibles que están directamente relacionados con los objetivos estratégicos de la organización. El desafío en este paso es limitar el número de objetivos. La mayoría de las organizaciones tendrán más objetivos de los que saben, y cada departamento cree que los objetivos de cada unidad individual son los más importantes. Ser capaz de enfocar los objetivos organizacionales facilitará el desarrollo del sitio y hará que el producto final sea más efectivo.

Una vez completada toda la información y las evaluaciones recopiladas de las entrevistas a los interesados, se deben recopilar en un resumen del proyecto bien formateado. (La tarea para la Lección 4 contendrá un resumen del proyecto que puede consultar). El resumen (brief) contiene los siguientes elementos:

  • Resumen del proyecto: describe la descripción general del proyecto, los antecedentes de la organización, el entorno en el que se encuentra la organización, las personas a las que sirve la organización y el valor único que proporciona a su público.
  • Objetivos: ¿Cuáles son dos o tres objetivos medibles específicos que el sitio debe alcanzar? Los objetivos claros le permiten al equipo web concentrarse en lo que proporcionará el mayor impacto y hacer avanzar a la organización.
  • Público objetivo: ¿Quién ayudará a la organización a alcanzar sus objetivos establecidos? La mayoría de las organizaciones hablan con múltiples organizaciones (como clientes, partes interesadas, audiencia interna, proveedores, socios, accionistas y / o instituciones gubernamentales). Los perfiles de audiencia incluyen datos demográficos, psicográficos, percepciones de marca, necesidades de audiencia, objetivos en línea y tareas rutinariamente realizadas.
  • Mensajes: ¿Cuáles son los mensajes clave que atraen y motivan a las audiencias clave a involucrarse con la organización? ¿Cuáles son los mensajes clave de la marca que ayudan a diferenciar a la organización de sus pares?
  • Competencia: ¿Quiénes son organizaciones rivales que ofrecen ofertas similares a su audiencia? Incluya una descripción general de los sitios web de las organizaciones de la competencia, teniendo en cuenta la marca visual, los mensajes, la navegación, las llamadas a la acción (call to action) y los diferenciadores clave.

Alcance del proyecto

Definir el alcance del proyecto es un paso crítico. Una de las frustraciones más comunes con los proyectos web es el alcance lento. Al crear un plan de alcance del proyecto bien definido que describa las actividades y entregas específicas, junto con cronogramas específicos, podrá establecer claramente expectativas para sus clientes. Una de las formas más comunes de seguir proyectos web es mediante el uso de un diagrama de Gantt. Un diagrama de Gantt no solo describe las principales actividades sino también las tareas asociadas con cada actividad y las fechas de inicio y finalización. El diagrama de Gantt proporciona una referencia visual para el equipo, que muestra el cronograma de cada paso y las dependencias entre los pasos. El diagrama de Gantt también crea responsabilidad entre el equipo web y el cliente (que podría ser un cliente externo o simplemente su jefe), haciéndole saber al cliente y al equipo que el cronograma de entregas depende de que cada persona alcance sus metas; si alguien pierde una cita por día, el horario cambia por día.

Wireframes y arquitectura del sitio

La arquitectura del sitio incluye el mapa del sitio y las estructuras de las páginas. La creación del mapa del sitio asegura que ha considerado todas las páginas clave del sitio, mostrando su relación entre ellas y definiendo cómo debe estructurarse la navegación general. Wireframes proporciona una vista detallada del contenido que aparecerá en cada página. Aunque no muestran ningún elemento de diseño real, los wireframes proporcionan una guía para definir la jerarquía de contenido en la página.

Diseño visual

Una vez que el plan para el sitio (blueprint) se ha definido a través de la creación del mapa del sitio y de los wireframes, el siguiente paso es crear un estilo visual. El estilo visual general probablemente estará determinado por la marca visual de la organización; el objetivo es conectar la Web con todas las demás formas de comunicación de la organización. La marca de la organización juega un papel importante en esta parte del proceso, ya que los diseñadores querrán transmitir visualmente las ideas clave de percepción de la marca dentro del diseño.

Desarrollo del sitio

Con los diseños aprobados, es hora de desarrollar el diseño de las páginas, desarrollar contenido nuevo y refinar contenido antiguo, crear videos, presentaciones de diapositivas, podcasts y otros medios que aparecerán en el sitio, así como comenzar a construir el HTML y el CSS de el sitio.

Prueba del sitio

Antes de que se lance el sitio, se colocará en un servidor de producción donde solo las audiencias internas y cualquier persona con quien comparta el enlace puedan verlo. Las pruebas del sitio son críticas ya que inevitablemente habrá problemas que deben abordarse antes de que el sitio se active. No hay nada que erosione una marca más que un sitio que no funciona correctamente o que tiene faltas de ortografía o elementos de diseño rotos. En esta etapa, el sitio deberá revisarse en múltiples navegadores (Firefox, Safari, Internet Explorer) y múltiples dispositivos (computadoras portátiles, tabletas y dispositivos móviles) para ver si ocurren los cortes.

Lanzamiento

El gran día. Has probado el sitio, lo han revisado y aprobado las partes interesadas del proyecto, y estás listo para su lanzamiento. Pero una vez que se lanza el sitio, el proyecto no ha terminado, debe estar preparado para responder a los comentarios de los usuarios que se adaptan al nuevo sitio. Espere realizar algunos cambios inmediatos en el sitio, como arreglar enlaces rotos, editar copias y hacer ajustes. La Web es un medio fluido que cambia a diario, si no cada hora, el cambio es inevitable.

Mantenimiento del sitio

Los sitios web son entidades que viven y respiran y necesitan cuidados y mantenimiento constantes. Actualizar el contenido, realizar cambios en el backend y arreglar enlaces rotos es todo un trabajo diario. Todas estas fases son críticas para el proceso de diseño web. Pero el hilo conductor del proceso es la estrategia: el deseo de lograr un objetivo, hacer avanzar a la organización y prosperar en un entorno competitivo. Echemos un vistazo a la estrategia, cómo se formula y cómo se traduce en la Web.

----------------------------------------------------------------

Nota del editor: El anterior es un extracto de la primera lección del curso HOW Design University course de Dave Holston, Managing a Web Design Project from Start to Finish. En este curso, Dave Holston les enseña a los estudiantes sobre las fases clave de investigación y planificación que informan el proceso de diseño en línea, y sobre las herramientas y técnicas de administración de proyectos que pueden crear ventajas para usted como gerente. Al final, tendrá la capacidad de ofrecer un sitio web estratégicamente enfocado para atraer, mantener y convertir visitantes.

Este artículo es una traducción al español del original http://www.printmag.com/featured/phases-of-the-web-design-process/