Design Layouts: Gutenberg Diagram, Z Pattern & F Pattern

Several layout patterns are often recommended to take advantage of how people scan or read through a design. 3 of the more common are the Gutenberg diagram, the z-pattern layout, and the f-pattern layout.

The pattern applies to text-heavy content. Think pages in a novel or a newspaper. The pattern isn’t meant to describe every possible design.

The Gutenberg diagram describes a general pattern the eyes move through when looking at evenly distributed, homogenous information. Read that last part again.
The pattern applies to text-heavy content. Think pages in a novel or a newspaper. The pattern isn’t meant o describe every possible design.
The Gutenberg diagram divides the layout into 4 quadrants.

• Primary optical area located in the top/left
• Strong fallow area located in the top/right
• Weak fallow area located in the bottom/left
• Terminal area located in the bottom/right

The pattern suggests that the eye will sweep across and down the page in a series of horizontal movements called axes of orientation. Each sweep starts a little further from the left edge and moves a little closer to the right edge. The overall movement is for the eye to travel from the primary area to the terminal area and this path is referred to as reading gravity.
Naturally this is for left to right reading languages and would be reversed for right to left reading languages.
The Gutenberg diagram suggests that the strong and weak fallow areas fall outside this reading gravity path and receive minimal attention unless emphasized visually in some way.
Important elements should be placed along the reading gravity path. For example placing logo or headline in the top/left, an image or some important content in the middle, and a call-to-action or contact information in the bottom right.
Designs that follow Gutenberg are said to be in harmony with natural reading gravity.
The claim is these designs improve reading rhythm, by being in harmony with the natural reading rhythm, as well as improving reading comprehension, but there’s little empirical evidence to support the claim.
Again Gutenberg describes large blocks of text with little typographic hierarchy. As soon as you create a visual hierarchy the diagram no longer applies. Keep this in mind with the other patterns described here.

Rule of Thirds and Golden Spiral

 

So, the first "golden" rule is the "Rule of Thirds" or "Golden Ratio". It affects the ratio (1:1.618) of a picture size, as well as the placement of the main subjects in the photo. This ratio is close to the 35mm ratio, so you don't need to change the size of the photo in most cases. But you need to consider the composition: main subject should lie on one of the four lines or four intersections (subject's eye for example). Truthfully speaking, these rules are not always the same. Rule of Thirds is a simplified version of the Golden Mean.

Another rule is the "Golden Triangles". It's more convenient for photos with diagonal lines. There are three triangles with corresponding shapes. Just roughly place three subjects with approximate equal sizes in these triangles and this rule will be kept.

And one more rule is a "Golden Spiral" or "Golden Rectangle" (you'll see why it's a rectangle in the tools section). There should be something, leading the eye to the center of the composition. It could be a line or several subjects. This "something" could just be there without leading the eyes, but it will fulfill its purpose anyway.

Assessment objectives for the Foundation Portfolio

 

AO2 (10) Apply knowledge and understanding to show how meanings are created when analysing media products and evaluating their own practical work. 　

AO3 (30) Demonstrate the ability to plan and construct media products using appropriate technical and creative skills.

AO4 (10) Demonstrate the ability to undertake and apply appropriate research.

AS preliminary evaluation

 

• In what ways does your media product use, develop or challenge forms and conventions of real media products? 
• How does your media product represent particular social groups?
• Who would be the audience for your media product?
• How did you attract/address your audience?
• What have you learnt about technologies from the process of constructing this product?

Preliminary activity: Print

Preliminary exercise: using DTP and an image manipulation program, produce the front page of a new school/college magazine, featuring a photograph of a student in medium close-up plus some appropriately laid-out text and a masthead. Additionally candidates must produce a DTP mock-up of the layout of the contents page to demonstrate their grasp of the program .