Three acts, Freytag’s pyramid and Duarte’s zigzag

Three acts are setup, confrontation and resolution. Freytag’s pyramid plots tension rising and falling; Duarte’s zigzag alternates what is with what could be.

Why a story needs a shape

When you read a story, you keep waiting to find out what happens next. If nothing happens, you get bored. If everything happens at once, you get tired. A good story manages that waiting: first it introduces, then it builds tension, then it releases it. That sequence is called an arc, and it is useful for a site for two reasons. First, it makes it easier to decide what goes first on a page and what goes third. Second, it reminds you that a page needs an ending: the action everything leads to.

This lesson has three ways of looking at an arc and one trick for starting it.

Three acts

The simplest form: a story has a beginning, a middle and an end. Aristotle already said so in the Poetics, as something obvious: a whole is what has a beginning, a middle and an end. Screenwriters turned the idea into three acts, and the screenwriting teacher Syd Field popularized it in 1979.

1. Act one, setup. We meet the person and their world, and we see that something is wrong or missing. By the end of the act the person decides to act.
2. Act two, confrontation. They try, obstacles get in the way, and the stakes rise. This is the longest act, about half the story.
3. Act three, resolution. The main clash and its outcome. The world is in order again, but differently.

The proportions “a quarter, a half, a quarter” are quoted for screenplays, and they are only a rule of thumb. For a site the order matters more: first understand who and what it is about, then believe the solution works, then take a step.

Check yourself: which act is the longest, and why?

The second, confrontation. Events pile up in it and tension grows. If it’s cut short, the resolution doesn’t land.

Freytag’s pyramid

In 1863 the German writer Gustav Freytag took apart the structure of five-act drama (his book is Die Technik des Dramas, “The Technique of Drama”) and drew tension as a pyramid: it climbs to a peak and then falls. Five steps:

1. Exposition. The introduction: who, where, what’s going on.
2. Rising action. Complications, obstacles, growing tension.
3. Climax. The highest point, the turn.
4. Falling action. The consequences of the turn.
5. Resolution. The outcome, a new balance.

Freytag was describing the drama of his own time, so the pyramid shouldn’t be taken as a law for every story. Many stories have one peak, many have several, and some have none at all (a later lesson shows such an example). But as a map for a home page it works. Try the diagram: move the dots of the pyramid and see which part of a page matches each.

Pyramid and acts Duarte’s zigzag From the start or the middle

Exposition: 2 Rising action: 5 Climax: 9 Falling action: 5 Resolution: 1

• Exposition. On the page: The first screen: who you are and who it’s for.
• Rising action. On the page: The visitor’s problem grows.
• Climax. On the page: The moment the solution and the button come into view.
• Falling action. On the page: How it works, the proof.
• Resolution. On the page: The outcome and the invitation to act.

The three acts lie over the pyramid: setup (a quarter), confrontation (a half), resolution (a quarter). Move the dots: a story with no rise has no climax.

On a page, the steps look like this. Exposition is the first screen. Rising action is the visitor’s problem becoming more noticeable. The climax is the section where they see the solution, with the button beside it. Falling action is “how it works” and the proof. Resolution is the call to action and the last line.

Check yourself: what on a page corresponds to the climax?

The moment the visitor sees that their trouble can be solved, with the main action right beside it.

From the middle: in medias res

The Latin phrase in medias res (“into the middle of things”) comes from the Roman poet Horace, who praised Homer for opening the Iliad in the tenth year of the Trojan War rather than at the birth of its hero. The trick is simple: start with the most tense scene, and give the backstory afterward.

On a site that means: if your background (“we’ve been in business since 2010”) is duller than the visitor’s trouble (“a neighbor moved the fence and you don’t know whose land it is”), start with the trouble. The background goes in brackets, or lower down. The diagram above can switch between the two orders.

There are two limits. First, in the first seconds it must still be clear what the page is about and who it’s for, so the scene mustn’t be mysterious. Second, if the beginning holds a fact that decides whether a person stays (a place, a price, a deadline), don’t hide it.

Check yourself: when is the straight order better than starting in the middle?

When the beginning holds a fact the visitor needs at once: a place, a deadline, a price, a condition.

Duarte’s zigzag

Nancy Duarte, a specialist in public speaking and presentation design, noticed that strong speeches don’t go in a straight line. They alternate two states: “what is” (a situation we don’t accept) and “what could be” (the wish), and they end on the better one. The result is a zigzag. The gap between the two lines creates tension, and the ending shows where to go. She mapped well-known speeches this way, among them Martin Luther King’s “I Have a Dream” (her TED talk is in the sources), and she wrote the method up in her book Resonate.

For a site this idea turns into a simple rule: don’t only describe the problem, and don’t only describe the result, but show them in turn. “What is: for three months you can’t tell where your boundary runs. What could be: the plan shows every marker.” Two or three such pairs, and the last “after” is tied to your button.

Check yourself: how does Duarte’s zigzag differ from a plain list of benefits?

It sets “what is” against “what could be” in turn, so the difference shows. A list of benefits shows only the good.

Practice

Take your project’s home page and write out its arc in five lines.

• Exposition: what is visible on the first screen.
• Rising action: which trouble or wish of the visitor grows, and how your service or product (name it from the brief) takes part.
• Climax: the section of the site where the visitor sees the solution. Name the section as it is named in your brief.
• Falling action: what you use to back the solution up.
• Resolution: your button’s label, word for word.

Then answer one question: will you start “at the beginning” or “in the middle”, and why? If you chose “in the middle”, write down which scene will come first.

When structure gets in the way

An arc is for telling a story, not for a whole page. A price table or a form shouldn’t “rise” and “fall”: people there are looking for an answer. And don’t force every page into five steps. If a page is short, three acts are enough: what the trouble is, how we solve it, what to do now.