was successfully added to your cart.

Si desarrollas proyectos Web, seguramente te han ocurrido un sin fin de peripecias con los clientes, con los pagos, organización, retroalimentación y todo lo que este proceso implica.

Como en todas las disciplinas, no existe una forma única de hacer las cosas; sin embargo, es muy importante tener una forma propia. ¿A qué me refiero con eso? Al hecho de que existe gente y empresas que se dedican a esto y que no tienen una metodología de trabajo clara. La fórmula para el caos seguro. Como lo dice Mike Monteiro en Design is a Job: Ten un proceso y síguelo.

Nunca faltará el cliente o persona que intentará cambiar tu proceso, querer que en lugar de iniciar con cierta etapa, te la saltes y hagas otra cosa primero, que inicies sin que te paguen anticipo, entre mil cosas más. No deberías hacerlo porque todo se saldrá de control. Si un cliente me pide modificar mi proceso suelo decirle que la razón por la que esos proyectos que vieron en nuestro portafolios fueron exitosos es el hecho de que tenemos un proceso y lo seguimos como tal, sin permitir que lo modifiquen. Tu proceso es tu fórmula, no deberías cambiando sin razón. Quizás sólo funciona para ti (o quizás funcione para los demás) pero créeme, la mayoría de los proyectos fallidos se debe al mal entendimiento de cómo se debe llevar a cabo un proceso de desarrollo Web.

Un proceso de desarrollo Web puede ser muy simple y con pocas personas o ser muy complejo y con decenas de personas implicadas, todo depende de lo que se tenga qué hacer. Pese a que sea tan variable, existe una línea de acción general que seguimos en Catarsis para garantizar que el proceso podrá ser realizado de inicio a fin y de la manera menos dolorosa para todos. Hay que mantener las buenas relaciones laborales y no propiciar el caos nosotros mismos.

El proceso de desarrollo seguido por Catarsis, el cual cuenta con 5 etapas generales.

Te presento el proceso de desarrollo seguido por Catarsis, el cual cuenta con 5 etapas generales.

Como puedes notarlo, nuestro proceso es generalizable para una gran variedad de proyectos de desarrollo Web y cuenta con etapas en las que realizaremos actividades específicas para tener un progreso constante y lo menos iterativo posible; es decir, siempre buscando no tener que repetir las acciones individuales de cada etapa. Por ejemplo, la intención siempre será que si ya trabajamos en el diseño gráfico y esté ya fue aprobado, entonces no tendremos que regresar a diseñar en el futuro. Lo mismo ocurre con el resto de las etapas.

1. Definición del problema

En esta etapa deberás definir qué es lo que se conseguirá a través del proyecto, qué necesitarás, cuánto costará, qué requisitos técnicos existirán y todo aquello que sea necesario para que puedas tomar decisiones acerca del futuro desde el inicio del proyecto.

El no pasar formalmente por esta etapa es un cáncer que invade la industria del desarrollo Web. Las personas quieren tiempos y costos inmediatos, no quieren pagar por el trabajo realizado, no entienden qué es lo que harás y esperan que todo sea como una varita mágica que genere su sitio en un solo click. Lamentablemente muchos desarrolladores se someten a esta dinámica y permiten que sus proyectos no se planeen correctamente. Esta etapa es precisamente para eso: planear. Analizar la viabilidad del proyecto. ¿Necesito algún lenguaje de programación especial? ¿Alguna tecnología en específico? ¿He realizado algo como esto previamente? ¿El tiempo que tengo es sensato para tener éxito en el desarrollo? ¿Cuál es el objetivo final que mi cliente quiere alcanzar a través del desarrollo del proyecto? ¿Puedo cobrar lo que me merezco? Todas esas son preguntas que tendrás que responder claramente si deseas que tu proyecto llegue a buen fin.

Planear y cotizar un proyecto Web es similar a construir una casa: todo depende de lo que el cliente necesite, las tecnologías que se deban utilizar, los servicios que tendrá, su estructura, etc. Si desarrollamos proyectos de calidad, probablemente no podremos tener una tabla de costos fijos (salvo que sean costos siempre muy elevados) para todo tipo de proyecto, porque cada uno es muy distinto y cada implicación tendrá un impacto en costos, tiempo, capital humano y demás recursos relacionados.

Todo depende de tu forma de hacer negocios, pero algunas de las cosas que jamás deberías permitir son: trabajar sin un anticipo, comprometerte a tiempos imposibles, comprometerte a cosas que no sabes si puedes lograraceptar toda condición que el cliente ponga, reducir los costos de tu cotización sin reducir los beneficios que el cliente obtendrá, no aclarar cuánto costará exactamente tu trabajo, prescindir de una agenda de trabajo y no cobrar por el beneficio económico que el cliente obtendrá a través del uso del proyecto que desarrollas para él.

Planear y cotizar un proyecto Web es similar a construir una casa: todo depende de lo que el cliente necesite.

Pasos generales de esta etapa

  1. Identificación de metas y objetivos a alcanzar por medio del proyecto.
  2. Identificación de requisitos técnicos y especificaciones de funcionamiento.
  3. Preparar documento de requerimientos y hacer una lluvia de ideas con tu equipo de trabajo.
  4. Analizar si es necesario un sitio responsivo y/o aplicaciones móviles.
  5. Elaboración del mapa del sitio Inicial.
  6. … y después de todo lo anterior, será un buen momento para cotizar.

