IFEMA FITUR Ad Case Study

Making an international campaign at Making Science for IFEMA

This year, while I was at Making Science, I took part in FITUR Ad Campaign, one of the biggest for IFEMA

Situation

IFEMA is the first operator in Spain and one of the most important in Europe within the international circuit of the fair and congress industry.

Founded in 1980, IFEMA is a consortium formed by Madrid Regional Goverment, Madrid City Council, Chamber of Commerce and Industry and Montemadrid Foundation. Their activity has an economic impact on the territory of 4,374 billion euros and generates more than 26,000 jobs.

IFEMA in data:

+100 million visitors
+760K participating companies
+2.1K fairs held
+10K congresses, conventions and other profesional leisure events

Making Science is a consultancy, comes as a result of the integration of the digital marketing agency MAKE Digital Marketing, the consulting firm The Science of Digital, the creative agency Crepes&Texas and the technological solutions and services company i2TIC and the software infrastructure provider delivery mCentric. Making Science has more than 200 professionals and experts in the digital world.

FITUR is the International Tourism Trade Fair in Madrid. FITUR is the global meeting point for tourism professionals and the leading trade fair for inbound and outbound markets in Latin America. At its staging, FITUR broke all previous participation records with 10,487 companies from 165 countries and regions, 142,642 trade visitors and 110,848 visitors from the general public.

Task

I was the Team lead for IFEMA Ad Campaigns at Making Science. I had a team of three great designers and we made together all Ad Campaigns.

My roll for this campaign was to animate and program all the Display Ads for FITUR Ad Campaign. The Design and texts were made by Ani González, a member of the team.

All Ad formats were developed with Google technology (Making Science is a Google partner).

Action

Let´s take a look at the design of the Master. We used to make first the 300x600. Here you can see the design for the six formats for this campaign (300x600, 160x600, 728x90, 336x280, 300x250 and 970x250). As you can see these are Ads with two frames.

Master Ad

The problem here was this: We had make all the Ads in English and Spanish and with a lot different targets, so there were variations on texts, images, call to actions and logos.

Actually, there were ten different categories (Master and these nine you see below). For each one we had six Ads, that means 6x10 = 60 Ads, but in two languages, so 60x2 = 120 Ads.

Different categories for a 300x600

First I made a Symbols system so as to go faster when exporting.

Making symbols

Secondly: The Ad had two steps, but I added a first one showing the FITUR logo, so finally the Ad had three frames.

For the FITUR logo, I made an svg and renamed all the paths, so it is easier to animate by code later. If you see the logo I had these ids:

apertura_izda/f/i/i point/t/u/r/apertura_dcha

What you do is that, you export this logo directly to .svg, and then, you open it in a code editor so you can animate it.

Ad Frames

Animation: It was a fast Ad, usually I like doing things slower. Well, as you know, when you work for Google you have some limitations:

  • 30 seconds of animation with no loop
  • Weight limited to 500 Kb
  • Performance
  • Click mus follow DoubleClick instructions

Here you can see a demo of the final Ad:

I was using GSAP library (I think version 3 hadn´t been released yet) for the animation.

Here you can see the Code:

As you can see for Google you need and Ad Initialization, then some styles (in example, border is compulsory). For the HTML we use to place all images in a <div> as you don´t need semantics for Ads. Then make variables and animate then with GSAP in the js part.

Result

So, once you have the master, you can use almost the same code for the rest of the Ads, there will be some variations on x and y positions, but I made this 120 Ads in less than two days.

Design Technologist. FrontEnd | DCO | Display | Webflow | UXR | UXDesign | Writing | NoCode | Lifelong learner | Photographer | Runner | Traveller