SHOO”"INDICE 1.- Valora tu trabajo, dale el escenario que merece. 2.- Mockups: Una ventana a la excelencia grafica. 3.-Identidad Corporativa y Mockup: Consideraciones basicas. 4.- Estrategia de marketing: Disefia la visidn de tu cliente. 5.- Pasando a la accion: Tu primera Plantilla de Mock-up. 6.- Aplicaciones y herramientas que te convienen. 7.- Catalogo de recursos gratuitos> VALORA TU TRABAJO, DALE EL ESCENARIO QUE MERECE Un disefador debe poner sus conocimientos y recursos a disposicion de sus clientes con la mayor precision posible. Desde la antigiiedad, el creador grafico ha sido estigmatizado e infravalorado por el misterio de su praxis. Junto con el resto de artistas, (importando poco el gremio) su metodologia y su procedimiento creativo han permanecido encasillados bajo el manto de la trivialidad. Este profesional, alejado del mundo empirico, ha procurado a través de los tiempos obtener un reconocimiento social y una valorizacion merecida. Aun a dia de hoy, un elevado porcentaje de personas consideran el disefio y otras profesiones artisticas como labores prescindibles en la sociedad mas avanzada y occidental Querido disefador, no te dejes abrumar o desmotivar por este tipo de pensamientos, pero por favor, tampoco te permitas excesivas licencias. El disefo grafico es una profesion (conecta con la industria, con el marketing y el comercio) y por ello, debe asentarse en unas leyes, en unas bases y en unos pardmetros. Quiza acogiéndonos a este pequefio escenario, entendamos mejor por qué se hace tan necesario crear una conexion certera y concreta entre nuestra idea y nuestro cliente. En la absoluta mayoria de ocasiones, aquellos que recurran a nosotros en busca de nuestros servicios van a ir pensando que nuestro trabajo no tiene tanto valor. Es hora de demostrarles que sf y que seguramente tenga un valor superior al fijado. Es quiz en esta era de la informacién, donde los artistas graficos puedan dar un paso adelante y reinventar el campo de batalla. En este contexto de hibridacién y convergencia, la grafica evoluciona hacia un perfeccionamiento inesperado. Aparecen aplicaciones, sistemas, lenguajes, sorportes, canales... Muta y crece dejéndose ver por todos, exhibiendo su enorme campo de accién y practicidad. a fa CREATOFILIA — mn - Yolo) <-32 MOCK-UPS: UNA VENTANA A LA EXCELENCIA GRAFICA Asi que, uno de los aspectos mas demandados al diseflador grafico de hoy dia es la precision... Pero, éesto como se traslada a la practica? Necesitamos ofrecer el resultado exactamente buscado por nuestro Cliente, es por ello que necesitamos valernos de diferentes instrumentos. Entre ellos, uno de los mas novedosos y utilizados en la actualidad por disefiadores graficos y disefiadores web, es el mock-up. Aun no sabes lo que es? Del mismo modo que un arquitecto utiliza planos para desarrollar sus proyectos, un disefiador boceta sus trabajos y los construye con excelencia visual antes de entregarlos y someterlos a juicio del cliente. Bien, pues de ello se trata, de algo que jamas debe ser obviado: La presentacion de nuestro proyecto 0 arte final. Para que tu trabajo sea valorado tal y como merece, necesita desprender eficacia, elegancia, nivel y usabilidad. Utilizar esta herramienta, nos va a repercutir positivamente en diferentes frentes. Algo que a simple vista cualquier persona le pueda parecer prescindible como es una plantilla de mockup, lo cierto es que tiene mayor trascendencia de lo que se cree. ¢Por qué es tan importante utilizar esta herramienta en nuestro trabajo? A continuacién te doy cinco factores o razones que convierten el mock-up en algo esencial para el disefiador actual: CREATOFILIAidad: El Mock-Up es una garantia, un hecho demostrable, casi la prueba del algodén: Nuestro disefio es aplicable al producto deseado. A través de este instrumento pondremos en manos de nuestro cliente todo lo que desea, y todo lo que podria haber esperado. La variedad de mock-ups es ilimitada podemos crear mock ups de cualquier soporte, camisetas, ropa interior, edificios, trenes, material de oficina... El resultado (si desarrollamos nuestras maquetas con éxito) sera 100% realista y atractivo. Es muy recomendable que cualquier disefador fabrique su propio catalogo de recursos personal. Una biblioteca de plantillas desarrolladas por él mismo y que pueda ir utilizando durante toda su trayectoria profesional. en sus trabajos. Estética: Nuestra maqueta (légicamente si es de calidad y esta disefiada con dedicacién) va a suponer un valor estético afadido. Por muy interesante que sea nuestra composicion, a nivel de usuario, no podra traspasar el universo de dos dimensiones. Sin embargo va a ser través de nuestro boceto digital se adentrara en el mundo de la tercera dimension. Adquirira de repente un contexto, un volumen y acompafiando a esto, muchas connotaciones que configuraran un mensaje muy concreto y que servira de apoyo a nuestra labor como creadores. ferenc! yn: Disefiar nuestro maletin de recursos personalizado y proyectar nuestras ideas a través de maquetas graficas y digitales va a repercutir en una disferenciacion. Como creativo, te vas a lograr desvincular de la gran masa de disefadores que presentan sus proyectos en bruto y descontextualizados, por lo que jugaras con gran ventaja y al fin y al cabo ofreceras un servicio mas disfrutable. CREATOFILIA | | 4 qB00KSMarketing y aumento del indice de ventas: Ya sabemos que el disefio esta en contacto directo con el mundo del comercio y del marketing, y el Mock-Up supone una estrategia muy inteligente y eficaz para colocar nuestros productos en el mercado y por supuesto para obtener nuevos clientes. A través de esta herramienta vamos a poder insertar nuestro trabajo en el mundo de nuestro cliente: en su movil, en su ropa, en su libro, pero sobre todo en su cabeza. Una de las maximas que rigen el marketing es que si consigues introducir tu producto dentro de la casa de tu cliente el 90% del trabajo esta hecho y las probabilidades de que logres vender tu producto son muy elevadas Con el Mock-Up ocurre algo muy parecido, eres capaz de introducir tu disefio en la casa del propio cliente, pero en ese caso, obviamente dentro de su casa virtual 0 psicoldgica si queremos Ilamarlo asi. En el fondo todo es una cuestién de comunicacidn, a eso se reduce. Al presentar nuestros disefios por ejemplo dentro de la maqueta de un smartphone o una prenda textil, lo que estamos haciendo es abrir muchas compuertas en el universo conceptual del cliente. Si presentamos el disefio de su logotipo en un iPad o integrado en un furgon, automaticamente le asaltaran conceptos como: Ultima generacion, empresa de grandes dimensiones, sello empresarial a gran escala... Y, aqui reside gran parte del secreto: Nuestro cliente ha asociado nuestro disefio a conceptos que vienen implicitos en nuestro mock-up, por lo tanto hemos desarrollado una labor de persuasion escandalosamente discreta y compleja. REATOFILIA BOOKSa a i A ‘ew bss Carga psicolégica: Gracias a nuestro Mock-Up creamos una asociacion de conceptos y afladimos de forma automatica y eficaz un valor y unas atribuciones a nuestros trabajos. Si somos conscientes de esto, sabremos que contamos con mucho poder sobre nuestro cliente, sobre el proceso comunicativo y sobre el resultado de nuestra presentacion. Podemos moldear entonces, no solo nuestro disefio, si no que podemos ejercer influencia a través de nuestro escaparate. Podemos disefiar la vision que va a tener nuestro producto. Podemos crear un mundo personalizado y exclusivo para nuestra creacion. Potenciaremos la vertiente que nuestro cliente esté buscando en nuestra propuesta: Elegancia, sofisticacién, calidez, sociedad, moda, creatividad. Disefiamos un escenario virtual que va a decir muchisimo: Hablara de nosotros como creadores, de nuestro producto, de nuestro cliente y de los beneficios prdcticos y fisicos que va a obtener. Como vemos nuestra maqueta, no sdlo va a demostrar al cliente que nuestro trabajo se integra a la perfeccién en el soporte, si no que va a contarle las implicaciones a nivel psicologico que nuestro disefio alberga. H CREATOFILIA @ BOOKSTIDAD CORPORATIVA Y MOCK-UPS Cuando estamos trabajando en la identidad corporativa de una empresa, los mock-ups nos van a ser de una enorme utilidad. Debes saber que cuentas con una gran variedad de escaparates donde situar el logotipo de tu empresa, atendiendo a las necesidades y al caracter del negocio, deberas hacer una seleccién de aproximadamente 5 maquetas donde posicionar tu trabajo. A continuacion te citaré unas cuantas que te seran de gran utilidad y te podran revelar nuevas ideas y perspectivas para escoger el soporte adecuado: Textiles: Prendas de ropa como gorras, camisetas, pantalones, polos... Material de Oficina: Lapices, tarjetas de visita, carpetas, folios, estuches... Publicidad Exterior: Carteleria de diverso tipo. Logistica: Todo tipo de automdviles y medios de transporte. Dispositivos Electrénicos: Webs flotantes, ordenadores, smartphones... Emplazamientos arquitecténicos; Edificios, casas, tiendas, bulevares... Muebles y accesorios: Postales, armarios, estantes, escaparates... Merchandising: Figuras, camisetas, regalos... ATOFILIA ‘BOOKSConsejos de presentacién: Es recomendable que entregues siempre un paquete de identidad corporativa que incluya dos elementos por separado: - Archivos brutos: En esta carpeta deberés incluir tu disefio 0 composicion pura. El logotipo en diferentes soportes (por supuesto también en formato vectorizado) y todos aquellos elementos que te hayan sido encargados o todos aquellos complementarios que sean de interés (por ejemplo elementos decorativos, motivos, degradados...). - Manual de identidad corporativa: En é! deberds presentar en forma de catdlogo (en formato PDF) toda aquella informacién concerniente a la identidad de la empresa o negocio en cuestion a nivel visual y no visual. Desde la paleta de colores (es recomendable que utilices el catélogo Pantone) a los colores permitidos y no permitidos en la aplicacion del logotipo. También las practicas que deben ser evitadas a toda costa, el significado del disefio y otras competencias que deben guiar la presencia de la empresa en todos los medios. Si no has ofdo hablar de este manual, es recomendable que busques informacién al respecto porque te va a dotar de mayor precisién, concisién y base de actuacién. 4 CREATOFILIA BOOKSCSTW OY (o) i) etek Sabiendo todo lo que sabemos y teniendo en cuenta la gran importancia de la presentacién de nuestros trabajos, contamos con un amplio margen de maniobra. Para poder obtener un resultado acertado y contentar a nuestro cliente, debemos hacer una labor de investigacién. Lo importante es que sepamos claramente hacia donde se dirige concretamente. Ademas de las sesiones y citas que puedas tener con él para concretar el trabajo, deberds afinar esta informacion. Echa un ojo a la pagina web de la empresa, 0 en caso de que no tenga ninguna, preséntate fisicamente en el lugar de trabajo. Echa un ojo a su catalogo de productos y habla con los empleados. Sumeérgete de Ileno en el negocio y empapate de su filosofia, de su forma de trabajo y de todos los valores que puedas captar. | Tu proyecto se va a construir sobre una base de ideales, objetivos y sobre una vision de trabajo Si eres un buen disefiador, no vas a disefiar el mismo tipo de logotipos o elementos si lo haces para una empresa en donde impera la sencillez, la creatividad y un ambiente de trabajo en equipo, que si lo haces para una donde hay un ambiente mas denso, cuadriculado y una estructura jerérquica © mas clasica. Tu misién es dejar contento a tu cliente y lograr convertirte en un disefiador versatil sin renunciar a tu propio estilo. Los puntos esenciales que deberas abarcar en tu trabajo seran: - Analizar a tu cliente y a su empresa. - Procurar mantener una relacién transparente y de confianza con él para poder saber a ciencia cierta qué busca realmente en ti. - Desarrollar tu logotipo, tu paleta de colores y sus indicaciones. Esto ncluye su disefio en negativo, en positivo y todos los elementos complementarios. - Implementar los mock-ups 0 escaparates (estimando su tipologia, el cardcter de tu cliente y su producto...) - Crear un manual de identidad corporativa. CREATOFILIA BOOKS5.- TU PRIMERA PLANTILLA DE MOCK-UP Si, finalmente optas por disefiar tu propio catélogo de recursos, deberas tener en cuenta todas las alternativas con que cuentas. Podemos diferenciar dos tipos de plantillas de mock-Ups y cada uno de ellos tiene unas funciones y un proceso de desarrollo: - Plantillas estaticas: Son las mas utilizadas en el Ambito del diseho grafico, sobre todo para portolios, anuncios, manuales de identidad corporativa... * Planas: No requieren el uso de herramientas tridimensionales para integrar nuestros disefios en la propia plantilla. * Tridimensionales: Ofrecen nuestros trabajos integrados en espacios fotograficos de gran calidad. Suelen requeriri la distorsién de nuestros archivos brutos para la correcta integracion. - Plantillas dinamicas: Son menos utilizadas, aunque poco a poco se estdn implantando mas en el Ambito del disefio y el patrocinio de los disefiadores. Estas también pueden ser planas y tridimensionales, pero ademas pueden ser: * Animaciones: Son més empleadas para entornos publicitarios y paginas web dindmicas, en formato gif o similares. * Video: Sobre todo para proyectos de tipo audiovisual y algunas webs dinamicas. CREATOFILIA . BOOKSSi es la primera vez que te embarcas en un proyecto de este tipo y apenas has trabajado en plantillas usables, agiles y profesionales, te recomiendo que comiences trabajando en una estatica y plana. Una vez que domines esta modalidad ve ascendiendo, hasta llegar a la modalidad de mock-Up dindmico y tridimensional. Puedes emplear diferente tipo de softwares para ello. A continuacién, te voy a dar algunos consejos basicos para abordar tu primera plantilla estatica desde Adobe Photoshop, el software de edicion fotografica mas utilizado. CONSEJOS EN ADOBE PHOTOSHOP Una vez que hayas abordado la fase de adquisicién de documentos fuente, llega el momento de editar. Para poder obtener un resultado optimo, deberas tomar algunas consideraciones a la hora de desarrollar tu propio mock-Up. Ten en cuenta que dispondra de areas fijas 0 que no van a ser sustituidas, (estos documentos fuente de los que hablabamos) y también areas que contendran los disefios y que seran una especie de campos vacios. - Trabaja siempre con objetos inteligentes en las dreas que seran modificables, ten en cuenta que de modo contrario, no sera una plantilla. Para que estemos hablando de plantilla, debemos tener una gran facilidad (en escasos segundos) para poder insertar nuevos. disefios dentro de nuestros mock-Ups. - Aprovecha las opciones de transformacion que nos ofrece la aplicacion y asegurate de convertir en objeto inteligente el area a modificar antes de someterla a una transformacion o distorsion. CREATOFILIA BOOKS- Haz uso de las herramientas de extraccion y procura que el recorte sea limpio y preciso. Extrae también los halos blancos con la herramienta de Perfeccionamiento de borde. De lo que se trata es de que la integracion sea totalmente real. ~ Para trabajar el mock-Ups tridimensionales sera necesario que alteres el objeto inteligente mediante las varintes de distorsién, perspectiva o deformar, dentro de la herramienta de Tranformar. - Para dotar de mayor calidad a nuestros trabajos y generar un resultado eficiente y real deberds mantener los pequerios detalles. Presta atencién a los brillos, las texturas, los contrastes y otros aspectos que deban aparecer en el drea editable. Si por ejemplo estas trabajando en un mock-Up para un smartphone, deberds recrear el brillo en la pantalla que es el drea donde se producira la sustitucién y la insercién de nuevos elementos. Para ello es muy util que te sirvas de las herramientas de seleccién, degradados (para los brillos escogerds una modalidad que vaya desde un color blanco a uno transparente) y edites a través de los parametros de opacidad, modos de fusion y opciones de fusion. CONSEJOS EN ADOBE AFTER EFFECTS Para trabajar en mock-Ups dinaémicos es recomendable que utilices Adobe After Effects y hagas uso de los siguientes recursos que la aplicacion nos ofrece: - Procura utilizar las opciones de Precomposicién y anidamiento para poder crear tu plantilla Estas nos van a ayudar a crear elementos similares a los objetos inteligentes en Adobe Photoshop. De esta manera podremos actualizar en un Unico paso y reutilizar todos los componentes. - Para animar tus composiciones deberds aplicar puntos de anclaje en las opciones de posicién y escala si es necesario en cada capa en la linea de tiempo. - Es muy recomendable que te apoyes con Adobe Photoshop y aproveches la compatibilidad entre ambas aplicaciones para obtener la excelencia en el resultado. CREATOFILIA BOOKS= APLICACIONES Y HERRAMIENTAS UTILES Ademéas de Adobe Photoshop, Adobe Illustrator o Adobe After Effects, también podemos aprovechar muchas aplicaciones y herramientas web para crear maquetas e interfaces de proyectos digitales. Como vimos en un primer momento, un mock-Up es una herramienta con un gran nivel de usabilidad y se puede aplicar a varios campos. demas de desarrollar Mock-ups para presentar nuestras creaciones y composiciones, también podemos elaborar otra modalidad de plantillas para ilustrar nuestras ideas y proyectos a otros profesionales que integran el proceso productivo. Al fin y al cabo la funcién primaria sigue siendo la misma: Presentar una idea con gran calidad y precision: A continuacion te ofrezco una seleccién de aplicaciones y herramientas web que van a auxiliarte en esta labor de una forma tremendamente eficaz: Se trata de una herramienta opensource, multiplataforma con un funcionamiento tremendamente intuitivo y de facil uso para desarrollar prototipos e interfaces de aplicaciones y sitios web. Sin duda muy recomendable si tratas de desarrollar una idea a algun desarrollador web. Mockingbird: Se caracteriza por poner importancia en la posibilidad de difundir y compartir tus creaciones. De este modo, no te costara revisar el flujo de trabajo, examinar la accesibilidad del mismo o compartirlas con tus clientes. Mockup builder: Esta aplicacion ofrece una variada biblioteca de elementos disponibles, desde componentes para iOS 0 Android a un buscador y aplicaciones de escritorio. Es gratuita y viene de la mano de Microsoft HotGloo: Consta de herramientas para crear plantillas, organizar la interfaz del usuario e incluso dar diferentes niveles de acceso a los colaboradores o clientes. ety CREATOFILIA BOOKSCREATOFILIA BOOKS Como puedes ver, si nos alejamos del disefio grafico puro y nos adentramos en el disefio web y en el desarrollo de proyectos digitales como demos de paginas web, aplicaciones 0 interfaces de diverso tipo, contamos con una enorme variedad de recursos y herramientas multiplataforma. En la siguiente parte de nuestro E-Book, incidiremos en esta segunda modalidad y ademas de explorar softwares y alternativas que nos suplan en el desarrollo de interfaces, desarrollaremos una seleccion de consejos para afrontar nuestro reto con mayor profesionalidad y control. 7.- CATALOGO DE RECURSOS GRATUITO Este E-book incluye una seleccién de recursos regalo con templates gratuitos tanto dinamicos como estaticos. Se trata de un catdlogo de plantillas totalmente editables que te van a servir de gran utilidad para comprender el funcionamiento y la estructura interna de las composiciones. Podras modificarlas de una forma tremendamente sencilla desde las aplicaciones de Adobe Photoshop y Adobe After Effects. Entre ellas, encontrarés mock-Ups de libros, tarjetas de visita, revistas. prendas textiles, smartphones 0 catalogos. No olvides que continuaremos desarrollando contenidos para disefadores y artistas graficos desde nuestra pagina oficial: http://creatofilia.com Si este libro te ha sido de utilidad ayudanos a compartirlo y a proveer de conocimientos a mas personas. iNunca dejes de crear! Fran Marin, Creador de contenidos. CREATOFILIA