Los Mockups y la técnica del Blueprint & Play

Original Mockups
5 min readJul 26, 2016

--

English version: Mockups and the blueprint & play technique

Un método que facilita la edición de Mockups para Photoshop a los usuarios.

En los últimos años el uso de las Maquetas ó Mockups de Photoshop se han convertido en un recurso muy apetecido por los diseñadores que buscan mejorar la presentación de sus proyectos, día a día están solicitando diferentes tipos de maquetas y cada vez más complejas, pero a pesar de eso el método de edición sigue siendo el mismo el cual consiste en actualizar el contenido de cada Objeto Inteligente (Smart Object) que conforman la escena resultando en muchos casos en una perdida total de tiempo.

En Original Mockups pensamos que esto debe cambiar, queremos mostrar un método que hemos venido usando con buenos resultados y que llamamos “Blueprint & Play” el cual le brindará a los usuarios las siguientes ventajas:

  1. Visualizar los diseños sobre las maquetas en un abrir y cerrar de ojos.
  2. Hacer correcciones de los diseños y visualizarlos nuevamente casi que en tiempo real (trabajaremos duro para que esto no sea un “casi”).
  3. Tener guías y medidas claras de lo objetos que conforman la escena.
  4. Aprovechar los diseños existentes hechos en otras aplicaciones como Illustrator o InDesign y no tener que adaptar el flujo de trabajo obligando a pegar porciones del diseño en cada Objeto Inteligente.
  5. Brindar un patron de edición común en todos los items y evitar que los usuarios tengan que aprender desde cero como se debe personalizar cada maqueta.
  6. Acceder fácilmente a los Objetos Inteligentes y no perderse en un montón de carpetas buscando cual es el objeto que se debe editar.

¿Como funciona?

La técnica consiste en añadir una capa especial que básicamente es un plano bi-dimensional que contiene las medidas y las guías necesarias para que los usuarios pongan su diseño completo allí. Luego mediante el uso de una Acción predefinida de Photoshop se copiaran automáticamente los segmentos necesarios del diseño dentro de cada Objeto Inteligente (Smart Object) que conforman la escena.

Es decir, el usuario pone su diseño en un plano (Blueprint) y la Acción hace el resto de trabajo por él, por ello la llamamos “Blueprint & Play”.

En la práctica

Para explicarlo mejor vamos a tomar como ejemplo la maqueta Shopping Bag Mockup 06 de Ktyellow donde se evidencian las ventajas de está técnica.

Esta maqueta se construye a partir de 8 Objetos Inteligentes: 6 para el exterior de la bolsa y 2 más para el interior.

Numero de Objetos Inteligentes. Rojo para el exteior y azul para el interior y sus respectivas capas.

Al usar la “técnica tradicional” el usuario tendría que cambiar el contenido de cada objeto manualmente, esto sería un completo dolor de cabeza especialmente cuando se hacen correcciones al diseño.

En lugar de eso, se añaden dos Objetos Inteligentes al inicio, uno contendrá el plano 2D para la parte externa de la bolsa de papel y el otro la parte interna.

Los Smart Objects en color Azul contienen los planos o blueprints

Allí hay unas guías muy claras de donde deberá quedar el diseño, sus tamaños e indicaciones, incluso, si es necesario se adjuntará la plantilla en vector para Illustrator la cual puede ser útil para usuarios que no tienen el diseño aún.

Guías y tamaños, Aquí es donde el usuario debe poner su diseño

Al finalizar la edición en los planos, se debe guardar y cerrar, pero a diferencia del método tradicional, no sucederá nada en la maqueta hasta que se dispare la Acción correspondiente, esta es la que hace la magia y le da sentido a esta técnica.

Los usuarios no tendrán que preocuparse por poner cada segmento de sus diseños en los Objeto Inteligentes, la acción recorrerá automáticamente cada uno de ellos y pondrá el segmento correspondiente del diseño en el lugar correcto.

Después de esto, se podrá apreciar el resultado final de la maqueta :).

Mira el siguiente video:

¿Donde están las acciones?

Mientras que esta técnica busca facilitar el proceso de edición a los usuarios, los autores de maquetas tendrán tareas adicionales, ellos deberán proveer las Acciones y las instrucciones necesarias para ponerlas a funcionar.

En Original Mockups, contamos con un repositorio de acciones, los usuarios las descargan desde su pagina de descargas y cada archivo que usa esta técnica tiene una capa de ayuda que le dice cual es la acción que se debe ejecutar.

Instrucciones de uso, esta presente en la Mayoría de archivos premium de Original Mockups

Desventajas

Las desventajas mayormente estarán del lado del autor de maquetas, pero si buscas la satisfacción del cliente valdrá la pena.

  • Los autores de maquetas se verán obligados a crear los planos, las acciones e indicarle cual deben ejecutar.
  • Los usuarios deben mantener actualizadas estas acciones. Estamos trabajando duro para que esto sea un proceso automático en un futuro cercano.
  • Para maquetas muy sencillas o con pocos Objetos Inteligentes no tendría sentido usar está técnica, al menos que se desee brindar adicionalmente las guías y sus tamaños.

Si has usado los items de Original Mockups o estas en el camino de convertirte en un autor de maquetas, recomendamos fuertemente que tengas presente esta idea, que aunque pueda parecer difícil de llevar a cabo, el resultado será satisfactorio para nosotros los autores pero sobre todo para los clientes.

Nos gustaría saber que piensas, déjanos un comentario.

Por Alexander Ruiz @fenixkim, CO Propietario & CTO en Original Mockups, Colombia.

--

--