2.2 MockUp «Maqueta»

 Es la maqueta una representación más avanzada del diseño gráfico y comunicativo (desde una visión de navegación y Arquitectura de la Información) de un proyecto. 

Hay dos escuelas de pensamiento que se diferencian en como conciben la forma de crear un MockUp, aquellos que creen que la maqueta debe representar el producto final exactamente (alta fidelidad) la otra dice (Fiabilidad media).

Se puede hacer con Adobe XD

se crean para mostrar a nuestro cliente el aspecto general de su nueva página web o programa y presentar nuestro diseño para que lo apruebe. 

«Los MockUp impresionan, dan un aspecto más profesional y venden».

El cliente tendrá así una idea muy cercana al resultado final y aún podrá medificar cosas si lo desea, teniendo una idea muy fiable.

Para la desarrollador es más facil hacer cambios en esta fase y tener la validación del cliente, que tener que reescribir o modificar codigo, así tambien se gana tiempo ya que podemos trabajar en fases con validación del cliente optimizando más el tiempo.

• Permite saber qué información existe y donde va;Sabremos donde va la información antes de empezar a escribir el análisis funcional.
• Puede ser utilizado para la implementación del diseño;Lo que significa que es posible probar su concepto de diseño y tendencia antes de que escribamos una sola línea de código. Los cambios en el concepto de diseño son fáciles y económicamente más bajos en este paso que si lo hacemos posteriormente.
• Es más preciso para los desarrolladores. El desarrollador puede ver cómo debe de ser el producto final, lo que significa que el MockUp de alta fidelidad puede servir como una hoja de especificaciones visual.
• Es una herramienta flexible; Hacer cambios, eliminar o incluso añadir más espacios con nuestras ideas y conceptos es posible más fácilmente
• Es más fácil de presentar a los no diseñadores. Los clientes y partes interesadas prefieren un MockUp de alta fidelidad porque lo que ven es lo que obtendrá.
• Puede servir como parte de nuestra propuesta de presupuesto.Si se trata de un gran cliente, y el trabajo puede resultar lucrativo, de prestigio, o interesante por otras razones, entonces quizás nos puede compensar invertir un tiempo extra y realizar un mockup para presentar junto con el presupuesto como valor añadido para lograr el proyecto. Es importante en este caso que el cliente firme un acuerdo por el cual se compromete a no usar todo o en parte nuestro concepto o diseño sin pagar por ello. No vayamos a pecar de ingenuos y luego llevarnos una sorpresa.

Herramientas:

• Freebiesbug– excelente recurso de elementos de interfaz de usuario y kits gratuitos para Photoshop e Ilustrador
• com +de 60 MockUps gratuitos
• La web com tiene una serie de interesantes recursos y consejos para esta herramienta.
• En Uxpin.com podemos encontrar Kit de interfaz de usuarioy iOS 8 Kit de interfaz de usuario (funciona para Photoshop y Sketch).
• Línea 25– podemos encontrar una lista de los 35 sitios que ofrecen plantillas, patrones y kits de interfaz de usuario para Photoshop
• com Aunque es un recurso para la creación de wireframes, merece la pena tenerlo en cuenta si vamos a usar una herramienta de este tipo
• com de la misma forma que el recurso anterior, en este caso nos proporcionan plantillas para descargar que nos permiten crear rejillas para diseños 960×12 en Photoshop, ilustrador, etc.
• I ♥ wireframes Página con multitud de recursos para wireframe y MockUps

»»»