A flowchart enables a designer to efficiently and effectively relay and graphically represent a structure of an interactive system at a glance instead of just using words. It helps with planing a simple or more complex process especially those requiring many decisions and processes.

We looked at "My boyfriend came back from the war, After dinner they left us alone." an interactive web-based narrative by Russian artist Olia Lialina.

These are the first few frames from the narrative depending on which "pathway" or image of the storyline the user clicks

The mechanics of this specific narrative is that the pages split into frames with another part of the story appearing or the frames itself are replaced with the continuation of that storyline.

As a response to this, we were separated into groups and tasked to create and design our own short linear narrative, with each person creating a separate page. Afterwards all the pages of the entire class will be linked in some way to also make sense thus allowing a possibility of various narratives, much like the exquisite corpse method.

Instead of re-creating a story, our group decided to created an original simple short story and each sketched out a different scene.

In a forest far far away

Somebody lost their glasses

So he searched frantically

But a bear already broke it.

The scene I was appointed was the glasses part. Having given the parameters of just using images and short text, I worked around my original animation idea and created and animated GIF. These are the links to the final storyline or my group hosted on different hotglue sites.

A wireframe on the other hand visually represents the structure of an interface or page such as the information hierarchy that will determine the layout and best method to arrange certain elements, functions, and content. It is the skeleton or blueprint of the design itself.

Wireframing is mainly utilised when designing websites, apps, and other graphical user interfaces.

A specific set of shapes is used to convey the step of the structure. The most commonly used are listed below: