Select Page

Rule of Three

Intro Video 1

Introduction

Rule of Three is a copywriting studio with offices in London, Oxford, and Paris. Their website https://rule-of-three.co.uk/ is an incredible example of a narrative-driven user interface (UI), or visual storytelling UI as it might be called in web design.

From the moment viewers land on this company’s page, they are drawn into a dynamic journey of discovery. This introductory video is one of three that can load on first entry, and features numerous images and ideas that set the foundation for the rest of the site’s messaging.

Ink falls onto a white screen, flowing up to become a liquid black background. White “WORDS” is the first thing the eye catches, with the “O” drawn as a crescent moon and “R” centered in a triangle that Rule of Three uses as a menu icon, three-layered pyramid, and foreshadowing of the all-seeing eye of God (or Eye of Providence). Beneath “WORDS” is the following epigraph: “And a drop of ink. / Creates that which makes millions think.” This little rhyme flashes away in waves like that of a television whose signal is disrupted, morphing into the symbol of the all-seeing eye once, then again closer to reveal the three “I”’s that are Rule of Three’s logo in the iris, then again into flowing black and white before blacking out like an old television screen turning off. This happens in the span of eight seconds.

The structural, elemental, and textual design of Rule of Three’s site is a great example of a narrative-driven UI because of its temporal progression, accumulative revelation, and guided discovery.

Section 1

After a video that provokes thought, curiosity, and even confusion about the company’s identity and meaning, viewers are given a black header section with a name, an explanation of Rule of Three’s service (“The Copywriting Studio”), and four lines of punchy text in white font. This dramatic black-and-white binary of a color scheme remains constant throughout the site, though the colors dance back and forth as foregrounded font and contrasting backdrop.

Rule of Three introduces itself as an object: “This is the art of copywriting. / The science of persuasion. / The power of words and ideas.” They then name this object “Creativity. Guided by the trinity.” Below, a three-level pyramid with one white section changes as users scroll the page. These design choices build on the introductory video by providing viewers a professional context for the company, but not enough for viewers to feel like they fully understand the object they’ve encountered. Like a skillfully written first chapter, this section satiates the most basic levels of curiosity while creating new questions: What do they mean by calling copywriting an “art”? What science goes into persuasion? What is this trinity they’re talking about?

 These lines are structured around verbs: “command” and “design”; “craft” in order to “seduce, inform, and persuade”; “turn” four sets of starting points to desired end goals.

The image in the top left of a pyramid atop Rule of Three’s logo and an upside-down pyramid, all within something like an open-ended double-helix, is not repeated in the iconography of the site. However, its individual elements tie into the theme of threes, making it both a unique element and part of a collective symbology Rule of Three seeks to evoke throughout. This paradoxical thematic component is akin to a scene in a narrative: both place symbols in a string of evolving contexts that result in an accumulative understanding for viewers.

 

Section 2

Like a black fog, the background lifts away in cloud-like fingers as users continue to scroll downward. Black words fade onto a white background: “We are copywriters.”

Beneath this section header, a subheader explains “We are the artists of persuasion.” Continue down the page and these titles rise, a black line falling vertically alongside seven ever-shortening lines of text.

Section 3

Section 2 dissolves in an angled tear of black that paints the screen. Section 3 begins with a series of commands: “Capture imaginations. / Engage minds. Elicit responses.” On the left half of the screen the Rule of Three logo materializes with its three “I”’s, their white replaced by the all-seeing eye design from the introductory video. A white vertical line drops beside descriptive text in an inverted repetition of section 2.

The second half of this text tells a story (of a sort): “Our copywriters have helped the world’s biggest brands” communicates a who, what they did, and when (the past). “We know what works… Because we test” depicts a who and what they do now. “We can make the same knowledge work for you” builds on the created story world’s present by moving the previous who and what into a potential future alongside the viewer. Scrolling past this text leads the user into a totally dark screen, a void that may imply the viewer’s blindness and need for a guide.

These are the last three lines of section 2 returned, creating something like a character’s movement in, out, and back into a narrative. The static clarity of these texts atop a shifting, blurred background symbolically reinforces the section’s header.

            The power of this design is in its understatement and implications. Rule of Three is careful to never provide interpretation by “telling” the explicit meaning of their structure, choosing instead to “show” with words and images that reason via visual enthymeme. The (three) black-and-white screen tears are done. From this point on, black fades into white, white fades into black, and meaning rises as you progress. The arrival of “Bold and Clear” transforms the paradigm of viewer experience in a parallel implying the benefit of their services.

Section 4

The black veil is torn top to bottom, revealing a “Bold & Clear” section that introduces their method as a force of enlightenment. Beneath a falling vertical line alongside claims describing their approach, Rule of Three places three boxes of moving black-and-white static. The design implies that on top of this static are the three parts of their approach: “Messages into Results,” “Readers into Customers,” and “Interest into Action.”

Section 5

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Section 6

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Section 7

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Section 8

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Section 9

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Conclusion

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.