{"id":2771,"date":"2020-02-10T12:26:38","date_gmt":"2020-02-10T12:26:38","guid":{"rendered":"https:\/\/www.pilafestudio.com\/?p=2771"},"modified":"2020-02-11T15:27:55","modified_gmt":"2020-02-11T15:27:55","slug":"marca-animada","status":"publish","type":"post","link":"https:\/\/www.pilafestudio.com\/val\/marca-animada\/","title":{"rendered":"\u00bfEn qu\u00e9 contextos usar tu Marca Animada?"},"content":{"rendered":"<h3 class=\"wp-block-heading\">La Marca Animada va m\u00e1s all\u00e1 de su uso en la presentaci\u00f3n<\/h3>\n\n\n\n<p>Ya hace tiempo que tanto motion graphics como la animaci\u00f3n, en general, se vienen usando en el campo del branding para generar una marca animada. Software espec\u00edfico optimizado para ello, como <a rel=\"noreferrer noopener\" aria-label=\"After Effects (se abre en una nueva pesta\u00f1a)\" href=\"https:\/\/www.adobe.com\/es\/products\/aftereffects.html?gclid=EAIaIQobChMIz6bW95HF5wIVjBnTCh2YXQrnEAAYASAAEgItsfD_BwE&amp;sdid=8DN85NTQ&amp;mv=search&amp;ef_id=EAIaIQobChMIz6bW95HF5wIVjBnTCh2YXQrnEAAYASAAEgItsfD_BwE:G:s&amp;s_kwcid=AL!3085!3!340859134307!e!!g!!adobe%20after%20effects\" target=\"_blank\">After Effects<\/a> de Adobe, ha permitido dar vida y movimiento a la marca, generando una nueva dimensi\u00f3n en su comunicaci\u00f3n.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Pero como suele suceder en todos los inicios, tendemos a no saber c\u00f3mo utilizar estas herramientas, o c\u00f3mo contextualizar sus resultados. En este post hablaremos, sin profundizar demasiado, de los siguientes aspectos:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Contenido:<\/h4>\n\n\n\n<ol class=\"wp-block-list\"><li><strong><a href=\"#briefing\">El briefing como punto de partida.<\/a><\/strong><\/li><li><strong><a href=\"#redes\">Animaciones en Redes Sociales.<\/a><\/strong><\/li><li><strong><a href=\"#presentaciones\">Presentaciones de marca.<\/a><\/strong><\/li><li><a href=\"#cortinilla\"><strong>Introduciones, cortinillas y r\u00e1fagas para audiovisuales.<\/strong><\/a><\/li><li><a href=\"#emojis\"><strong>Stickers animados en Apps de mensajer\u00eda.<\/strong><\/a><\/li><li><strong><a href=\"#web\">Animaciones en entorno web y app<\/a><\/strong><\/li><li><strong><a href=\"#conclusiones\">Conclusiones<\/a><\/strong><\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"briefing\">1. El Briefing como punto de partida<\/h3>\n\n\n\n<p>Como siempre, claro. Pero en este caso, debemos partir de d\u00f3nde queremos llegar, para plantear una <a href=\"https:\/\/www.pilafestudio.com\/val\/category\/animacion\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (se abre en una nueva pesta\u00f1a)\">animaci\u00f3n<\/a> que realmente sea una soluci\u00f3n adecuada, y maximizar as\u00ed sus resultados.<\/p>\n\n\n\n<p>Si comenzamos con la conceptualizaci\u00f3n de una nueva marca, o una identidad para una nueva compa\u00f1\u00eda, puede ser un punto a favor para su diferenciaci\u00f3n introducir en el briefing los objetivos que se pretenden cubrir con la animaci\u00f3n en cuesti\u00f3n.<\/p>\n\n\n\n<p>Este caso es rese\u00f1able pues no ser\u00e1 comparable al de una marca que ya disponga de su identidad visual y desee incorporar animaciones a su imagen, pues la gr\u00e1fica existente va a condicionar la forma en la que se plantee el <em>motion<\/em> de la marca.<\/p>\n\n\n\n<p>As\u00ed pues, para empezar, lo m\u00e1s inteligente ser\u00e1 saber para qu\u00e9 queremos nuestra animaci\u00f3n, y as\u00ed adecuarnos a formatos, duraciones y, en definitiva, adaptarnos al entorno en el que va a interactuar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"redes\">2. Animaciones en Redes Sociales<\/h3>\n\n\n\n<p>Desde hace ya un tiempo, Facebook permite usar v\u00eddeos tanto para avatares de perfiles como de p\u00e1gina, as\u00ed como permite incluir v\u00eddeos tambi\u00e9n en las portadas de las p\u00e1ginas.<\/p>\n\n\n\n<video controls autoplay=\"\" loop=\"\" src=\"https:\/\/www.pilafestudio.com\/wp-content\/uploads\/2020\/02\/facebook_1.mp4\" width=\"800\"><\/video>\n\n\n\n<p>Este podr\u00eda ser una buen entorno, si encaja dentro de la estrategia de comunicaci\u00f3n de cada empresa, para incluir animaciones de la marca.<\/p>\n\n\n\n<p>Va a depender de muchos factores el tipo de animaci\u00f3n que se adecue a cada compa\u00f1\u00eda, pero tener esto en cuenta desde el inicio, permitir\u00e1 dirigir el concepto de base en una direcci\u00f3n u otra.<\/p>\n\n\n\n<p>Por otra parte, a nivel t\u00e9cnico, el formato de la marca animada que nos permite facebook es de v\u00eddeo, por lo que <strong>en este caso un .gif (formato de imagen, no de v\u00eddeo) no nos servir\u00eda.<\/strong><\/p>\n\n\n\n<p>Cabr\u00eda conocer adem\u00e1s una importante limitaci\u00f3n como es la duraci\u00f3n, que en este caso Facebook <strong>nos permite hasta siete segundos de animaci\u00f3n.<\/strong> L\u00f3gicamente, siendo una animaci\u00f3n para un avatar es m\u00e1s que suficiente, pero se debe tener en cuenta desde el principio para que todo funcione conforme a lo programado. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"presentaciones\">3. Presentaciones de marca<\/h3>\n\n\n\n<p>Es probablemente el uso m\u00e1s conocido de la marca animada en el campo del branding, por su impacto visual al tratarse de la presentaci\u00f3n de algo nuevo. <\/p>\n\n\n\n<p>Las grandes marcas tambi\u00e9n lo usan en casos de rebranding, y se trata de animaciones que, si bien no tienen unas limitaciones concretas, (m\u00e1s all\u00e1 de las impuestas por la propia empresa) tienden a ser una explicaci\u00f3n o justificaci\u00f3n de c\u00f3mo se ha construido la identidad visual, y c\u00f3mo \u00e9sta se adapta a los valores de la marca en cuesti\u00f3n.<\/p>\n\n\n\n<p>Los medios digitales en los que se suelen difundir son dentro de las propias p\u00e1ginas web corporativas, o landing pages creadas <em>ex profeso<\/em>, o en las plataformas de video m\u00e1s conocidas como YouTube o Vimeo.<\/p>\n\n\n\n<p>Como siempre, hablamos de im\u00e1genes corporativas, pero no necesariamente de la marca principal de una empresa. Tambi\u00e9n puede usarse para nuevas sub-marcas, o im\u00e1genes de un nuevo producto concreto, para su promoci\u00f3n.<\/p>\n\n\n\n<p>Una de las \u00faltimas presentaciones de rebranding que me ha encantado, es \u00e9sta de Fisher-Price, a cargo de la prestigiosa agencia <a rel=\"noreferrer noopener\" aria-label=\"Pentagram (se abre en una nueva pesta\u00f1a)\" href=\"https:\/\/pentagram.com\" target=\"_blank\">Pentagram<\/a>. En poco tiempo, y gracias a la m\u00fasica y a la narrativa empleada, nos acerca a la conceptualizaci\u00f3n de la nueva imagen.<\/p>\n\n\n\n<figure class=\"wp-block-embed-vimeo aligncenter wp-block-embed is-type-video is-provider-vimeo wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Fisher-Price Brand Animation\" src=\"https:\/\/player.vimeo.com\/video\/363346765?h=3ec9fe4f74&amp;dnt=1&amp;app_id=122963\" width=\"800\" height=\"450\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cortinilla\">4. Introducciones, cortinillas y r\u00e1fagas para audiovisuales<\/h3>\n\n\n\n<p>Este es seguramente el medio en el que m\u00e1s complejo ser\u00e1 el proceso y el dise\u00f1o de la animaci\u00f3n. En muchos casos, las marcas pueden producir audiovisuales, ya sea para la promoci\u00f3n de productos, como para la difusi\u00f3n de conocimientos, a base de videotutoriales, reviews, etc.<\/p>\n\n\n\n<p>Este entorno, que principamente se difundir\u00e1 en YouTube o Vimeo, requerir\u00e1 de una anim\u00e1tica distinta a la de la presentaci\u00f3n de un logo, pues se trata de una composici\u00f3n para introducir un video (cabecera) o para separar contenidos (cortinilla).<\/p>\n\n\n\n<p>En todo caso, la animaci\u00f3n deber\u00e1 ser coherente igualmente con la imagen de marca y con el car\u00e1cter que se le ha pretendido dar.<\/p>\n\n\n\n<p>En cuanto a su duraci\u00f3n, no deber\u00eda extenderse demasiado, por su propio prop\u00f3sito de introducir un contenido, es decir, la animaci\u00f3n en este caso no es el contenido en s\u00ed mismo. Igual sucede con las cortinillas par cambio de temas o de secci\u00f3n. \u00c9sta, de hecho, deber\u00eda ser m\u00e1s corta que la portada principal, para que el conjunto sea coherente.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"emojis\">5. Stickers animados en apps de mensajer\u00eda<\/h3>\n\n\n\n<p>Concretamente, en <a rel=\"noreferrer noopener\" aria-label=\" (se abre en una nueva pesta\u00f1a)\" href=\"https:\/\/telegram.org\/\" target=\"_blank\">Telegram<\/a>. Los que conozc\u00e1is esta famosa plataforma de mensajer\u00eda, de c\u00f3digo abierto, sabr\u00e9is que suele ir por delante en cuanto a innovaci\u00f3n y prestaciones, frente al gigante de  Zuckerberg, el  Whatsapp Messenger.<\/p>\n\n\n\n<p>Telegram permite el uso de emojis animados, que no hay que confundir con los gifs, que s\u00ed podemos enviar con toda aplicaci\u00f3n de mensajer\u00eda. La diferencia a nivel funcional, es que el sticker es una ilustraci\u00f3n integrada en la interfaz de la aplicaci\u00f3n, mientras que el .gif es una imagen que el usuario descarga para visualizar. Otra de las diferencias m\u00e1s evidentes es que el sticker puede aparecer contorneado, mientras que el gif suele tener un fondo cuadrado.<\/p>\n\n\n\n<video controls autoplay=\"\" loop=\"\">\n  <source src=\"https:\/\/telegram.org\/file\/464001595\/1\/eYxg2Qp-zVw.738457.mp4\/c550733c78bf39b1a1\" type=\"video\/mp4\">\n<\/video>\n\n\n\n<p>La ventaja de Telegram, por su condici\u00f3n de aplicaci\u00f3n de c\u00f3digo abierto, es que se pueden incluir tus propios emojis animados. Este es un medio de difusi\u00f3n para peque\u00f1as animaciones, que no necesariamente puede ser v\u00e1lido para todo tipo de empresas. Como en todos los casos, habr\u00e1 marcas con otras estrategias de imagen, que no consideran estos medios como una v\u00eda coherente de difusi\u00f3n de su identidad visual.<\/p>\n\n\n\n<p>A nivel t\u00e9cnico, este caso es probablemente el m\u00e1s complejo. Por un lado, podemos crear las animaciones igualmente con After Effects, pero para ser usado en el entorno de Telegram, es necesario convertirlo a un archivo .TGS. Para ello, precisaremos de <a rel=\"noreferrer noopener\" aria-label=\"Bodymovin (se abre en una nueva pesta\u00f1a)\" href=\"https:\/\/github.com\/TelegramMessenger\/bodymovin-extension\" target=\"_blank\">Bodymovin<\/a>, una extensi\u00f3n de After Effects. En <a href=\"https:\/\/core.telegram.org\/animated_stickers\">esta p\u00e1gina<\/a> est\u00e1n todos los detalles para crear las animaciones correctamente.<\/p>\n\n\n\n<p>El propio entorno e idiosincrasia del sticker, hace que su uso sea para marcas m\u00e1s desenfadadas y con un todo informal. Compa\u00f1\u00edas que tengan una mascota en su imagen, podr\u00edan usar este canal para difundir su marca animada.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"web\">6. Animaciones en entornos web y app<\/h3>\n\n\n\n<p>Para finalizar, no podemos olvidarnos del uso m\u00e1s evidente. Todas las compa\u00f1\u00edas que decidan tener su <strong>marca animada<\/strong>, deber\u00edan implementarla en su web o si disponen de ella, en su app.<\/p>\n\n\n\n<p>Cuando introducimos una animaci\u00f3n en una web lo podemos hacer de m\u00faltiples maneras, pero debemos saber si queremos primar la calidad de la imagen, frente a otros criterios como la carga de la p\u00e1gina.<\/p>\n\n\n\n<p>Actualmente PageSpeed Insights penaliza el uso de .gif, y propone el uso de videos incrustados. De optar por esta modalidad, dependiendo de la naturaleza de la animaci\u00f3n, podr\u00edamos querer que se reproduzca autom\u00e1ticamente, por lo que la opci\u00f3n de incrustar un video desde plataformar como YouTube o Vimeo puede no sernos \u00fatil en un principio, y podr\u00eda ser m\u00e1s sencillo configurarlo desde el HTML de la web.<\/p>\n\n\n\n<video controls autoplay=\"\" loop=\"\" src=\"https:\/\/assets.awwwards.com\/awards\/external\/2020\/02\/5e4263c0a811b577807312.mp4\" width=\"600\"><\/video>\n\n\n\n<p>La etiqueta video nos permite asignar atributos como loop, o autoplay, para permitir la reproducci\u00f3n en bucle o la reproducci\u00f3n autom\u00e1tica, respectivamente. Como siempre, vamos a depender del tipo de navegador y su versi\u00f3n, para saber c\u00f3mo funcionar\u00e1 exactamente, cosa que con la inserci\u00f3n de videos desde plataformas como las mencionadas, tendremos algo m\u00e1s de control sobre la visualizaci\u00f3n final, adem\u00e1s que siempre podr\u00e1n ir a la p\u00e1gina del video en concreto, y visualizarlo desde You Tube o Vimeo.<\/p>\n\n\n\n<p>Adem\u00e1s, si deseamos a\u00f1adir interactividad ya estar\u00edamos hablando del uso de javascript y dem\u00e1s herramientas que van complicando el trabajo, aunque dotan el resultado de mayor sofisticaci\u00f3n.<\/p>\n\n\n\n<p>Todo esto se podr\u00eda desarrollar mucho m\u00e1s, pues para insertar videos desde YouTube tenemos varias opciones predeterminadas que modifican el snipet que copiaremos en nuestro HTML, para autorreproducir, o iniciar el visionado en un minuto concreto del video, pero esto ser\u00eda materia de otro post. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"conclusiones\">7. Conclusiones<\/h3>\n\n\n\n<p>Como hemos visto, se podr\u00eda profundizar mucho m\u00e1s en cada uno de los apartados, tanto a nivel conceptual, como a nivel t\u00e9cnico. Si ten\u00e9is alguna propuesta para desarrollar en otros posts no ten\u00e9is m\u00e1s que dejarlo en los comentarios, y tratar\u00e9  de ampliar informaci\u00f3n en la medida de lo posible.<\/p>\n\n\n\n<p>Podemos concluir que <strong>la importancia de conocer el entorno de difusi\u00f3n es vital, pues condicionar\u00e1 la forma en la que creamos la marca animada, as\u00ed como su duraci\u00f3n, tipo de archivo final, proporciones<\/strong> y un largo etc.<\/p>\n\n\n\n<p>No va a ser igual una entrada para un video-tutorial, que la animaci\u00f3n que creemos para un sticker, por poner un ejemplo extremo de las grandes diferencias que puede supone el prop\u00f3sito de nuestra animaci\u00f3n.<\/p>\n\n\n\n<p>\u00bfYa tienes claro cu\u00e1l es el prop\u00f3sito de tu marca animada?<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Referencias y enlaces de inter\u00e9s<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>El sticker animado del punto 5 pertenece a los paquetes de stickers de <a rel=\"noreferrer noopener\" aria-label=\"Telegram (se abre en una nueva pesta\u00f1a)\" href=\"https:\/\/telegram.org\/blog\/animated-stickers\" target=\"_blank\">Telegram<\/a>.<\/li><li>La web animada del punto 6 est\u00e1 extra\u00edda de la p\u00e1gina <a rel=\"noreferrer noopener\" aria-label=\"awwwards (se abre en una nueva pesta\u00f1a)\" href=\"https:\/\/awwwards.com\" target=\"_blank\">awwwards<\/a>, y en concreto es un proyecto del estudio <a rel=\"noreferrer noopener\" aria-label=\"Locomotive (se abre en una nueva pesta\u00f1a)\" href=\"https:\/\/www.awwwards.com\/locomotive\/\" target=\"_blank\">Locomotive<\/a>.<\/li><li>Pod\u00e9is encontrar m\u00e1s detalles del proyecto de Pentagram para Fisher-Price en <a rel=\"noreferrer noopener\" aria-label=\"este enlace. (se abre en una nueva pesta\u00f1a)\" href=\"https:\/\/www.pentagram.com\/work\/fisher-price\" target=\"_blank\">este enlace.<\/a><\/li><\/ul>","protected":false},"excerpt":{"rendered":"<p>La Marca Animada va m\u00e1s all\u00e1 de su uso en la presentaci\u00f3n Ya hace tiempo que tanto motion graphics como la animaci\u00f3n, en general, se vienen usando en el campo del branding para generar una marca animada. Software espec\u00edfico optimizado para ello, como After Effects de Adobe, ha permitido dar vida y movimiento a la [&hellip;]<\/p>","protected":false},"author":1,"featured_media":2805,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_sitemap_exclude":false,"_sitemap_priority":"","_sitemap_frequency":"","footnotes":""},"categories":[19,168,170],"tags":[98,126,165,164,35],"class_list":["post-2771","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-blog-animacion","category-blog-branding","tag-animacion","tag-animacion-para-empresas","tag-branding","tag-diseno-de-marcas","tag-diseno-grafico"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u00bfEn qu\u00e9 contextos usar tu Marca Animada? - Pilaf Estudio<\/title>\n<meta name=\"description\" content=\"La marca animada ha llegado para quedarse, pero m\u00e1s all\u00e1 de su impacto visual en el primer contacto, debemos saber contextualizarlas.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.pilafestudio.com\/val\/marca-animada\/\" \/>\n<meta property=\"og:locale\" content=\"ca_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00bfEn qu\u00e9 contextos usar tu Marca Animada? - Pilaf Estudio\" \/>\n<meta property=\"og:description\" content=\"La marca animada ha llegado para quedarse, pero m\u00e1s all\u00e1 de su impacto visual en el primer contacto, debemos saber contextualizarlas.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pilafestudio.com\/val\/marca-animada\/\" \/>\n<meta property=\"og:site_name\" content=\"Pilaf Estudio\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-10T12:26:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-02-11T15:27:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.pilafestudio.com\/wp-content\/uploads\/2020\/02\/Practica2_RafaVillarraso-1.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"Rafa Villarraso\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrit per\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rafa Villarraso\" \/>\n\t<meta name=\"twitter:label2\" content=\"Temps estimat de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minuts\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.pilafestudio.com\/marca-animada\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.pilafestudio.com\/marca-animada\/\"},\"author\":{\"name\":\"Rafa Villarraso\",\"@id\":\"https:\/\/www.pilafestudio.com\/#\/schema\/person\/7eaac3fb2ccdb71db8ed1a4115fd4cbf\"},\"headline\":\"\u00bfEn qu\u00e9 contextos usar tu Marca Animada?\",\"datePublished\":\"2020-02-10T12:26:38+00:00\",\"dateModified\":\"2020-02-11T15:27:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.pilafestudio.com\/marca-animada\/\"},\"wordCount\":1755,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.pilafestudio.com\/#\/schema\/person\/7eaac3fb2ccdb71db8ed1a4115fd4cbf\"},\"image\":{\"@id\":\"https:\/\/www.pilafestudio.com\/marca-animada\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.pilafestudio.com\/wp-content\/uploads\/2020\/02\/Practica2_RafaVillarraso-1.gif\",\"keywords\":[\"animaci\u00f3n\",\"animaci\u00f3n para empresas\",\"branding\",\"dise\u00f1o de marcas\",\"dise\u00f1o gr\u00e1fico\"],\"articleSection\":[\"Blog\",\"Blog-Animaci\u00f3n\",\"Blog-Branding\"],\"inLanguage\":\"ca\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.pilafestudio.com\/marca-animada\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.pilafestudio.com\/marca-animada\/\",\"url\":\"https:\/\/www.pilafestudio.com\/marca-animada\/\",\"name\":\"\u00bfEn qu\u00e9 contextos usar tu Marca Animada? - Pilaf Estudio\",\"isPartOf\":{\"@id\":\"https:\/\/www.pilafestudio.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.pilafestudio.com\/marca-animada\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.pilafestudio.com\/marca-animada\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.pilafestudio.com\/wp-content\/uploads\/2020\/02\/Practica2_RafaVillarraso-1.gif\",\"datePublished\":\"2020-02-10T12:26:38+00:00\",\"dateModified\":\"2020-02-11T15:27:55+00:00\",\"description\":\"La marca animada ha llegado para quedarse, pero m\u00e1s all\u00e1 de su impacto visual en el primer contacto, debemos saber contextualizarlas.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.pilafestudio.com\/marca-animada\/#breadcrumb\"},\"inLanguage\":\"ca\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pilafestudio.com\/marca-animada\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ca\",\"@id\":\"https:\/\/www.pilafestudio.com\/marca-animada\/#primaryimage\",\"url\":\"https:\/\/www.pilafestudio.com\/wp-content\/uploads\/2020\/02\/Practica2_RafaVillarraso-1.gif\",\"contentUrl\":\"https:\/\/www.pilafestudio.com\/wp-content\/uploads\/2020\/02\/Practica2_RafaVillarraso-1.gif\",\"width\":1920,\"height\":1080,\"caption\":\"motion graphics\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pilafestudio.com\/marca-animada\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.pilafestudio.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u00bfEn qu\u00e9 contextos usar tu Marca Animada?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.pilafestudio.com\/#website\",\"url\":\"https:\/\/www.pilafestudio.com\/\",\"name\":\"Pilaf Estudio\",\"description\":\"Dise\u00f1o Web a Medida\",\"publisher\":{\"@id\":\"https:\/\/www.pilafestudio.com\/#\/schema\/person\/7eaac3fb2ccdb71db8ed1a4115fd4cbf\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.pilafestudio.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ca\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.pilafestudio.com\/#\/schema\/person\/7eaac3fb2ccdb71db8ed1a4115fd4cbf\",\"name\":\"Rafa Villarraso\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ca\",\"@id\":\"https:\/\/www.pilafestudio.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.pilafestudio.com\/wp-content\/uploads\/2019\/06\/RafaRigP.gif\",\"contentUrl\":\"https:\/\/www.pilafestudio.com\/wp-content\/uploads\/2019\/06\/RafaRigP.gif\",\"width\":200,\"height\":200,\"caption\":\"Rafa Villarraso\"},\"logo\":{\"@id\":\"https:\/\/www.pilafestudio.com\/#\/schema\/person\/image\/\"},\"url\":\"https:\/\/www.pilafestudio.com\/val\/author\/rafa-villarraso\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u00bfEn qu\u00e9 contextos usar tu Marca Animada? - Pilaf Estudio","description":"La marca animada ha llegado para quedarse, pero m\u00e1s all\u00e1 de su impacto visual en el primer contacto, debemos saber contextualizarlas.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.pilafestudio.com\/val\/marca-animada\/","og_locale":"ca_ES","og_type":"article","og_title":"\u00bfEn qu\u00e9 contextos usar tu Marca Animada? - Pilaf Estudio","og_description":"La marca animada ha llegado para quedarse, pero m\u00e1s all\u00e1 de su impacto visual en el primer contacto, debemos saber contextualizarlas.","og_url":"https:\/\/www.pilafestudio.com\/val\/marca-animada\/","og_site_name":"Pilaf Estudio","article_published_time":"2020-02-10T12:26:38+00:00","article_modified_time":"2020-02-11T15:27:55+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.pilafestudio.com\/wp-content\/uploads\/2020\/02\/Practica2_RafaVillarraso-1.gif","type":"image\/gif"}],"author":"Rafa Villarraso","twitter_card":"summary_large_image","twitter_misc":{"Escrit per":"Rafa Villarraso","Temps estimat de lectura":"9 minuts"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.pilafestudio.com\/marca-animada\/#article","isPartOf":{"@id":"https:\/\/www.pilafestudio.com\/marca-animada\/"},"author":{"name":"Rafa Villarraso","@id":"https:\/\/www.pilafestudio.com\/#\/schema\/person\/7eaac3fb2ccdb71db8ed1a4115fd4cbf"},"headline":"\u00bfEn qu\u00e9 contextos usar tu Marca Animada?","datePublished":"2020-02-10T12:26:38+00:00","dateModified":"2020-02-11T15:27:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.pilafestudio.com\/marca-animada\/"},"wordCount":1755,"commentCount":0,"publisher":{"@id":"https:\/\/www.pilafestudio.com\/#\/schema\/person\/7eaac3fb2ccdb71db8ed1a4115fd4cbf"},"image":{"@id":"https:\/\/www.pilafestudio.com\/marca-animada\/#primaryimage"},"thumbnailUrl":"https:\/\/www.pilafestudio.com\/wp-content\/uploads\/2020\/02\/Practica2_RafaVillarraso-1.gif","keywords":["animaci\u00f3n","animaci\u00f3n para empresas","branding","dise\u00f1o de marcas","dise\u00f1o gr\u00e1fico"],"articleSection":["Blog","Blog-Animaci\u00f3n","Blog-Branding"],"inLanguage":"ca","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.pilafestudio.com\/marca-animada\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.pilafestudio.com\/marca-animada\/","url":"https:\/\/www.pilafestudio.com\/marca-animada\/","name":"\u00bfEn qu\u00e9 contextos usar tu Marca Animada? - Pilaf Estudio","isPartOf":{"@id":"https:\/\/www.pilafestudio.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.pilafestudio.com\/marca-animada\/#primaryimage"},"image":{"@id":"https:\/\/www.pilafestudio.com\/marca-animada\/#primaryimage"},"thumbnailUrl":"https:\/\/www.pilafestudio.com\/wp-content\/uploads\/2020\/02\/Practica2_RafaVillarraso-1.gif","datePublished":"2020-02-10T12:26:38+00:00","dateModified":"2020-02-11T15:27:55+00:00","description":"La marca animada ha llegado para quedarse, pero m\u00e1s all\u00e1 de su impacto visual en el primer contacto, debemos saber contextualizarlas.","breadcrumb":{"@id":"https:\/\/www.pilafestudio.com\/marca-animada\/#breadcrumb"},"inLanguage":"ca","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pilafestudio.com\/marca-animada\/"]}]},{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/www.pilafestudio.com\/marca-animada\/#primaryimage","url":"https:\/\/www.pilafestudio.com\/wp-content\/uploads\/2020\/02\/Practica2_RafaVillarraso-1.gif","contentUrl":"https:\/\/www.pilafestudio.com\/wp-content\/uploads\/2020\/02\/Practica2_RafaVillarraso-1.gif","width":1920,"height":1080,"caption":"motion graphics"},{"@type":"BreadcrumbList","@id":"https:\/\/www.pilafestudio.com\/marca-animada\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.pilafestudio.com\/"},{"@type":"ListItem","position":2,"name":"\u00bfEn qu\u00e9 contextos usar tu Marca Animada?"}]},{"@type":"WebSite","@id":"https:\/\/www.pilafestudio.com\/#website","url":"https:\/\/www.pilafestudio.com\/","name":"Pilaf Estudio","description":"Dise\u00f1o Web a Medida","publisher":{"@id":"https:\/\/www.pilafestudio.com\/#\/schema\/person\/7eaac3fb2ccdb71db8ed1a4115fd4cbf"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.pilafestudio.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ca"},{"@type":["Person","Organization"],"@id":"https:\/\/www.pilafestudio.com\/#\/schema\/person\/7eaac3fb2ccdb71db8ed1a4115fd4cbf","name":"Rafa Villarraso","image":{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/www.pilafestudio.com\/#\/schema\/person\/image\/","url":"https:\/\/www.pilafestudio.com\/wp-content\/uploads\/2019\/06\/RafaRigP.gif","contentUrl":"https:\/\/www.pilafestudio.com\/wp-content\/uploads\/2019\/06\/RafaRigP.gif","width":200,"height":200,"caption":"Rafa Villarraso"},"logo":{"@id":"https:\/\/www.pilafestudio.com\/#\/schema\/person\/image\/"},"url":"https:\/\/www.pilafestudio.com\/val\/author\/rafa-villarraso\/"}]}},"_links":{"self":[{"href":"https:\/\/www.pilafestudio.com\/val\/wp-json\/wp\/v2\/posts\/2771","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pilafestudio.com\/val\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pilafestudio.com\/val\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pilafestudio.com\/val\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pilafestudio.com\/val\/wp-json\/wp\/v2\/comments?post=2771"}],"version-history":[{"count":43,"href":"https:\/\/www.pilafestudio.com\/val\/wp-json\/wp\/v2\/posts\/2771\/revisions"}],"predecessor-version":[{"id":2830,"href":"https:\/\/www.pilafestudio.com\/val\/wp-json\/wp\/v2\/posts\/2771\/revisions\/2830"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pilafestudio.com\/val\/wp-json\/wp\/v2\/media\/2805"}],"wp:attachment":[{"href":"https:\/\/www.pilafestudio.com\/val\/wp-json\/wp\/v2\/media?parent=2771"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pilafestudio.com\/val\/wp-json\/wp\/v2\/categories?post=2771"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pilafestudio.com\/val\/wp-json\/wp\/v2\/tags?post=2771"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}