Good typefaces, a strong photograph, and a polished button do not automatically make an ad banner clear. If every element demands the same amount of attention, the eye jumps between them and the main message gets lost.
That is why composition should not begin with “where should the copy go?” Start with a more important question: what should the viewer notice first, second, and third? Once that sequence is clear, arranging the remaining elements becomes much easier.
What is ad banner composition?
Ad banner composition is the system of relationships between every element in the layout:
- copy;
- the image or product;
- price and discount;
- the call to action;
- logo;
- background;
- decorative details;
- negative space.
An element's position matters, but so does its visual weight—how strongly it attracts attention compared with everything around it.
A headline may sit in the correct position at the top of the banner, but a large red “50% OFF” badge beside it can still become the first thing people notice. The headline is technically the primary element, but the discount is visually dominant.
Composition is therefore more than arranging objects neatly. It answers three questions:
Where will the viewer look first? What will they understand next? Where should their eye go after that?
If the layout does not provide clear answers, its elements begin competing with one another.
First decide what the viewer should notice
Starting directly in Figma is often inefficient. You add a photograph, then a headline, a price, a badge, an arrow, and a logo. Within minutes, the frame is full even though the priorities have never been defined.
A more reliable process looks like this.
1. Define one core message
Try to express the purpose of the banner in one sentence.
For example:
Sushi delivery with 30% off.
Or:
The new sneaker collection is now available.
If one sentence has to contain five separate benefits, the ad creative is probably being asked to solve too many problems at once.
2. Choose the main visual focal point
It does not have to be copy.
The focal point might be:
- the product;
- a person;
- the price;
- a discount;
- a concise offer;
- the outcome of a service;
- an unusual image.
In a coffee ad, a large cup might be the focal point while the copy supports the image.
In another banner, “Buy one coffee, get one free” could lead while the photograph becomes secondary.
Both approaches are valid. The problem begins when the cup, headline, discount, price, and button are all enlarged at the same time.
3. Define the second and third levels
Temporarily ignore the exact colors and imagine the layout as three levels of attention:
1 — Primary focal point.
The element that begins the viewer's experience of the banner.
2 — Main information.
The offer, explanation, or product that develops the first level.
3 — Action or supporting information.
The CTA, an additional condition, or the logo.
Three levels do not mean the banner must contain exactly three objects. One level can be an entire group: a current price, original price, and discount label may read as a single unit.
The important thing is to prevent five separate elements from looking like five equally important messages.
Core principles of ad banner composition
One primary visual focal point
The most common problem is not a lack of emphasis, but too much of it.
Imagine a product banner that contains:
- a large product image;
- an enormous headline;
- a brightly colored price;
- a red discount circle;
- a high-contrast button;
- a decorative arrow.
Each element may look acceptable on its own. Together, they compete.
Ask one question: what matters most in this layout?
If it is the product, give it more visual weight and reduce the emphasis on the discount and copy.
If “50% OFF” is the core message, the product can become a supporting object.
If the offer itself is exceptionally strong, the image may not need to compete with the typography at all.
The other elements do not need to disappear. They need to become secondary to the focal point.
Visual hierarchy: first, second, and third level
Size is the most obvious way to direct attention, but it is far from the only one.
Visual weight is also affected by:
- scale;
- contrast;
- color;
- saturation;
- position;
- the amount of space around an element;
- shape;
- detail density.
A small red badge on a quiet light background may attract more attention than a large gray headline.
Do not build the hierarchy using only this rule:
important = large.
Judge elements relative to one another.
Move back from the screen or reduce the layout, then ask:
What do I see first? Second? Third?
If the actual sequence differs from the intended one, revise the composition.
Grouping and alignment
A composition can fall apart even when it contains relatively little information. Sometimes the content is limited, but every line looks like an unrelated object.
For example:
30% OFF
THIS WEEKEND ONLY
ENTIRE COLLECTION
With random spacing and different alignments, the viewer has to process each line separately.
Group them into one block:
30% OFF
Entire collection
this weekend only
and they begin to read as one offer.
A useful principle is: the stronger the semantic relationship between elements, the more visible that relationship should be in the layout.
You can create that relationship through:
- consistent alignment;
- tighter spacing within a group;
- more space between separate groups;
- a shared background or container when it serves a purpose.
Alignment also creates connection. When the headline, description, and button begin on the same vertical line, they already feel more cohesive.
Balance and visual weight
Balance does not mean placing the same number of objects on the left and right.
Imagine a large photograph of a person on the right, with only a headline and button on the left.
The two sides contain different numbers of elements, yet the composition can still feel balanced: the visual mass of the photograph is offset by high-contrast typography and negative space.
It helps to think of visual weight through pairs:
- large ↔ small;
- dark ↔ light;
- saturated ↔ restrained;
- dense ↔ open;
- high-contrast ↔ neutral.
A large dark object on the right does not require an equally large object on the left. A compact but high-contrast block of copy may be enough.
Check the overall impression, not coordinate symmetry: does the layout feel as if it is tipping to one side?
Negative space
A common beginner mistake is treating empty space as an unfinished area.
When space remains, the impulse is to add:
- an arrow;
- an icon;
- a caption;
- a decorative shape;
- another benefit.
But negative space serves a specific purpose: it separates groups and strengthens important elements.
Compare the price in two layouts.
In the first, it has enough room around it.
In the second, it is surrounded by the original price, discount, star, three benefits, caption, and arrow.
The second layout contains more information, yet the price block itself may become less visible.
During the final review, ask “what can I remove without losing meaning?” instead of “what else can I add?”
Removing two decorative elements is sometimes what allows the composition to emerge.
Image and copy should work together
An attractive image is not necessarily suitable for an ad banner.
Imagine a photograph containing a person, interior, bright clothing, several objects, and complex lighting. Add a headline, price, and button over it, and the photograph interferes with the information while the information obscures the photograph.
Before choosing the visual, decide where the copy will go.
Reliable options include:
- object on the right, copy on the left;
- object on the left, copy on the right;
- product in the center, information above and below;
- a photograph with a quiet area reserved for copy;
- separate zones for the image and text block.
If the image is AI-generated, you can define this composition in the prompt—for example, place the person on the right and leave a quieter area on the left.
The principle is simple: the image should create room for information instead of forcing the designer to search for an empty corner in an existing photograph.
The CTA completes the path but does not have to begin it
A button matters, but it does not always need to be the largest and most contrasting element.
Imagine this ad:
Up to 40% off sneakers
New collection
Shop styles
It is perfectly reasonable for the viewer to notice “up to 40% off,” then see the product, and only then reach the action.
If an enormous red “Buy” button takes over before the viewer understands the offer, the hierarchy becomes confusing.
The CTA can be clearly visible, but its visual weight should match its role in that specific layout.
There is no universal rule that the button must always be the brightest element.
Practical composition layouts for ad banners
A composition layout is not a finished design. It is a framework for beginning the work and allocating the main zones.
Copy on the left, object on the right
The headline, explanation, and CTA sit on the left; the product, person, or key image sits on the right.
Best for: product advertising, services, apps, and education products.
Primary element: decide in advance whether the offer or the object receives more visual weight.
Supporting information: smaller details can sit beneath the headline or near the CTA.
Common mistake: making both halves equally dense, which creates two separate banners inside one layout.
Central object
The product or person becomes the center of the composition, with information arranged around it.
Best for: footwear, cosmetics, consumer tech, beverages, packaging, and other visually compelling products.
Primary element: the central object.
Supporting information: headline above or beside the object, with conditions and CTA below.
Common mistake: surrounding the product with so many captions and decorative elements that it stops being the focal point.
Large typography
The copy becomes the primary visual element:
SALE
50% OFF
NEW COLLECTION
The image may be small or omitted entirely.
Best for: a concise, compelling offer, event, sale, or announcement.
Primary element: one phrase or number.
Supporting information: explanation and action.
Common mistake: applying display-scale typography to a long sentence and creating an enormous paragraph instead of a clear focal point.
Separate image and text zones
The layout is divided into two distinct areas—for example, image above or left, information below or right.
Best for: complex photography, mandatory long copy, and restrained commercial communication.
Primary element: either the image or headline, depending on the objective.
Supporting information: fits naturally inside the dedicated text zone.
Common mistake: splitting the layout into equal halves without considering the visual weight of the content.
Diagonal composition
Large elements create an implied diagonal direction, which can add a sense of movement.
Best for: sports, events, automotive campaigns, and dynamic products.
Primary element: the object or headline at the beginning of the visual path.
Supporting information: follows the overall directional logic.
Common mistake: treating the diagonal as decoration and rotating random elements. Movement comes from the relationship between objects, not the angle alone.
Card-based structure
Information is organized into several clear blocks—for example, the main offer, benefits, and action.
Best for: banners that genuinely need to communicate several separate units of information.
Primary element: one large block.
Supporting information: quieter cards or labels.
Common mistake: giving every card the same contrast. The layout gains structure but loses hierarchy.
Controlled asymmetry
Elements are not tied to an obvious center or equal split, yet their visual weight remains balanced.
Best for: fashion, creative campaigns, large typography, and unconventional imagery.
Primary element: one dominant object or line of copy.
Supporting information: can occupy different areas as long as the relationships remain clear.
Common mistake: confusing asymmetry with randomness. Interesting placement of every individual object does not guarantee a coherent composition.
Rule of thirds, Z-patterns, and grids: tools, not laws
The rule of thirds can help when you are unsure where to place the main object. Divide the frame into a conceptual 3 × 3 grid and try moving the key element toward one of the anchor areas instead of centering it automatically.
This can reveal a more interesting composition, but it does not make centered placement inferior.
Treat the Z-pattern as one possible arrangement of anchor points, not as a proven viewing sequence for every ad banner.
For example, you might place:
- the first focal point at the top left;
- the product or key message closer to the center;
- the CTA at the bottom right.
If the highest-contrast object is elsewhere, however, the viewer may begin there instead.
The same applies to modular grids. A grid helps you:
- align elements;
- keep spacing consistent;
- create groups;
- control structure.
It does not make composition decisions for the designer.
Use a framework when it helps you move beyond the empty frame, but judge the result by its real visual hierarchy.
How to build an ad banner composition from scratch
When you have a blank frame and a collection of assets, work through the following sequence.
Step 1. Write down the core offer
For example:
Sushi delivery with 30% off.
If the meaning cannot yet be expressed concisely, it is too early to work on decoration.
Step 2. Define the primary element
What matters more in this specific banner:
30% off or the sushi photograph?
Suppose the discount becomes the focal point.
Step 3. Place only two or three core objects
For example:
- 30% off;
- the photograph;
- a short headline.
Do not add the logo, button, benefits, or decorative details yet.
If the composition does not work with these three objects, more detail will not fix it.
Step 4. Define the viewing path
For example:
30% off → sushi → delivery → order
This is not a mandatory path followed by every viewer. It is your intended order of priorities, which must then be tested visually.
Step 5. Group related information
If these lines belong together:
30% off
your first order
they should look like one block, not two unrelated labels.
Step 6. Check the balance
Reduce the layout and look at its large visual masses.
Does one side feel overloaded?
Has a random bright object started overpowering the intended focal point?
Step 7. Add supporting elements
Only now should you introduce:
- the logo;
- CTA;
- additional terms;
- small labels;
- decorative details.
Step 8. Remove what is unnecessary
Ask this about every element:
What would the banner lose if I removed it?
If the answer is “nothing,” the element is unnecessary.
How to tell when the composition is not working
You do not need advanced theory to spot many problems. Weak composition has recognizable symptoms.
You cannot name the primary element
If the answer sounds like this:
“The product is probably the main thing, but also the discount and headline...”
the hierarchy has not been defined.
Your eye keeps jumping around
Price → logo → photograph → discount → back to the headline.
The layout has several entry points but no clear priority.
Everything has the same level of contrast
Large headlines, bright badges, bold copy, saturated colors, and a huge button all appear together.
When every element is shouting, identifying the focal point becomes harder.
There are too many independent groups
The headline sits in one corner, the price in another, the terms elsewhere, and the CTA even farther away.
Even a small amount of information feels complex when the blocks lack a visual relationship.
The image competes with the copy
A face, product, or important photographic detail sits directly beneath the headline. The copy lacks contrast and the image becomes partially obscured.
Instead of reinforcing each other, the two elements get in each other's way.
The layout stops working when reduced
Every caption is readable on a large monitor. In a small preview, details disappear, copy turns into noise, and the focal point is lost.
You have to explain the composition verbally
If no one knows where to look first without the designer's explanation, the visual hierarchy is not doing its job.
Four quick tests for a finished banner
Squint test
Squint or let your vision fall slightly out of focus.
The copy and small details will recede, leaving the main visual masses.
Now check:
- what stands out first;
- which objects compete;
- whether the second and third levels remain visible;
- whether an unintended element has become too prominent.
If a supporting element becomes dominant when blurred, the hierarchy needs another pass.
Thumbnail test
Reduce the creative to roughly the size at which a viewer will encounter it.
Do not try to read the small copy. First assess:
- whether the focal point remains clear;
- whether the product is recognizable;
- whether the main message is readable;
- whether small details merge together.
A composition that works only at full-screen size may be too complex for its actual placement.
Grayscale test
Temporarily convert the layout to grayscale.
This makes it easier to see whether the entire hierarchy depends on color alone.
Check:
- whether the main object still leads;
- whether text levels remain distinct;
- whether information groups stay separated;
- whether important elements become equal in weight.
This does not mean a strong banner must work identically without color. Color is a legitimate design tool. The test simply isolates scale, contrast, position, and detail density.
Test the banner in its real placement
Do not evaluate an ad creative only inside a clean Figma frame.
Place it in a rough mockup of the environment where it will appear—for example, a feed surrounded by other cards.
Check:
- whether the focal point is prominent enough;
- whether the banner feels too small;
- whether the copy disappears into the interface;
- whether key elements survive the expected scaling or cropping.
Safe zones and cropping rules must be checked against the requirements of the actual ad platform; there is no universal specification for every placement.
Before and after: fixing weak composition
The following are three teaching examples. They do not present real campaign results; they illustrate common composition problems.
Example 1. Too many focal points
Suppose you are designing a banner for a new sneaker collection.
Before:
- an enormous photograph of the shoe;
- a large “NEW COLLECTION” headline;
- a red “40% OFF” badge;
- a large price;
- a bright button;
- a prominent logo.
The problem is not the amount of information itself. Almost every element carries the same visual weight.
The eye jumps between the discount, sneakers, and headline.
What changes:
- Make the product the primary element.
- Keep the sneakers as the largest object.
- Combine “New collection” and “up to 40% off” into one text block.
- Reduce the discount badge.
- Keep the button visible but quieter than the product.
- Reduce the logo.
After:
The product reads first.
The new-collection offer and discount read second.
The action comes third.
The content has barely changed; its hierarchy has.
What this demonstrates: composition can often be fixed by reducing the weight of supporting elements rather than adding new effects.
Example 2. Copy competes with the image
Suppose the banner advertises a skincare serum.
Before:
A model's photograph fills the banner. Hair and clothing occupy the left, the face sits in the center, and a hand holding the product appears on the right.
Placed over the image are:
New serum for radiant skin
and a button.
There is no quiet area for copy. It overlaps photographic detail, so the designer adds a text shadow, then a dark overlay, and finally another container.
What changes:
- Choose a different crop of the same scene or a photograph with more negative space.
- Move the model to the right.
- Leave a quiet background on the left.
- Combine the headline and short explanation into one text block.
- Place the CTA immediately after it.
- Keep the product beside the model as part of the visual.
After:
The image remains the emotional part of the ad but no longer acts as a hostile background for the copy.
The text does not need to be rescued with effects; the space already provides legibility.
What this demonstrates: typography cannot solve every composition problem. Sometimes the image or crop itself must change.
Example 3. Information is scattered across the layout
Imagine a food-delivery banner that needs to show:
- 30% off;
- a first-order condition;
- a photograph of the dish;
- delivery time;
- CTA;
- logo.
Before:
“30% off” sits at the top left.
“Your first order” appears slightly lower in the center.
Delivery time is placed inside a small badge on the right.
The CTA is at the bottom right.
The logo is at the top right.
Each piece of information exists independently.
What changes:
- Combine “30% off” and “your first order” into one primary offer.
- Make the dish photograph the second large object.
- Move the delivery time into a small supporting block near the offer or CTA.
- Align the text elements to one line.
- Increase the space between information groups.
- Reduce the logo's visual weight.
After:
The layout no longer consists of six scattered objects. It contains three clear zones:
offer → product → action.
What this demonstrates: grouping can change how a banner reads without removing any information.
How to practice composition with editable source files
Studying strong references is useful, but a Pinterest image shows only the final result. You can learn much more when the layout is available as an editable file.
Open a ready-made source file and identify:
- the first level of hierarchy;
- the second level;
- the third level;
- which elements form groups;
- what creates visual weight;
- where negative space is used.
Then begin changing the layout.
Exercise 1. Remove elements
Remove several supporting details and compare the result.
Is the focal point easier to identify?
If so, determine which elements were creating unnecessary visual noise.
Exercise 2. Change the focal point
Keep the same content, but make the offer primary instead of the image.
This forces you to reconsider the size, spacing, and position of every other element.
Exercise 3. Rebuild the composition
Keep the copy and image but change the underlying layout.
For example:
copy left / object right → central object
or:
central composition → large typography.
This makes it clear that composition is not decoration applied to content; it is how the content is organized.
You can also use Designer Pack for this practice. It includes 150+ ready-made ad creatives, 1,000+ editable builder elements, and 300+ UI components in Figma. Open a finished creative to inspect its structure, replace the copy, imagery, colors, and components, or build a new version from the library.
Instead of copying the source file exactly, examine why the elements have their particular size, position, and spacing, then test an alternative composition.
An editable source file does not teach composition automatically. It becomes valuable when you analyze and rebuild the decision intentionally.
Composition checklist before export
Before publishing the banner, check these ten questions:
If several questions are difficult to answer confidently, fix the composition before polishing shadows, colors, effects, and small decorative details.
Key takeaway
Do not begin an ad banner by choosing a typeface, photograph, or attractive badge.
First decide what the viewer should notice and what they should understand next. Then distribute visual weight across the remaining elements and test the result at a small size.
When that logic works, styling strengthens the message. When it does not, additional decoration usually only conceals the problem.
