By the end of this tutorial, you’ll have a working, automated creative workflow for display ads using Viewst — from Figma/Adobe files all the way to export-ready HTML5, GIF, or MP4 assets.

You’ll see how to:

• Turn a manual banner-production process into a governed digital workflow

• Connect design tools to Viewst as your production infrastructure

• Use marketing workflow automation rules to handle resizes, variants, and exports

• Keep brand control while scaling output for many markets and campaigns

Prerequisites

Before you start, make sure you have:

• Design tools ready: Figma or Adobe (Photoshop/Illustrator) with at least one master display concept

• Viewst account: with access to projects, brandbooks, and export features

• Campaign requirements documented:

  • Required ad sizes (e.g., 300×250, 728×90, 160×600, 300×600, 320×50, 970×250)

  • Planned variants (e.g., A/B headlines, localized languages, offer tiers)

  • Target channels (e.g., Google Display Network, DV360, retail media, direct buys)

• Stakeholders identified:

  • Creative lead / design owner

  • Creative ops or production lead

  • Performance marketing / media buyer

If you’re still deciding on your broader tool stack, you may want to read this related guide first: best creative automation platforms for building a digital workflow for ad production.

1. Map Your Current Manual Workflow (So You Know What to Automate)

The most common failure in automation projects is skipping this step. If you don’t map reality, you automate chaos.

Goal of this step: document your existing banner-production process end-to-end, including all the handoffs and bottlenecks.

Actions

1. Write out the current workflow in 6–8 steps Example for a typical display campaign:

   • Brief arrives via email or ticketing system

   • Designers create master concepts in Figma/Adobe

   • PM or production lead lists required sizes and variants in a spreadsheet

   • Designers manually resize each banner

   • Motion designer adds animations in a separate tool

   • Exports sent as files via email/Slack to media team

   • Feedback and change requests come back as screenshots and comments

   • Final versions renamed, zipped, and sent again

2. Highlight where time is actually spent Ask your team:

   • How long does it take to produce a full banner set today?

   • What % of that time is new design vs resizing/versioning?

   • How many revisions does a typical campaign require?

   Many teams find that 40–60% of production hours go to repetitive tasks like resizing, exporting, and renaming — exactly the work Viewst is built to automate.

3. Identify your “non-creative suffering” Mark the steps that are:

   • Purely mechanical (resizing, exporting, file naming)

   • Error-prone (manual copy-paste of text, colors, or logos)

   • Chaos-inducing (feedback across email, Slack, decks)

These marked steps are your automation targets.

2. Define Your Master Creative and Brandbook Rules

Without a clear master creative, automation becomes a fancy copying machine. Viewst’s strength is working from a controlled source of truth.

Goal of this step: decide what your master creative looks like and how your brand rules will be enforced in Viewst.

Actions

1. Choose a single master layout per campaign family For example:

   • Subscription SaaS campaign: 1 hero layout for all performance banners

   • Retail promo campaign: 1 base layout for all store and offer variations

   Your master should include:

   • Logo lockup

   • Primary and secondary headline fields

   • Visual focal image or illustration area

   • CTA button with consistent label and shape

2. Document brand rules that must never be broken At minimum, define:

   • Approved typefaces and hierarchy (e.g., H1, H2, body)

   • Color system (brand primary, secondary, background, CTA)

   • Logo usage (minimum size, exclusion zones, placements)

   • CTA patterns (button shape, corner radius, hover/active states)

3. Create or refine your brandbook in Viewst

   • Set type styles for headlines, body, and buttons

   • Store your palette and component styles

   • Lock critical elements (logo, legal text, background rules) so they propagate consistently to all variants

Common failure: skipping brandbooks and relying on manual policing. At scale, this leads to rogue fonts, off-brand colors, and local teams improvising designs.

3. Import Your Master Design from Figma or Adobe into Viewst

This is where Viewst becomes the infrastructure layer between your design tools and your media platforms.

Goal of this step: convert your master creative into a Viewst project with editable HTML5 layers, not flat images.

