Juan R Labrada

Storytelling for Web Design

Aristotles elements of stories

  • Plot
  • Character
  • Theme
  • Diction
  • Rhythm
  • Spectacle

Plot

Product Goals + User needs

Character

Primary

Heroes of the story whose actions determine the plot of the story

Secondary

Supporting roles. Provide the main characters with information, material, goods, services or whatever is needed in order to advance the plot.

Example

In the Titanic The Girl and DiCarpio are primary characters, the fiance of the girl is secondary. His actions give reasons to the girl for running into DiCarpio arms.

In web design the primary is the user's purpose - text, images, videos - the secondary is the brands or whatever helps the content reach the purpose.

Theme

This is the set of locations where the story takes place as well as history, geography and laws of nature.

Slogan

Nike Just do it Apple Think Different

Theme is the concept

Diction

Expressing meaning in words Diction is Tone + Style

Rhythm

Most interactions have an underlaying rhythm. The best such experiences induce a state of flow during which users get into such a groove that the mechanics of operating the program disappear, allowing users to focus entirely on meaning.

Examples

Nike.com Different Amazon sites.

Rhythm is usability + patterns

Spectacle

Spectacle implies an organization of appearances that are simultaneously enticing, deceptive and superficial.

Spectacle is GRAPHIC DESIGN + UI EFFECTS

Examples

Avatar has a lot of visual spectacle. Newzealand.com

© 2023