Ad Framework Guide
Let's say there's a client who has elected to design their own ads and perhaps they may be new to GumGum's creative best practices. Regardless of whether a client is using our Photoshop templates, they may still have a lot of questions around responsive design or even the specs themselves. In which case, we recommend sharing this card with clients for a deep dive into the anatomy of a GumGum ad, which we hope will help clarify some inquires around the following:
- Main Content Area
- Side Ornamentation (Optional)
- Responsive Tiling
Main Content Area
Consider the main content area as a container for the most important elements of the ad, e.g. the logo, product shots, headlines, subtext, CTA, etc. The specs for the main content area are subject to change based on the unit type. The example below is an In-Image mobile layout from the PSD template, note the dimensions for the main content area are designed at 2x scale making the 300px max width, now 600px. While the 80px max height is now 160px and so on.
- If possible, do not design or include important elements within the portion of main content area highlighted in red.
- One visual element such as a product image, for example, can exceed beyond the max height of the main content area but only up to 100px.
- The main content area always sits on top of a background, which can be any shape but it should not be low in opacity. Meaning the ad itself should not be completely transparent or "see through." To increase the overall footprint of the ad, the background can exceed the width of the main content area as seen in the example above.
- Also, keep in mind the location of the info/close buttons which are applied to all GumGum ads within a live environment. These buttons are usually located on the right hand side and depending on how narrow the screen or image is, the closer the buttons will be to the main content area. That said, try to be mindful of design the elements being placed in the top right corner of the main content area.
Side Ornamentation
Adding side ornamentation is completely optional and it's also a great way to increase the overall footprint as well as the visual impact of an ad on wider viewports such as In-Screen & In-Screen Expandable. With that in mind, designers can include elements on either side of the main content area as long as they remain below the max height.
Still unclear? Please review the Ad Unit Ornamentation Guide in Guru for more information.
Responsive Tiling
Outside the main content area is the responsive tiling, which is the part that expands to the entire width of the image or screen. It's also clickable which helps boost CTR immensely. It should be a minimum height of 60px but on expandable formats, the tiling can grow as tall as 180px.
Tiling can made up of solid color, a pattern or seamless texture. Regardless of the fill, we highly recommend not lowering the opacity of the tiling so it's too transparent.