Actions

1. Prepare your file in Figma/Adobe

   • Use named layers for:

     • Logo

     • Main image

     • Headlines (H1, H2)

     • Body copy

     • CTA button and label

   • Group elements logically (e.g., “Header bar,” “CTA block,” “Footer/legal”).

2. Import into Viewst In Viewst:

   • Create a new project for your campaign

   • Use the Figma or Adobe import option

   • Select your master layout file

   Viewst will convert your design into editable HTML5, with layers mapped so you can automate changes later.

3. Clean up and align with your brandbook

   • Map imported text styles to your Viewst brandbook styles

   • Replace any ad-hoc colors with your defined palette

   • Ensure logo and CTA components match your locked brand components

4. Save this as your Master Template

   • Name it clearly, e.g., 2026_Q4_SaaS_Performance_Master.

   • Tag it with campaign, region, and channel metadata if your org uses them.

Common failure: importing flat images instead of structured layouts. That kills automation. Always keep text and graphical elements as separate layers.

4. Use AI Smart Resize to Generate All Required Banner Sizes

Smart resize is where you immediately reclaim hours of production time.

Goal of this step: generate all your sizes from one master, using Viewst’s AI Smart Resize instead of manual layout work.

Actions

1. List your required sizes Typical display sets often include:

   • 300 × 250 (Medium Rectangle)

   • 336 × 280 (Large Rectangle)

   • 728 × 90 (Leaderboard)

   • 160 × 600 (Wide Skyscraper)

   • 300 × 600 (Half Page)

   • 320 × 50 (Mobile Banner)

   • 320 × 100 (Large Mobile Banner)

   • 970 × 250 (Billboard)

2. Run AI Smart Resize from your master template In Viewst:

   • Open your master creative

   • Select AI Smart Resize

   • Input the list of target sizes

   • Launch the resize batch

   Viewst uses AI to reposition and scale elements intelligently per size, maintaining hierarchy and readability.

3. Review and tweak key layouts

   • Prioritize high-impact placements (e.g., 300×250, 728×90, 320×50)

   • Check:

     • Headline legibility

     • Logo prominence

     • CTA readability and position

     • No critical content is cut off or overlapping

4. Save your resized set as a linked family

   • Ensure they remain connected to the master so future edits propagate.

Common failure: treating each resized banner as a separate file. You lose the ability to update once and sync everywhere. Keep them structurally linked to the master inside Viewst.

5. Automate Variants Using Structured Fields and AI Designer

Now that you have a full size set, the next layer of automation is content variation: A/B tests, localization, and offer tiers.

Goal of this step: connect copy and content variations to structured fields instead of manually editing each banner.

Actions

1. Define a variant schema For each campaign, list:

   • Variable fields:

     • Headline

     • Subheadline

     • Price or discount

     • CTA text

     • Local terms (currency, region names)

   • Fixed fields:

     • Logo

     • Background

     • Legal disclaimers

2. Map these variables in Viewst

   • In your master template, tag text layers as fields, e.g.:

     • headline_primary

     • headline_secondary

     • price_label

     • cta_label

   • Connect these to your brandbook styles.

3. Use Viewst’s AI Designer where it helps

   • For campaigns with many variations, use AI Designer to:

     • Generate structured HTML5 banner sets from prompts

     • Propose alternate headline/CTA combinations

   • Always review outputs against your brandbook and legal requirements.

4. Create a variant table (even a simple CSV) Example schema:

   • variant_id

   • locale (e.g., en-US, es-MX)

   • headline_primary

   • headline_secondary

   • price_label

   • cta_label

   Import or paste this into Viewst to generate structured variants across your entire banner set.

Common failure: letting AI free-generate assets without constraints. Use AI inside your governed template and brandbook so automation reinforces your standards.

6. Add Motion with AI Instant Animator (Without a Motion Designer Bottleneck)

Subtle motion can dramatically increase engagement, but not every team has bandwidth for complex animation passes.

