PERFECT LAYOUT DESIGN Step by Step *With Examples*

Planning Layouts for Print and Web Design

The video presents a step-by-step approach to planning layouts for print and web design—not logo design—and demonstrates how 3M’s Visual Attention Software (VAS) can help assess visual hierarchy.

1. Establish a grid. Choose one that suits the document and design. Column grids divide the page into vertical areas, while modular grids add rows to create modules for content or empty space. Grids help position elements and give a layout structure. Other options include the rule of thirds and the golden ratio. For print, account for bleeds and margins.

2. Clarify the message and style. Use the research phase to decide what the design should communicate and what feeling it should evoke.

3. Choose a focal point. Give viewers a clear starting point, such as a prominent image or large, simple typography. A strong focal point helps attract attention.

4. Guide the viewer’s eye. Arrange elements and smaller areas of interest to lead viewers from the focal point toward important information, such as a call-to-action button. VAS’s gaze-sequence feature can estimate the path viewers may follow. If that path misses a key element, revise the layout or create additional points of interest.

5. Use negative space deliberately. Empty space gives a design room to breathe, clarifies which elements belong together, and supports hierarchy. Grids—especially modular grids—can help organize it.

6. Create connection through repetition. Reuse a motif, shape, symbol, or color across different areas so they feel like part of one composition.

7. Test and refine attention. VAS estimates how likely viewers are to notice different areas and provides a visual-element score. Faces or human forms, contrasting colors, and size can help strengthen a focal point. Adjust elements and retest to see whether attention improves.

Creators and Contributors

Thomas of Satori Graphics presents the video in partnership with 3M Visual Attention Software (VAS).