Wireframes, mockups y prototipos funcionales

La realización de wireframes, mockups y prototipos funcionales son herramientas esenciales en el diseño web. Hoy en día, desarrollar una aplicación web de calidad es un proyecto amplio y relativamente complejo en el que pueden participar distintos profesionales, con roles diferentes: un arquitecto de la información, un diseñador, un experto en SEO, un programador…

EnjoyFi en TV

proyecto de EnjoyFi

Además, en ese proyecto no sólo entran en juego las necesidades del cliente, sino también toda una serie de parámetros de usabilidad y de accesibilidad que hoy en día el mercado exige. Es por todo ello imprescindible seguir un buen flujo de trabajo que:

  • aumente la productividad.
  • sirva para evitar y corregir errores.
  • garantice esos criterios antes mencionados.

Los wireframes, mockups y prototipos permiten anticipar y corregir errores, probar la usabilidad y la accesibilidad de la aplicación y caminar junto al cliente hacia el producto final.

En el CIFO de L’Hospitalet, centro de referencia en el diseño, pude participar en un curso precisamente de wireframes, mockups y prototipos funcionales. Fue impartido por el diseñador Oscar Eroles. Cada alumno desarrolló un proyecto web desde el principio hasta entregar el prototipo navegable al programador para que éste se encargara del código.

EnjoyFi

EnjoyFi corporativo

imagen corporativa de EnjoyFi

Mi proyecto consistió en una plataforma ficticia, online, de contenido multimedia llamada EnjoyFi. EnjoyFi trataría de agrupar en un mismo portal, películas, series, cómics y novelas de ciencia ficción. A la hora de desarrollar este proyecto teníamos que tener en cuenta el target al que iría dirigido: un público amplio, coleccionista, acostumbrado a las nuevas tecnologías, voraz y que gusta de formar comunidad. Esta premisa implicaba un contenido amplio, incluso abrumador, la posibilidad de comentarios e interacción entre los suscritos al portal y una interface acorde con el contenido. También era importante basarnos en los referentes actuales en este tipo de portales para comprobar las tendencias del diseño. Los colores se basarían en el color corporativo de la empresa. Para la tipografía necesitábamos suficiente contraste para garantizar una buena jerarquía.

EnjoyFi target

Target de EnjoyFi

Árbol de navegación

Una vez definido el proyecto, el target y los elementos en los que basar el diseño, pasamos a la fase de elaborar  un árbol de navegación. Es un gráfico que plasma la estructura y la navegabilidad del proyecto. Aquí entraría en juego el arquitecto de la información que organizaría el contenido. El proyecto de EnjoyFi dispondría de:

  • Una home amplia donde poder mostrar parte del contenido con un call to action.
  • Un apartado de catálogo donde pudiera desglosarse en distintas categorías (películas, series, cómics, novelas, Star Wars y Star Trek).
  • Un apartado de noticias que actuara como blog y que facilitara el SEO.
  • Una página de información corporativa
  • Una página donde hacerse socio.

Por otra parte, al hacer login, el usuario registrado podría acceder al visionado del contenido y a la interacción con otros usuarios.

EnjoyFi árbol de navegación

Árbol de navegación

Wireframes

El árbol de navegación es un documento de trabajo y puede sufrir modificaciones. Y así fue. Al realizar el wireframe vimos la necesidad de introducir algunos cambios. Los wireframes son una representación gráfica del portal, o al menos de sus páginas más importantes, mediante lineas y trazos sencillos, pero que nos permite tener una visión clara de cómo será la aplicación web.

EnjoyFi wireframe

Wireframes

Pruebas de usabilidad

Distintas pruebas y tests nos permiten medir tanto la usabilidad como la accesibilidad de una página web. Conviene realizarlos tras el wireframe, pero también tras la realización del mockup. En el curso, cada estudiante testeó los proyectos de los demás estudiantes. En el caso de EnjoyFi, las pruebas fueron muy útiles. Las compañeras que hicieron los tests señalaron el riesgo a que la página tuviera demasiado contenido y saturara al usuario. Pudimos establecer modificaciones en el diseño, ampliando interlineados, imágenes más pequeñas, etc.

EnjoyFi test usabilidad

Cambios por los tests de usabilidad

Mockup y prototipo funcional

Utilizando Photoshop realizamos, a partir de los wireframes, el mockup y el protipaje. El objetivo final era realizar un prototipo de varias páginas con la navegación necesaria. No se trataba, de un producto final, que ya fuera responsive, con su base de datos, etc, sino de una muestra lo más fiel a la realidad posible para que el cliente pudiera dar su OK y el desarrollo del producto pasara a manos del programador.

EnjoyFi mockup

Mockup de tres páginas

EnjoyFi 4pantallas

Resultado final

En el siguiente enlace puede ver el prototipo funcional colgado: EnjoyFi

Deja un comentario

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

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies