was successfully added to your cart.

Siguiendo con la temática de la semana pasada, hoy hablaremos de las tres etapas restantes del proceso de desarrollo Web. Ya abordamos lo relacionado a las etapas de Definición del Problema y Diseño de Experiencia (UX). Si no leíste el artículo anterior, puedes hacerlo aquí.

Hoy nos enfocaremos en las últimas 3 etapas del proceso.

Hoy nos enfocaremos en las últimas 3 etapas del proceso.

3. Diseño gráfico

Para llegar a esta etapa, previamente debimos haber generado los diagramas a bloques (mockups) de todo nuestro proyecto, por lo que en la etapa de diseño gráfico dejaremos un poco de lado la estructuración funcional y nos orientaremos totalmente a la forma en que el proyecto se comunica visualmente con el usuario. Como lo dice mi buena amiga Esa Mtz: cuando tenemos un diseño de experiencia con una estructura bien planeada, el diseño gráfico se trata de vestir esa estructura. A lo que ella se refiere es a que puede olvidarse un poco de tener que estar resolviendo problematicas de usabilidad y se puede enfocar únicamente en lo que es su labor dentro del proceso: diseñar gráficamente.

Pareciera algo muy obvio el decir que el diseñador se dedique a diseñar, pero es sorprendente la cantidad de gente que contrata diseñadores gráficos y pretende que su actividad incluya la estructuración funcional de proyectos y la previsión de problemas complejos de administración de contenidos (demás asuntos propiamente de programadores).

Cuando tenemos un diseño de experiencia con una estructura bien planeada, el diseño gráfico se refiere a vestir esa estructura.

Esa MtzDiseñadora Web

Una de las intenciones de pasar por la etapa de Diseño de Experiencia es evitar que tengamos que estar diseñando gráficamente una y otra vez cada que tengamos que modificar un aspecto funcional. Generalmente le digo a la gente que si haces que el diseñador gráfico resuelva la funcionalidad de todo el proyecto, seguramente hará todo lo que está en sus manos para lograrlo, pero no puede hacerlo sólo; necesita los conocimientos de las áreas de programación, servidores y del modelo de negocio del cliente (eso por mencionar algunos de los conocimientos requeridos para diseñar experiencia). No estoy diciendo que sea imposible que lo logre, pero sí es muy probable que sea un proceso muy reiterativo en el que tendrán que estar repasando muchas veces lo mismo y, aún así, quizás se les pueda pasar algún detalle. Yo en lo personal soy muy práctico al designar las actividades de mi equipo de trabajo: que el diseñador diseñe, que el programador programe, que el administrador administre. Suena lógico, ¿no?

Habiendo aclarado lo anterior, la actividad que habremos de realizar aquí es la de generar todas las pantallas y elementos estructurales del sitio en formato de imagen, ahora sí trabajando en el uso del color, tipografía, espacio, formas, estilos, iconografía, fotografía y demás aspectos relacionados con la comunicación visual del proyecto. Recuerda que un buen proceso es el que distribuye las actividades de una manera lógica y progresiva. Si haces las cosas en orden y con calidad, no tendrás que regresar a planear ni rediseñar mil veces.

Una segunda actividad que deberás realizar es la de retroalimentar con tu equipo de trabajo y tu cliente en relación a la estrategia gráfica que quieres aplicar. Es muy importante que utilices alguna plataforma o aplicación que te ayude a dar seguimiento a los cambios. En el artículo Cómo obtener retroalimentación sin morir en el intento te damos algunos tips importantes para que esta actividad sea una experiencia positiva para todos.

Si eres diseñador gráfico seguramente te enamorarás de inmediato de inVision; si no lo eres, igualmente te encantará.

InVision cuenta con todas las herramientas que necesitas para obtener buena retroalimentación y ayudar a que tu comunicación sea mucho más eficiente. Si eres diseñador gráfico seguramente te enamorarás de inmediato de inVision; si no lo eres, igualmente te encantará.

Al final de esta etapa deberás tener aprobados los archivos editables de la estructura completa de tu sitio Web con todas sus pantallas y elementos gráficos. Generalmente esto se realizará en Adobe Photoshop o Adobe Illustrator; también puedes pedirle al diseñador que genere todas las fotografías e iconos de manera independiente para que puedas agilizar la actividad de la etapa de desarrollo/programación. Recuerda utilizar el formato SVG para hacer más eficiente la implementación de vectores.

Pasos generales de esta etapa

  1. Combinación del plan de navegación, interface y funcionalidad.
  2. Diseño de personalidad del entorno.
  3. Creación de archivos de imagen con todos los estados de los elementos, navegación, tipografías, combinaciones de colores y variantes de estructuras gráficas.
  4. Elaboración de variantes responsivas del proyecto.
  5. Retroalimentación con el cliente hasta su aprobación final.
  6. Liquidación de los honorarios del diseñador gráfico.
  7. El producto de esta etapa son los archivos gráficos editables (PSD, AI, PDF, SVG, JPG, PNG, etc) del diseño terminado.

