1 Learn the concept
Layout is the arrangement of the elements of a design, like the stories on a page of a newspaper. Composition is concerned with how all of those elements work together to create a whole that guides the viewer. This lesson explains how to build a layout that is clear, balanced and effective.
2 See it in action
- Start with the purpose and the key message.
- Build visual hierarchy with size and contrast.
- Use alignment and space to organize.
- Test the design by squinting: does the main idea still stand out?
Worked example
Creating a focal point
Place the main image at about two thirds of the width.
Put the headline next to it with high contrast.
Place one button where the eye ends after reading.
Check: squint at the design. The main element should still stand out.
3 Study an example
Example scenario
A designer rearranges a crowded web banner by shrinking secondary text and making the main message and button larger. The banner becomes quicker to understand.
4 Apply it and download
- Choose a layout to improve.
- Redesign it with clear hierarchy.
- Compare before and after.
Worksheet Brand style guide templateOpen, print or save as PDF