El flujo de una página web y de aplicaciones web.
El desarrollo y creación de un proyecto web pasa por diferentes estados hasta su publicación, por lo que es necesario establecer un flujo de trabajo que organice las diferentes etapas, minimice los errores y mantenga siempre el foco en el aspecto, funcionalidades y experiencia de uso de nuestra aplicación y sitio web. A continuación, te mostramos el flujo de trabajo más habitual (o, al menos, recomendado) que podemos utilizar y que nos permitirá gestionar con éxito nuestros proyectos web.
Boceto
El boceto o bosquejo es el esqueleto del diseño de la app o página web. Es el primer paso y tiene el objetivo de distribuir el espacio, la ubicación de contenidos y las funcionalidades que vamos desarrollar. No se incluye color ni estilo o gráficos; sólo una representación de líneas y vértices.
Disponemos de multitud de herramientas que nos facilitarán la tarea, como hojas de papel especiales, que cuentan con el marco de un navegador sobre las que diseñar las pantallas, o los patrones stencil, reglas con dibujos frecuentes de interfaz de usuario y otros elementos.
Mucha gente se suele saltar esta primera etapa y sustituirla por un esquema con las anotaciones o ideas básicas que se toman en las reuniones con el promotor o cliente del proyecto, cuando describe sus necesidades. Esto nos llevaría directamente al siguiente paso, el Wireframe.
Wireframe
Con la herramienta adecuada y desde un ordenador, distribuiremos las pantallas con las que contará la aplicación. Lo haremos a través de dibujos simples, anotaciones y flechas. De esta forma, tendremos de manera esquemática toda la estructura que mostrará. El wireframe debe de estar libre de todo componente estético. Sólo tendremos un esquema que deberá ofrecer exclusivamente la información sobre la usabilidad del proyecto. Tampoco es necesario en esta fase utilizar imágenes, logos o colores: nuestra principal objetivo es centrar nuestros recursos en el uso que tendrá el programa.
Para ello, podemos utilizar Sketch App, una aplicación con la que muchos desarrolladores y diseñadores web se sienten muy cómodos por sus muchas prestaciones y funcionalidades, aunque no es la única alternativa interesante. El programa Experience Design de Adobe también un buen candidato que debemos tener en cuenta.
Mockup
El mockup es un prototipo que proporciona, al menos, una parte de la funcionalidad de un sistema y permite realizar pruebas del diseño más elaboradas, ya que es la evolución o lo que le sigue al wireframe e incorpora aspectos estéticos. En esta parte, podremos ver con qué colores contará, las imágenes que utilizaremos, los logotipos, etc. Es decir, es parecido al paso anterior pero el esquema ya no es tan simple, sino que se acerca a la apariencia y aspecto final de la aplicación.
Prototipado
Con el prototipo creado podremos trastear con diferentes interfaces y presentar pantallas de la aplicación. Aquí no tenemos que incluir ninguna línea de código porque utilizamos programas como Marvel App o Invision App, que se encargan a golpe de clic de insertar eventos sencillos, como áreas calientes que nos llevarán a las diferentes pantallas que componen nuestro programa. De este modo, conseguiremos una visión muy real de lo que llegará a ser la aplicación final y ahorraremos muchas horas de desarrollo.
En la sección de Programación de este blog encontrarás numerosos tutoriales y artículos prácticos de recursos como bases de datos o WordPress que te pueden resultar útiles para poner en marcha cualquier proyecto web.