Herramientas y software requerido

  • Adobe Photoshop.
  • Adobe Illustrator.
  • Software para dar seguimiento a cambios y comentarios. Por ejemplo, inVision.

4. Desarrollo de software, programación

Ha llegado el momento de la programación. En esta etapa entran los ingenieros de software al rescate. La actividad que se realizará es la de convertir todo lo planeado, estructurado y diseñado gráficamente en un sitio Web funcional, hacer pruebas de funcionamiento, crear bases de datos, administradores de contenido y todo lo necesario para que el proyecto quede finalizado y funcionando en el servidor del cliente.

El proceso implica lenguajes de programación como HTML, CSS, JavaScript, PHP, ASPX (.NET), JSP y de tecnologías como WordPress, CodeIgniter, Joomla!, Shopify, Magento, WooCommerce!, por mencionar algunas Todo dependerá de las características del proyecto y de las habilidades del equipo de programación que se encargue de ejecutar el plan.

Es obligación del equipo de desarrollo garantizar la correcta visualización del proyecto en los navegadores de uso común (tanto para navegadores de escritorio como de dispositivos móviles) y corregir los errores que puedan generar. La realización de pruebas es un proceso complejo que se puede realizar con software especializado o de manera manual a través de pruebas in situ con los dispositivos. Sinceramente esta última opción siempre será la más confiable, puesto que cualquier entorno de simulación siempre tendrá un margen de error.

En esta etapa también deberás encargarte de configurar servidores y contratar dominios (de ser requerido) para posteriormente realizar la implementación de versiones de prueba que el cliente pueda revisar. Al igual que en otras etapas del proceso, será necesario que retroalimentes con el cliente hasta llegar a una versión del sitio lista para producción. Si todo tu proceso estuvo bien desarrollado, no habrá sorpresas. La funcionalidad y la estructura gráfica deberá ser exactamente igual que la que se planeó en etapas anteriores.

La funcionalidad y la estructura gráfica deberá ser exactamente igual que la que se planeó en etapas anteriores.

Pasos generales de esta etapa

  1. Programación (HTML, CSS, JavaScript, jQuery, PHP).
  2. Revisión de compatibilidad en los navegadores de uso común.
  3. Desarrollo y pruebas para dispositivos móviles.
  4. Gestión de servidores, pruebas en entorno de simulación y en entorno real.
  5. Producción del prototipo (alpha y beta) y versiones sucesivas.
  6. Revisión del prototipo por el cliente y realización de los cambios necesarios.
  7. El producto de esta etapa es el prototipo funcionando en el servidor de prueba.

Herramientas y software requerido

  • Cualquier entorno de desarrollo Web, puede ser de escritorio como Adobe Dreamweaver y Sublime Text o en la nube como Codio.com
  • Adobe Photoshop y Adobe Illustrator (suelen ser útiles si debes editar alguno de los recursos gráficos).
  • Se recomienda contar con dispositivos iOS y Android para realizar pruebas en entorno real con móviles.
  • Algún servidor de prueba para el montaje del prototipo (no querrás entregar el producto al cliente hasta que pague la liquidación del proyecto).

5. Publicación y Seguimiento

Llegar a esta etapa significa que estás a punto de finalizar el proyecto. Una vez que el prototipo es revisado y el cliente lo ha aprobado, es momento de transferir el proyecto al servidor final y bajo el dominio que se utilizará en producción. Generalmente la transferencia e implementación no será un proceso muy complejo o tardado (sobre todo si eres un desarrollador con buena moral y utilizas estándares de programación).

Además de la transferencia y el subsecuente pago de tus honorarios (porque supongo que no estarás trabajando gratis, ¿verdad?), es probable que se requiera de intervenciones futuras para medir los resultados obtenidos y establecer líneas de acción en caso de que éstos no estén siendo conseguidos como se debería.

Un aspecto que hay que resaltar es el de la garantía de tu trabajo, ¿tendrá garantía de por vida? ¿le darás un periodo de tiempo al cliente para verificar que no hay errores? ¿cobrarás por cada cambio o corrección que se haga? ¿prefieres una iguala mensual o quincenal? Todo esto depende totalmente de tu estilo de trabajo, pero es importante que quede clara la política que seguirás en relación a las actualizaciones del proyecto, porque si algo ocurre serás la primer persona a la que el cliente buscará y si no le dijiste que existirían costos, quizás acabes trabajando gratis (y no de muy buena gana).

Si algo ocurre serás la primer persona a la que el cliente buscará.

Comentarios finales

Pese a que esta serie de artículos ha sido un poco extensa, faltan aún miles de aspectos y detalles relacionados con el complejo proceso de desarrollar proyectos Web. En el futuro seguiremos tratando muchas de esas temáticas con mayor detalle. Lo que busco en este momento es que sepas que existen procesos para el desarrollo de proyectos e incluso metodologías bien establecidas y documentadas como SCRUM (de la cual probablemente hablemos en el futuro). Simplemente define tu estilo, la forma que funciona mejor para ti  y sujétate a un proceso que te permita eliminar ambigüedades y malas prácticas de desarrollo.

¿Qué temática te gustaría que tratemos con más detalle?

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