Wireframe, mockup y prototipos

Wireframe, mockup y prototipos

arquitectura o la ingeniería del automóvil. Los conceptos ‘wireframe’ y ‘mockup’ suelen confundirse y no hay un consenso claro sobre qué realmente alcanza un concepto y otro. Los conceptos que desarrollo a continuación son los que más me encuentro entre clientes y proveedores. Te recomiendo que, cuando hables sobre ellos, primero establezcas qué significa cada uno y qué alcance tienen. Es por ello que no he enlazado los conceptos a wikipedia ni a otros blogs.

Aterrizar conceptos de forma económica

A lo largo de las primeras reuniones con el cliente, desarrollamos los bocetos de nuestro producto. Estos bocetos, llamados habitualmente “sketches”, intentan aterrizar las ideas en algo tangible. Nos permiten abordar diferentes ideas, estableciendo los principios básicos de aquello que debe contener el producto. Son baratos, nos sirven para alinear a todo el equipo y hablar el mismo idioma.

Qué, cómo y dónde

Con las ideas negro sobre blanco, pasamos a establecer el espacio que ocuparán los elementos y la estructura en la que se distribuirán. Después de realizar un estudio sobre los públicos objetivo, analizamos qué elementos necesitamos, cómo se usarán y dónde los ubicaremos. Para hacer esto, usamos la técnica del wireframing.
Un ‘wireframe’ proporciona una diseño de baja resolución, con las áreas bien definidas.
 

Alta fidelidad

A partir de los wireframes pasamos a realizar el diseño de “alta fidelidad”, también llamados por algunos “mockups”. Este diseño define la tamaños de los elementos, posiciones concretas, interacciones de las pantallas, etc. Suele incluir la dirección de arte y el diseño gráfico de las piezas (look and feel, color, tipografías, etc). Es la versión previa al desarrollo.
Un ‘mockup’ proporciona una diseño de alta fidelidad, con la disposición de todos los elementos y sus interacciones. Incluso puede tener textos y diseño incluidos.
 

Mi producto tangible

Una vez realizado el mockup, podemos pasar al desarrollo básico. En el mundo de la programación informática, pasamos a codificar. Al producto final de resultante se le llama prototipo. El prototipo es el producto mínimo viable que permite al cliente interactuar con la primera versión de lo que acabará siendo el producto final. Este prototipo debe estar preparado para poderse probar, tanto en el mercado como con clientes internos. A partir de las pruebas y su correspondiente evaluación mediante métricas adecuadas, podemos empezar a pivotar para seguir desarrollándolo.

Herramientas

Papel y lápiz. Estas son las básicas. Elimina cualquier dispositivo con pantalla (a no ser que tengas una tablet con un pen de alta precisión y una buena aplicación). Luego existen en el mercado multitud de herramientas que te permiten hacer desde el wireframe hasta el mockup. De las herramientas específicas, entre las más conocidas tenemos: Axure, Balsamiq , Gomockingbird, Gliffy, Lumzy, Mockflow y mi preferida, uxpin. Si buscas herramientas no tan específicas y más ofimáticas, puedes usar keynote, powerpoint o Dreamweaver. ¡Tu creatividad al poder!

Si quiero visualizar y manipular mi producto aún más rápido…

Y si tu cliente es pragmático, experimental, del que le gusta tocar las cosas casi antes que pensar sobre su definición… si el producto tiene mucha incertidumbre… si este proceso no se adecúa a tus necesidades o no puedes ajustarlo… no hay problema. Se llama “pretotipado” y lo explica muy bien Alberto Savoia en su pretotipo de libro “Pretotipar esto”. La técnica del pretotipado te ayuda a tener el producto sin tener en cuenta los detalles que, a menudo, hacen el producto interminable. Aquí te dejo el pretotipo de libre descarga y aquí su libro entero. Hagas lo que hagas, sé ágil y no esperes al final a ver el resultado. Un proyecto con un enfoque ágil hace que todo el mundo trabaje mejor, y mantiene al cliente bien cerca del resultado, además de que le incluye en el proceso de definición, cosa que después es de agradecer. Te dejo esta imagen donde puedes ver gráficamente a qué me refiero. No planifiques más de la cuenta, pero tampoco caigas en la trampa de no planificar nada. Trabaja de forma ágil pero sin pasarte de rosca. 😉

screenshot 8

]]>

Leave A Reply

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

*

Déjate sorprender...

Gestionar el consentimiento de las cookies

Para ofrecerte la mejor experiencia de uso, utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. El consentimiento a estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.

Funcional

Siempre activo
El almacenamiento o acceso técnico es estrictamente necesario para el propósito legítimo de permitir el uso de un servicio específico explícitamente solicitado por el abonado o usuario, o con el único propósito de llevar a cabo la transmisión de una comunicación a través de una red de comunicaciones electrónicas.

Estadísticas

El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos. El almacenamiento o acceso técnico que es utilizado exclusivamente con fines estadísticos anónimos. Sin una requerimiento, el cumplimiento voluntario por parte de su proveedor de servicios de Internet, o los registros adicionales de un tercero, la información almacenada o recuperada sólo para este propósito no se puede utilizar para identificarlo.

Marketing

El almacenamiento o acceso técnico es necesario para crear perfiles de usuario para enviar publicidad, o para rastrear al usuario en un sitio web o en varios sitios web con fines de marketing similares.