Maximise space and minimise clutter
This is the most important thing to remember when designing for small formats. It doesn’t matter if we cram all our content in our ad if it’s not that attractive to read. If everything starts to feel a bit too complex, don’t worry just give things space, and line it up using our grid.
Layout
When you’re creating a banner design the best place to start is by placing a 12px margin followed by four columns, four rows, or both.
Motion
Even better than pictures of people is people in motion. We use motion ads as they allow for more real estate and flexibility.
Follow our simple structure and refer to the motion section for text and image parallax guides.
Key message
This should be on the first frame reinforced with a photograph if possible.
Endframe
Harmoney logo + CTA. Even thought the Harmoney logo and CTA is shown in the platform
UI we reinforce all ads with this.
Headings
As much as possible try and
keep our heading size consistent in a banner set. But we’re allowed to have different sized headings between banners if
we have a long word like ‘consolidation’ and it won’t fit!
Call to action button
Calls to action buttons should never appear next to our logo.
We want a clear separation between the two. Try and put
them on opposite ends, top
and bottom or left and right.
No space? Prioritise these.
If you’re short on space,
prioritise these elements.
Harmoney Logo
Choral red
Headline Message
CTA
If that’s all your ad contains it
will be a successful ad.
Sub headings
As much as possible this should
be half the size of the headings.
It can appear above or below the heading.
These are normally a short few words and never a sentence.
Terms and conditions
These are a must, try and keep them as small as possible and as legible as possible. This means keeping the contrast high. Try
and keep them locked up at the bottom or with the CTA button.
The no-no’s.
Avoid these like something
you wouldn’t touch with a
barge pole.
No text hyphenations
Avoid using multiple curve
containers
Putting text over peoples faces.
Global rules
Regardless of the banner size there are a few things that always apply.
How do you make noise in a small space? Follow our design guidelines to help make those tiny banner
spaces sing.
Vertical banner construction breakdown
Start almost
anything.
Personal Loans
Subject to approval and funding. T&Cs Apply. Australian Credit Licence No. 474726
A vertical banner offers more space for our layout. The composition is less about the quadrants and more about the vertical order.
Try and sit the headline on the quarter line of the banner. In this situation, make sure that the type doesn’t overlap the head of the subject
Use a curved container to house the person. Don’t sit their head to close to the bottom though, try and keep their shoulders up.
Logo occupies three quarters the width of
the banner.
Sub headline should sit between 4 – 12px away from the headline. Keep it tight. Larger sized type will need more space, smaller type less.
Try and sit the eyeline
of the subject above halfway.
Lock up the button to the bottom of the page with the T&C’s
Square banner construction breakdown
Subject to approval and funding. T&Cs Apply. Australian Credit Licence No. 474726
Start almost
anything.
Personal Loans
Logo always takes up top left quadrant. Unless the format forces it to be too small.
Sub headline should sit between 4 – 12px away from the headline. Keep it tight. Larger sized type will need more space, smaller type less.
Keep all spacing as factors of four. If possible use the same spacing as the margins.
Make the T&Cs the smallest possible readable type. In most cases this will be 9px.
Subject should always sit in the right half of the composition. Position the subject to the centre of the right half of the artboard.
If possible sit the
x-height of the headline on the vertical halfway line. Ensure that the copy does not overlap the face of the subject
The T&Cs should always sit on a background that provides maximum contrast for the text. The background should be the opposite colour of what is used for the imagery.
Horizontal banner construction breakdown
Sit the logo in the middle of the first column. Try and make the margins around it as even as possible.
Headline is positioned at the beginning of the second column. size to fit the headline in the alloted space.
Position the CTA
button to the right, locked up with the
terms and conditions.