Herramientas y software requerido

  • Herramienta para seguimiento de prospectos, puede ser desde un archivo Excel, hasta un CRM.
  • Herramienta para registro de entrevistas con el cliente, requisitos y lluvias de ideas. Puede ser desde algo muy simple como Google Keep o Google Docs. Procura que se pueda tener acceso en la nube para que te comuniques con tu equipo de trabajo.

2. Experiencia de Usuario (UX)

Una vez que tenemos definido el alcance del proyecto, su costo, características, desafíos, riesgos y que ha sido aprobado para su desarrollo (con el correspondiente anticipo), es momento de trabajar en el diseño de la experiencia de usuario.

En esta etapa planearemos funcional, estructural y gráficamente absolutamente todo lo que ocurrirá más adelante durante el desarrollo del proyecto, además de planear la manera en que nuestros usuarios harán sus actividades y la forma en que nos comunicaremos con él.

En el artículo anterior hablamos un poco acerca de algunos malos entendidos cuando trabajamos con Diseño de Experiencia de Usuario. Esta es personalmente mi etapa favorita de todo el proceso de desarrollo debido a que es el momento en que tomaremos decisiones y pensaremos de qué manera resolveremos todos los problemas de interacción y de estructura.

En ocasiones pensamos que tenemos todo resuelto y en nuestra cabeza puede parecer muy simple, pero a la hora en que tenemos que distribuir elementos en pantalla es cuando inician los problemas. Siempre piensa que lo que harás en este momento es crear el plano en que se basará todo lo que harás en el futuro para el proyecto (y más te vale que sea un excelente plan, por el bien de todos).

En ocasiones pensamos que tenemos todo resuelto y en nuestra cabeza puede parecer muy simple, pero a la hora en que tenemos que distribuir elementos en pantalla es cuando inician los problemas.

Algunas de las preguntas que deberás responder son: ¿Cómo navegará el usuario? ¿Dónde y cómo puede registrarse e iniciar sesión? ¿Es necesario permitir búsquedas y cómo se realizarán? ¿Qué áreas funcionales existirán en el sitio? ¿De qué manera le habla el sitio a nuestro usuario? ¿De qué manera se mostrarán los contenidos del sitio? ¿Será un sitio de una sola página? ¿Qué formatos de imagen usaremos? ¿Existirán bases de datos y/o administradores de contenido? ¿Qué lenguajes de programación utilizaremos?

Todas las preguntas anteriores te servirán para aterrizar tus ideas y establecer los mecanismos y condiciones que seguirás para estructurar tu sitio. Es aquí cuando utilizarás una de las herramientas más poderosas para todo diseñador de experiencia: los wireframes o mockups.

Un mockup es una versión diagramada del sitio en la que, preferentemente, debes deslindarte totalmente de aspectos de diseño gráfico como el color, iconografía y fotografía. La intención es que te concentres al 100% en la forma en que se interactuará con el contenido y no en la forma en que se verá (para eso existe la siguiente etapa, diseño gráfico).

Algunas personas acostumbran saltarte este proceso y pasar directamente al diseño gráfico, pero por experiencia te aseguro que la mejor manera de tomar buenas decisiones es planear correctamente todo y tener oportunidad de retroalimentar con el cliente y el usuario final antes de diseñar y programar el proyecto entero. Si piensas en las decenas de horas de trabajo y de discusiones con el cliente que te ahorrarás, no volverás a dudar en utilizar mockups y diseñar la experiencia como se debe.

Mis dos herramientas favoritas para la creación de mockups son: Balsamiq Mockups y Moqups.com. La primera es una herramienta de mockuping para escritorio, mientras que Moqups.com es una aplicación en la nube con la que podrás almacenar todos tus proyectos en tu cuenta de usuario, compartirlos y modificarlos colaborativamente. Ambas son soluciones excelentes para que resuelvas la interacción del sitio y puedas prever cualquier cuestión funcional que en el futuro de tu proyecto pudiese presentarse.

A la izquierda, Balsamiq Mockups y a la derecha Moqups.com.

A la izquierda, Balsamiq Mockups y a la derecha Moqups.com.

Pasos generales de esta etapa

  1. Elaboración y firma de contrato de trabajo y establecimiento de políticas.
  2. Cronograma y establecimiento de Deadline (incluyendo el programa de pagos).
  3. Generación de versiones a bloques (mockups) de la estructura funcional del sitio.
  4. Elaboración de las versiones móviles que se requieran.
  5. Análisis de la interacción del usuario con el sitio.
  6. Retroalimentación con el cliente hasta su aprobación.
  7. El producto de esta etapa son todos los mockups del proyecto incluyendo sus estados y variantes gráficas.

Herramientas y software requerido

  • Algún software de mockuping como Balsamiq Mockups o Moqups.com.
  • Opcionalmente, alguna plataforma para registrar los comentarios de la retroalimentación del equipo de desarrollo y del cliente. Un ejemplo es inVision, aunque hablaremos más de ésta aplicación Web en la etapa de diseño gráfico.

Dado que este artículo se ha tornado un poco extenso, la próxima semana continuaremos hablando de las 3 etapas restantes: diseño gráfico, desarrollo y publicación; no te lo pierdas.

¿Cuál es tu proceso para desarrollar proyectos Web?

Sigue la revista de Catarsis en Flipboard
Suscríbete a Catarsis en Play Kiosco

Author Josué E. Pizano

Amante del diseño de Experiencia de Usuario (UX), evangelista de CSS, adicto a la tecnología y apasionado del desarrollo Web, el cine, la comida y la música.

Más entradas de Josué E. Pizano

Deja una respuesta