Así se inicia…

A principios del año 2019, un director de proyecto de Wenea se puso en contacto conmigo para abordar el presente proyecto. El lideraba un proyecto de creación de un aplicación de móvil para gestionar la carga de coches eléctricos en sus estaciones.

Mi labor en el proyecto era la creación de el interfaz gráfico, y mi entregable era una maqueta HTML / CSS con todos los elementos gráficos necesarios. El equipo de desarrollo, con ese entregable, integraba los servicios utilizando Cordova.

Este proyecto se desarrollo totalmente on-line, en ningún momento tuve contacto físico con cualquier de las personas involucradas en el proyecto (Jefe de proyecto, responsable de marketing, equipo de desarrollo).

Mapa de navegación.

En un primer momento, con unas pequeñas…muy pequeñas especificaciones, cree un mapa de navegación. Este mapa nos situaba a todos los interlocutores ante las necesidades del proyecto y me permitía poder elaborar un presupuesto basado en el número de pantallas a prototipar, diseñar y maquetar.

A parte de toda la aplicación, también era necesario crear un Tutorial de los casos de uso básicos para orientar al usuario en su realización.

Web de gestión de proyecto.

Antes de iniciar el proyecto cree una web accesible por todos los integrantes del proyecto (Jefe de proyecto, desarrollo y marketing) protegida con una contraseña, con la intención de colgar toda la documentación y distribuir todos los elementos necesarios en el proyecto.

Creación de los wireframe.

El siguiente trabajo a realizar fue la realización de los wireframe. Para ello utilizo Axure, que permite incorporar bastantes elementos de diseño, produce un entregable que puede ser distribuido para que el resto de integrantes del proyecto puedan ver en su navegador todo el navegable.

Documento de seguimiento.

Para poder trabajar de forma optima en las reuniones de seguimiento y validación de los wireframe, junto con el navegable distribuía una hoja en donde aparecía una imagen de cada una de las pantallas, y tantas columnas como interlocutores había, de manera que ellos completaban en las columnas los comentarios sobre cada una de las pantallas y en la reunión de seguimiento teníamos esas hojas delante y solo eran para aclarar dudas. Estas hojas también servían como informe de seguimiento.

Diseño detallado.

El siguiente trabajo que se realiza es la creación del diseño de diferentes pantallas. Desde el departamento de Marketing facilitan la tipografía, los colores y los elementos de marca. El trabajo que se realiza es la creación de una guía de estilo que refleje todos los elementos a parte de las pantallas diseñadas ya mencionadas.

Maquetación.

El siguiente trabajo que queda es la maquetación, utilizando todas las herramientas que proporciona HTML5 y CSS3, y una a una, se va maquetando cada una de las pantallas. Se utiliza una hoja de estilo común para todas las pantallas que contienen los elementos comunes (colores, cabecera, tipografía…) y cada una de las pantallas tiene su CSS propia con todas las especificidades de cada pantalla.

El HTML incluye desde utilización de rejilla hasta SVG en la pantalla animada del proceso de carga.

Tutorial.

Por último se elabora un varios tutoriales, uno de ellos el cual aparece al iniciar la aplicación la primera vez y que le ayuda al usuario a inicar la aplicación, y luego una colección de otros 8 tutoriales para casos de uso mas concretos.

>