Playable
banners
HTML5

Playable banners that will interest anyone
A playable banner is an entirely interactive internet marketing solution. It allows users to play a micro-game multiplying consumer attention for products or services advertised, providing a unique individual user experience.
Submit your application

key to

successful

advertising

campaign

Playable ads are so effective because of high user engagement. Users stop being just advertisement watchers turning into active participants.

Attractive mini-game advertisement for your product
A game with different scenarios and outcomes
When interacting the banner will lead a user directly to the app installing page
The most attractive user format
Playable banners (HTML5)

Banner

examples

Our web design team has successfully created over a hundred playable banners for different business niches.

array(5) { [“_edit_lock”]=> array(1) { [0]=> string(12) “1636222830:2” } [“_edit_last”]=> array(1) { [0]=> string(1) “2” } [“banner”]=> array(1) { [0]=> string(112) “https://test.clickable.agency/wp-content/uploads/html-banner/7da5d90f6567e08b09a70c03bd1f3ced/index.html?mute=on” } [“banner_width”]=> array(1) { [0]=> string(3) “300” } [“banner_height”]=> array(1) { [0]=> string(3) “400” } }
Анимация логотипа
Анимация логотипа
array(5) { [“_edit_lock”]=> array(1) { [0]=> string(12) “1636222843:2” } [“_edit_last”]=> array(1) { [0]=> string(1) “2” } [“banner”]=> array(1) { [0]=> string(112) “https://test.clickable.agency/wp-content/uploads/html-banner/8a76a612daae074d556c86fc42df67ff/index.html?mute=on” } [“banner_width”]=> array(1) { [0]=> string(3) “300” } [“banner_height”]=> array(1) { [0]=> string(3) “400” } }
Анимация логотипа
Анимация логотипа
array(5) { [“_edit_lock”]=> array(1) { [0]=> string(12) “1636222854:2” } [“_edit_last”]=> array(1) { [0]=> string(1) “2” } [“banner”]=> array(1) { [0]=> string(112) “https://test.clickable.agency/wp-content/uploads/html-banner/1bf3454088f360aaced25c845ec7a768/index.html?mute=on” } [“banner_width”]=> array(1) { [0]=> string(3) “300” } [“banner_height”]=> array(1) { [0]=> string(3) “400” } }
Анимация логотипа
Анимация логотипа

How do

we make

playable

banners

Professionalism and many years of experience let us develop extremely cost-effective playable banner solutions. Our playable banners are cost-efficient in terms of price-quality trade-offs and attract leads.

scenario creation

Creating a playable banner always begins with thinking through the scenario, idea, and mechanics. As a rule, this is interesting and addictive gameplay, simple. Our team of creatives and marketers created the script with extensive experience in the gaming industry. There are many factors to consider when writing a script:
1. Convenience and usability. Users should understand the task of the playable banner; it was clear where to press and what would happen when the button was pressed.
2. Originality. The banner should not be boring and mundane; it should captivate and involve a potential lead in the game.
3. Restrictions. Both of a technical nature (site requirements, restrictions on gestures and actions) and of a moral character (to create scenarios that do not offend people’s feelings, without humiliating their dignity, without the content of immoral content, etc.)

Drawing static

The stage of creating graphics comes. If the client does not have a clear vision of a playable banner’s style, we offer graphics examples and discuss the class. We are looking at two main paths to develop this stage:
1. Our skilled artists and illustrators create images from scratch, completely exclusive and original graphics.
2. Designers select graphics from specialized stocks and assemble a solid static layout.
3. The client himself provides all the graphics for animation. Whichever option is chosen at this stage, the playable banner will be assembled with high quality, if necessary, including the rendering of several frames to understand and visualize the mechanics written in the script.

Animation

The animation stage of a playable banner is one of the longest and most labor-intensive. After agreeing on the graphics and approving the layout, the source code is transferred to our motion department. Here, animation specialists bring our design to life and create all states of banner elements, animate characters, their physics, and movements, which will be shown during various user actions. All banner outcomes (successful and unsuccessful) and final pop-ups (whether you win, a bonus, a promo code, etc.) with a target transition button are animated. After the animation of all elements and outcomes of the playable banner, a video preview is created for the client.

assembly of the banner

After the end and approval of the animation, the files are transferred to the programming department. We usually use pixiJS and spineJS libraries to create playables. The first stage is writing the skeleton/engine for the banner. Such engines are individual for each project and are tailored exclusively for a specific game. Then we get the animation sources from the motion designer and fill the banner with game elements. Further, the conditions under which this animation is launched are prescribed. All game outcomes and final pop-ups are connected. After implementing all the logic, the game goes to the testing stage.

Banner testing

One of the most critical stages is banner testing. It checks the consistency of the result with the original layouts, their complete identity on all popular platforms (including mobile and desktop solutions), correctness, and synchronization of processing animations of text, images, and other elements. The correctness of banner adaptation on mobile devices is tested. Dynamic adaptation is necessary without re-downloading the banner from the server when the user changes the screen orientation to a more convenient one for viewing. The entire performance of the playable banner is checked, all scenarios and outcomes are played, and the correspondence of texts, buttons, the correctness of animation, and other vital processes are reviewed.

Adaptation of the banner to the requirements of the network

Many ad networks and platforms have specific requirements for ad creatives. Requirements for a playable banner must be provided immediately when setting up an assignment since late submission of requirements may result in a complete reassembly of the banner. The playable is initially assembled according to the structure of the site requirements, and at the final stage, after assembly, it is finally adjusted to all TT points. Adaptation can include almost any action related to the wishes of the advertising site or its technical features. A complete but not an exhaustive list of banner adaptations:
1. Minification of the amount of code.
2. Converting images to base64.
3. Adaptation by banner weight.
4. Flashing the banner for the target transition.
5. Spacer marks and pixels.

Contact us now!

Contact us right now by filling out the fields on the right. We will process your request promptly and get back to you as soon as possible.  

    Name
    Некорректное имя
    Phone
    Некорректный телефон
    Email
    Некорректный email
    Write how we can help?
    Attach the file (Optional)
    success
    what our
    clients
    think of us

    Find out how customers rate playable banners we’ve created by visiting independent websites.

    Dmitriy Ryzhikov, CEO, Smart Experiences FZC 5.0

    Clickable Agency delivered top-notch outputs that exceeded expectations. The team's professional approach and creativity continue to impress the client. Both sides maintain open communication to ensure deadlines and objectives are achieved.

    Dmitriy Ryzhikov, CEO, Smart Experiences FZC

    our

    article

    Business
    What is the success of Playable Ads
    this website uses cookies, is it ok for you?