Design Phase

General Best Practices

• When mocking up GumGum proprietary ads in Photoshop, always design at 2x scale for retina display.
• The background which contains the ad's content can take on many different shapes and does not have to be rectangular as seen in some of our templates and examples. Changing up the overall shape can add style or more dimension to the ad.
• Most GumGum proprietary ads require a responsive background or "tiling" therefore it's not an option to remove it. Tiling can be made up of solid color, a pattern or seamless texture. Regardless of the fill, using a transparency or lack of opacity on the tiling is acceptable, as long as there's still a strong contrast from the publisher's webpage.
• Use strong contrasting colors for the background or tile especially when designing for In-Screen adhesion formats. Avoid using colors that could blend in with a website or article such as pure white (HEX #FFFFFF).
• Keep copy short and sweet with a maximum of 15-30 characters throughout the animation. More text can only be added with extended animations, including interactive ads or dynamic rollovers.
• GumGum proprietary ads should always include a call-to-action, if one is not provided by the client, a 'Learn More' button will be added by default.

GumGum Ad Framework

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. and we highly discourage placing either of these important elements outside of the main content area. 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 200px tall (or 100px when displayed at scale).
• 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 impact of an ad on larger 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 where the ad is being served, it's also clickable which helps boost CTR immensely. It should be a minimum height of 120px (or 60px when displayed at scale) but on expandable formats, the tiling can go as tall as 360px (or 180px when displayed at scale).

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.

Preparing Elements for Animation

Overview

• If statics/storyboards are needed for client review, always reduce size by 50% when exporting as JPGs so the design is true to scale.
• Keep PSDs layers organized and files labeled.
• All text and vector based elements should be converted to shape layers made into SVGs.
• Everything other than vector based elements should be converted to Smart Objects.
• Refrain from using blending modes in your design as it will not render in Ad Builder or Hype. Although, Hype can use a specific Javascript function to allow blending modes to work, results may vary between web browsers so please use with caution.

Tips for Exporting (in Photoshop)

Designers will need all the elements of their design accessible to bring into Hype or Ad Builder. There are two methods when quickly exporting design elements in Photoshop.

Export As | For this method, right-click on the layer(s) you wish to export. Selecting 'Export As' will bring up a new window, where you can select the format for each layer and adjust sizing, if needed.

Image Assets | When using this method, be sure all the layers are named correctly. The names of the layers will become the file name which is why they always end with the format type. When naming a layer that contains a Smart Object, the name of that layer should end with .png or .jpg depending on which format is preferred. The same can be applied to shape layers but in order to remain a vector, the name of the layer should end with .svg as the format. Remember, live text should be converted to shape layers before exporting as a SVG file. Once the option, File > Generate > Image Assets is selected, Photoshop will automatically export a folder containing all the images.