Goal of this step: use AI Instant Animator to add on-brand motion across layers without leaving Viewst.

Actions

1. Identify which elements should move Common, non-disruptive motion patterns:

   • Fade-in for logo and headline

   • Slide-up or slide-in for CTA

   • Gentle parallax on background image

   • Pulse or subtle emphasis on CTA after a few seconds

2. Use AI Instant Animator In Viewst:

   • Select your master creative (or the full banner set)

   • Apply Instant Animator to:

     • Logo layer (e.g., fade-in at 0.3–0.5 seconds)

     • Headline layer (e.g., slide-in from below)

     • CTA layer (e.g., gentle scale-up on hover or loop)

3. Set timing rules consistently

   • Total animation length for display ads is often best under 15 seconds

   • Avoid overly complex sequences that distract from the message

   • Apply the same timing preset across all sizes to preserve consistency

4. Preview across several sizes

   • Focus on your smallest formats (320×50, 300×250) to ensure motion still reads clearly

Common failure: adding aggressive, off-brand animation in a few sizes only. Keep motion patterns simple, repeatable, and applied consistently through the linked set.

7. Set Up Structured Review and Approval Inside Viewst

If feedback still happens in email or random screenshots, you haven’t really automated your workflow.

Goal of this step: bring creative review, comments, and approvals into Viewst so the production environment is the collaboration environment.

Actions

1. Define your approval stages Typical stages:

   • Creative director review (concept and layout)

   • Brand review (logos, colors, copy)

   • Legal/compliance review (for regulated industries)

   • Final production sign-off

2. Invite stakeholders into Viewst

   • Add reviewers with appropriate roles/permissions

   • Give them access to specific projects or campaigns only

3. Use in-context commenting

   • Encourage reviewers to comment directly on banners

   • Use @mentions for specific owners

   • Resolve comments once addressed to keep a clear audit trail

4. Capture approvals at the set level

   • Mark an entire banner set as approved once all comments are resolved

   • Lock versions against accidental edits after approval, if required

Common failure: exporting PNGs to decks for review. This breaks the chain of truth and forces rework. Keep review attached to the actual HTML5 banners in Viewst.

8. Configure Export Rules and Connect to Media Platforms

Your workflow isn’t fully automated until export formats and naming follow repeatable rules that your media team can depend on.

Goal of this step: standardize export formats, naming, and packaging so media platforms can ingest assets with minimal manual handling.

Actions

1. Define export formats per channel Examples:

   • Programmatic (DV360, The Trade Desk):

     • HTML5 packages

     • Backup GIF/PNG

   • Google Display Network:

     • HTML5 or static assets depending on campaign setup

   • Social placements (if applicable):

     • MP4 for motion, PNG/JPEG for static

2. Set naming conventions Agree on a pattern like:

   brand_campaign_platform_size_locale_variant.ext

   Example:

   acme_q4promo_gdn_300x250_en-us_v1.html

3. Use Viewst export presets

   • Create export presets per channel (e.g., “GDN HTML5,” “DV360 HTML5+GIF”)

   • Apply presets to your entire banner family

   • Ensure correct compression and file-size thresholds for each platform

4. Package by campaign or flight

   • Export entire sets as zipped packages organized by:

     • Flight dates

     • Market/locale

     • Platform

5. Hand off via your standard media workflow

   • Deliver exports through your existing traffic system (e.g., ad server, DSP, or internal media hub)

Common failure: ad hoc naming and mixed formats. This slows media trafficking and increases error risk. Treat export rules as part of your automation — not an afterthought.

9. Establish Marketing Workflow Automation Rules Around Viewst

With production now centralized in Viewst, you can layer broader marketing workflow automation around it.

Goal of this step: define rules for when and how new requests become Viewst projects, and how updates flow back to media.

Actions

1. Standardize inputs Use a structured brief template that includes:

   • Campaign name and objective

   • Target platforms

   • Required sizes

   • Variant schema (A/B tests, locales)

   • Deadlines and launch windows

