Title: Layout

URL: https://www.infobip.com/layout

## Layout

## When creating brand compositions, there are three main formats we will be designing to. This section will unpack some of the thinking behind creating designs for each of these formats, as well as some things to avoid to make sure our designs are consistent.

## Clear space

When creating brand compositions, 
our clear space border should be 
AT LEAST 0.05 X the shortest side.

For example, if the shortest side was 800PX wide, the clear space border should be 40PX on all four sides of the layout.

Minimum logo height size is 28px.

## Portrait

The next section will outline the process of creating some portrait brand examples.

<tabs>
<tab label="Step 1">
The first step in creating a layout is setting your headline and page furniture. 



Page Furniture
The page furniture frames the layout,
and helps dictate the positioning 
of the typography. The only exception 
to this is centrally aligned headlines. 


Headline
The size and positioning of the headline will dictate the decisions made for the graphic system elements. These examples showcase three different types of headline.
</tab>
<tab label="Step 2">
Following type layout and page furniture, we introduce our Functional, Bold or Expressive graphic system elements. These can be used to convey messages, hold art direction or decorate the blank space. Which variation of the graphic system you use will depend on the audience, location and intended purpose of the communication.
</tab>
<tab label="Step 3">
The final step in creating a layout is to add color, and any art direction needed within the graphic system elements.
</tab>
</tabs>

## Landscape

The next section will outline the process of creating some landscape brand examples.

<tabs>
<tab label="Step 1">
The first step in creating a layout is setting your headline and page furniture. 



Page Furniture
The page furniture frames the layout,
 and helps dictate the positioning 
of the typography. The only exception 
to this is centrally aligned headlines. 


Headline
The size and positioning of the headline will dictate the decisions made for the graphic system elements. These examples showcase three different types of headline.
</tab>
<tab label="Step 2">
Following type layout and page furniture, we introduce our Functional, Bold or Expressive graphic system elements. These can be used to convey messages, hold art direction or decorate the blank space. Which variation of the graphic system you 
use will depend on the audience, location and intended purpose of the communication.
</tab>
<tab label="Step 3">
The final step in creating a layout is to add color, and any art direction needed within the graphic system elements.
</tab>
</tabs>

## Square

The next section will outline the process of creating some square brand examples.

<tabs>
<tab label="Step 1">
The first step in creating a layout is setting your headline and page furniture. 



Page Furniture
The page furniture frames the layout,
 and helps dictate the positioning 
of the typography. The only exception 
to this is centrally aligned headlines. 


Headline
The size and positioning of the headline will dictate the decisions made for the graphic system elements. These examples showcase three different types of headline.
</tab>
<tab label="Step 2">
Following type layout and page furniture, we introduce our Functional, Bold or Expressive graphic system elements. These can be used to convey messages, hold art direction or decorate the blank space. Which variation of the graphic system you 
use will depend on the audience, location and intended purpose of the communication.
</tab>
<tab label="Step 3">
The final step in creating a layout is to add color, and any art direction needed within the graphic system elements.
</tab>
</tabs>

## Layout don’ts

To make sure we are creating consistent layouts, there are a few things to avoid. These are relevant for all size/orientations of layout you are designing.

Don’t use a clear space border 
thinner than 0.025X the shortest side.

Do not overcrowd the layout, or use two differing types of graphic system in one communication.

Try to avoid large white spaces, 
by balancing the use of typography 
and graphic elements. (The type 
in this example should be larger 
to fill the white space).

Don’t overlap typography and graphic system elements. The typography should be legible at all times.

Don’t place layout furniture or headline typography in random places. They should follow the guidance outlined previous sections.

Do not overpower a layout with one element. There should be balance between type and graphic system.

Don’t align typography to the 
right hand side of the layout.Don’t use two typographic alignments in the same communication.

## Digital formats -layout

Safe zone for digital formats is equal to the smaller format size multiplied by 0.05 (if the result is a decimal, please round it to the nearest whole number).

A safe zone means that all critical content (such as copy, logo, graphics, etc.) must be within specified limits.

Infobip logo: 10% of the smaller format side

For example on this example 1200x628; Infobip logo is 62,8 in height

## Digital formats - layout general

Safe zone for digital formats is equal to the smaller format size multiplied by 0.05 (if the result is a decimal, please round it to the nearest whole number).

A safe zone means that all critical content (such as copy, logo, graphics, etc.) must be within specified limits.Infobip markup: 8% of the smaller format side. For example on this example 1200x628; Infobip logo is 51 in height (If the result is a decimal, please round it to the nearest whole number)

Infobip symbol: Please ensure that the Infobip symbol is sized to 10% of the smaller format side. For example, on an image with dimensions of 1200x628, the Infobip logo should be 63 pixels in height (rounded to the nearest whole number if the result is a decimal).

The symbol can be positioned in the upper corners or the bottom right corner.

## Digital formats - layout general

Half-page ads attract more attention by occupying nearly half of a web page's space. They also tend to have a relatively good click-through rate (CTR).

It's important to keep all essential content, like text, logos, and graphics, within the safe zone. To find the safe zone for digital formats, multiply the smaller format size by 0.05. If the result is a decimal, please round it to the nearest whole number.

Infobip markup and logo symbol: 10% of the smaller format side. For example on this example 300x600; Infobip logo is 30 in height (If the result is a decimal, please round it to the nearest whole number)

## Digital formats - layout general

A skyscraper is a popular online banner that is styled vertically. It is important to keep all essential content, such as text, logos, and graphics, within the safe zone. 



To determine the safe zone for digital formats, multiply the smaller format size by 0.05. If the result is a decimal, please round it to the nearest whole number.

Feel free to use both vertical and horizontal logos for these banner formats.