Tecnología de la Comunicación III

Flujo de trabajo en la creación de páginas y aplicaciones web

El desarrollo 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.

Veamos ahora 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 a
desarrollar. Son esquemas o borradores de la construcción de un sitio web. Apariencia de las
ventanas, posición de los botones, lugares de imágenes y textos son lo principal a ubicar en estos
bocetos. 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.

Estos bocetos, son también llamados wireframes, y de ellos depende la interactividad del sitio y su
ergonomía, lo que se traduce en la comodidad que el usuario obtendrá al navegar por el sitio.
Aunque mucho de la ergonomía y la interactividad se basa en la intuición del usuario, un mal boceto
es lapidario para un sitio web.

1
Tecnología de la Comunicación III

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: nuestro principal objetivo es centrar nuestros recursos en el uso que
tendrá el programa.

Para ello, podemos utilizar Sketch App (https://www.sketch.com/get/), 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 (https://www.adobe.com/la/products/xd.html) también un buen candidato que debemos
tener en cuenta.

2
Tecnología de la Comunicación III

¿Quiénes pueden crear bocetos online?

Ciertamente cualquier persona puede involucrarse tan profundo en su proyecto como para crear
un wireframe de su web, sobre todo si es un profesional. Pero si los conocimientos son limitados,
lo mejor es dejarlo en manos de los profesionales indicados.

Community Manager: Este profesional del marketing y la comunicación corporativa debe conocer
cómo modificar y crear prototipos online de páginas a fin de adaptarlo de la mejor manera a nuevas
tendencias.

Jefe de proyecto: Hablamos de un diseñador web o programador, un profesional que está como pez
en el agua y que puede crear desde cero cualquier web.

Para los trabajos en equipo, el wireframe resulta vital, pues hace más sencilla la comunicación y lo
basa todo en hacer real un diseño ya previamente aprobado.

Herramientas para creación de prototipos online

Tal y como era de esperarse, para crear bocetos existen diversas herramientas. Los trabajadores del
siglo XXI no andan por la vida con hojas rayadas a lapicero.

Algunas de esas herramientas son: Balsamiq mockups, Lumzy, Jumpchart, Mockingbird, Pencil
Project.

Lumzy: Es una herramienta muy completa, lo mejor es que es colaborativa, por lo que más de
una persona puede estar en un proyecto aportando ideas.

Balsamiq mockups: Es una herramienta paga, pero vale la pena contar con sus servicios. Tiene
muchos botones insertables y un montón de simuladores de interfaz.

Jumpchart: Los wireframe aquí creados son tanto estáticos como interactivos, por lo que es una
herramienta funcional y rápida.

Mockingbird: Es otra opción paga, pero mucho menos costosa que el resto del mercado. Eso sí,
solo permite trabajar en 2 proyectos a la vez.

Pencil Project: Lo mejor de esta herramienta son la gran cantidad de plantillas que tiene en su
biblioteca. Lo cual facilita el trabajo de creación.

En definitiva, conocer de bocetos de páginas web nos hará crear el mejor estilo de sitio web para
los usuarios y navegadores.

Ejemplo de wireframe creado con Sketch:

3
Tecnología de la Comunicación III

 Mockup

El Mockup de un proyecto es una evolución del Wireframe, en el que se presenta ya una línea
estética definida. Se ven colores, logos, imágenes, etc. La experiencia de uso quedó clara en el paso
anterior y en el mockup tenemos lo mismo, pero presentado de una manera bonita y tal como debe
tener el aspecto final de la aplicación.

Para entendernos, las pantallas que encontraremos en el mockup serán las mismas que en el
wireframe, solo que en vez de cuadraditos o circulos esquemáticos, ya tenemos el logo de la
empresa, imágenes en el estilo que usaremos en el producto final, etc.

Ahora podemos ver una imagen de pantallas de una app, pero ya en lo que sería un mockup, donde
se ha comenzado a definir la parte estética.

4
Tecnología de la Comunicación III

 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
indicadas 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.

No todos los proyectos de diseño deben acabar en el prototipo. Sin duda que el prototipo ayudará
a entender si el resultado es el que realmente se quiere obtener, ahorrando horas de desarrollo si
luego se aprecia que hay que hacer cambios (y recordar que el desarrollo suele ser mucho más caro
y complejo, por llevar mucho más tiempo para ser realizado). Sin embargo, se puede contratar a un
diseñador de experiencia de usuario que sólo realice un wireframe, a un diseñador estético que
entregará el mockup, etc.

Actividad:

Ver Video explicativo sobre el diseño de Apps: https://youtu.be/-AGLzIKDv0s

Visitar la siguiente página web: Diseño Web: Importancia del Diseño Gráfico en la Creación de
Páginas Web - http://www.karakana.es/diseno-web/blog/diseno-web-importancia-del-diseno-
grafico-en-la-creacion-de-paginas-web

Visitar e Iniciar Sesión en los siguientes sitios de herramientas on line para el prototipado:

https://www.invisionapp.com/

https://marvelapp.com/

5
Tecnología de la Comunicación III

Bibliografía:

Horses Developers - Wireframes (Septiembre 2017): prototipos o bocetos de páginas web.

Desarrolladores web.com - Flujo de trabajo habitual en el diseño web y apps. (Abril 2017)
Recuperado de https://desarrolloweb.com/articulos/flujo-trabajo-habitual-diseno-web-apps.html