Share
Sign In

Layout

✅
Key points
1.
Make your layouts logical by keeping them consistent and balanced
2.
Align and space objects evenly
3.
Use hierarchy to draw attention to important information

Logical layouts

Both left-aligned and center-aligned layouts make good designs.
6.1 However, if you choose a layout, make it consistent and logical throughout your design. Do not align objects randomly without following grids.
Left align
Left alignment makes it easier to organize longer text, resulting in a cleaner layout.
ex) text is left-aligned, while illustrations are right-aligned to create balance.
Center align
Center alignment is great for creating a focal point in your design.
ex) center alignment is consistent with the text, illustrations, and logo.

Balanced layouts

6.2 Ensure your layouts are balanced.
If most of your text is aligned to the left, try placing illustrations and logos on the right.
Do not left-align text or center-align objects, as this can create imbalanced layouts.
Balance the left and right areas of the design
This design is unbalanced, as the top area is aligned left, but the bottom area is aligned center
Balanced layout examples

Simple layouts

We prefer simple layouts, because they are easier for you to design and for the user to edit.
Keep designs simple. This design aligns text boxes in the center and places other elements on both sides of the text.
This design has a complex alignment of text and elements, making it difficult for viewers to read information

Advanced layouts

If you want to try unique layouts, make sure to use grids.
Your design should lead the viewer's eyes in a logical direction so they can read important information.
Advanced layout examples
The following examples intentionally break alignment consistency rules but still follow grids and retain balance - making them good designs.
However, we don't recommend using advanced layouts because they are complicated and difficult to get right.
💡
How to use guidelines
Go to the Main Menu > Guidelines > Show guidelines

Alignment and spacing

6.3 Align objects correctly. Make sure to check that boxes or text are aligned correctly, even when zoomed in.
💡
How to use aligment tools
Select two or more items. Right click > Align.
6.4 Objects of similar hierarchy should be spaced evenly.
💡
How to set spacing
Select two or more items. Right-click> spacing.

Hierarchy

6.5 Your design should have hierarchy. Scale and position objects to convey order of importance.
With visual hierarchy, you can draw the viewer's attention to important information
1.
Main title - uses large bold fonts and capital letters. This section captivates new viewers.
2.
Date - medium font, medium boldness. The dates are the second most important information in this design.
3.
Details - uses small text and thin fonts. Viewers can read these small details last to find our more about the event.
ⓒ 2024. MIRI D.I.H Co., Ltd. All rights reserved.