2. Connect your ticketing or project system Even if via process (not API) initially:

   • Brief enters Jira/Asana/Wrike

   • Production lead creates a corresponding Viewst project

   • Viewst project link added back to the ticket for traceability

3. Create update rules Examples of practical rules:

   • Rule 1: Any copy change must be updated in the master template in Viewst — not in exported files.

   • Rule 2: Local market requests are added as new variants, not independent designs.

   • Rule 3: No media trafficking happens before a Viewst approval flag is set.

4. Schedule periodic audits

   • Monthly or quarterly reviews of:

     • Production time saved

     • Number of banner sets shipped

     • Error/rework incidents

   • Use these to refine templates, brandbooks, and workflow rules.

Common failure: treating Viewst as “just another tool” instead of the central production infrastructure. Your rules should reflect that Viewst is the scaling engine for banners.

10. Measure the Impact and Iterate Your Automated Workflow

Automation is not “set and forget.” Your first version should be a baseline you improve.

Goal of this step: quantify the impact of Viewst and continuously tune your workflow.

Actions

1. Track before/after metrics At a minimum:

   • Average time to produce a standard banner set

   • Number of sizes and variants shipped per campaign

   • Number of revisions per campaign

   • Time from brief to media-ready assets

2. Compare manual vs automated workflows For example:

   • Manual: 3–5 days to produce a full HTML5 set with 10 sizes and 3 variants

   • With Viewst: 1–2 days for the same scope once templates and brandbooks are set

   Even conservative improvements of 30–50% faster turnaround can translate into more A/B tests and higher media ROI.

3. Capture qualitative feedback Ask your team:

   • Designers: “How much time are you spending on creative versus production tasks now?”

   • Media buyers: “Are handoffs clearer and more consistent?”

   • Creative ops: “Is it easier to forecast capacity and timelines?”

4. Iterate templates and rules

   • Promote best-performing layouts to master templates

   • Remove unused or obsolete sizes from your default sets

   • Tighten brandbook rules where drift still appears

Common failure: stopping at initial time savings and not reinvesting them into more testing and creative improvement. Use your recovered hours to run smarter experiments.

FAQ: Troubleshooting Your Automated Creative Workflow in Viewst

1. What if my design imports from Figma/Adobe look wrong in Viewst?

• Check that text layers in Figma/Adobe aren’t converted to outlines before import.

• Ensure grouped elements are logically structured (no unnecessary flattening).

• After import, map fonts and styles to your Viewst brandbook to fix inconsistencies.

If issues persist, create a simplified test file and import it to isolate which components cause problems.

2. How do I handle last-minute copy or legal changes?

• Update the text once in your master template in Viewst.

• Sync changes across the linked banner set.

• Re-run export presets for the affected campaigns.

Avoid editing exported HTML or images directly — that breaks your single source of truth and forces manual rework next time.

3. Can I use Viewst for both static and animated banners?

Yes. Viewst is an HTML5-native production platform:

• Use it for static HTML5 or image-based banners

• Add motion with AI Instant Animator for lightweight animations

• Export GIF or MP4 as needed, depending on platform requirements

Keep all versions (static and animated) tied back to the same master template and brandbook.

4. How do I keep local markets from going off-template?

• Lock critical elements in your Viewst brandbook (logos, colors, key layout zones).

• Provide markets with pre-approved templates inside Viewst instead of raw files.

• Set rules that any new layout requests go through the central creative or ops team.

This lets local teams adapt copy and offers without compromising brand integrity.

5. Is Viewst replacing my designers or my design tools?

No. Viewst sits between design (Figma/Adobe) and media (DSPs, ad servers):

• Designers still create core concepts and master layouts.

• Viewst automates non-creative work: resizing, exporting, basic animation, and versioning.

• Media teams receive cleaner, more consistent packages.

The goal is to remove mechanical work from creative professionals — not replace them.

With this setup, Viewst becomes your production infrastructure for display ads: a single place where master creatives become scalable, governed, and export-ready assets — without burning out your team or sacrificing quality.