NoticiasBlog.

UX Fase de prototipado

3 febrero, 2017 | Diseño UX/UI

Tal y como comentamos en nuestro post “3 claves antes de empezar el diseño web” para poder empezar con las fase de prototipado de un proyecto web, deberíamos disponer de una información básica (público objetivo, arquitectura de la información y contenido) que nos guíe para saber qué es lo que tenemos que comunicar a través del diseño y poder mejorar la experiencia de usuario (UX).

Con wireframes, mockups y prototipos podemos crear una base sólida sobre la que se asentará nuestro proyecto antes de empezar la fase de desarrollo. Son herramientas que nos ayudan a plasmar lo más fielmente posible las pantallas que conformarán nuestro producto final (web, app…) así como su flujo de navegación.

Son herramientas que ayudan a todo el equipo de trabajo (diseñadores, desarrolladores, marketing…) a tener una visión global del proyecto y alinearse para conseguir los mismos objetivos.

Wireframe

Es una representación de baja fidelidad del interface de usuario que utilizamos para crear el esqueleto de nuestro diseño. Su objetivo es presentar de forma esquematizada los conceptos claves de cada una de las pantallas del producto final y crear el flujo de navegación.

Debe ser ser simple y sencillo, con un solo color, habitualmente negro (grises), un tipo de letra y figuras sencillas que representen los contenidos, navegación, enlaces, CTAs… De esta forma podemos realizar rápidamente un primer acercamiento a la estructura de nuestro proyecto.

En esta fase es el importante que el cliente participe, que aporte su punto de vista y se sienta participe del proceso de diseño desde el principio. De esta forma los cambios que vayamos realizando según sus especificaciones se podrán realizar en poco tiempo y de forma más económica que tener que hacerlo en la fase de desarrollo.

Mockup

Una vez tenemos el esqueleto pasamos a crear mockups, que es una representación estática de alta fidelidad. En esta etapa vestimos el esqueleto creado previamente por lo que aquí entran en juego los colores, tipografías, imágenes…

El objetivo principal es conseguir una apariencia visual lo más cercana posible a nuestro producto final así como una idea general de como funcionará.

Al igual que cuando realizamos los wireframes, es importante que el cliente tome parte en este proceso, en este punto se hará una idea mucho más aproximada de como quedará el producto final y podrá aporta valor al diseño con su feedback.

Prototipado

Es la representación en alta fidelidad del producto final, que simula las interacciones principales de la interfaz de usuario, aunque realmente son imágenes conectadas entre sí para dar la sensación de ser una aplicación real.

Esta herramienta nos ayudará a testear el flujo de navegación y las interacciones de forma similar al producto final, para encontrar posibles errores de usabilidad antes de entrar en la fase de desarrollo.

Herramientas

Personalmente las herramientas que uso son Sketchapp, sobre todo para la parte de wireframes, ya que es muy ágil a la hora de crear artboards, y dispone los elementos esenciales para crear los elementos de contenido.

Photoshop e Illustrator para enriquecer visualmente los mockups y Marvelapp para crear las interacciones básicas entre cada una delas pantallas.

Por supuesto que hay otras muchas herramientas como Adobe XD, Invisión, Axure, Balsamiq… pero lo más importante es que cada diseñador se sienta cómodo con las herramientas que utilice para desempeñar cada una de las tareas.

Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *