Interactive Post 03 

Storytelling

While telling the story, EVERYTHING on our website should be a part of the story. 

The most useful way to do this is by using the “Chapter in the Story” = “Section in the Website” to break the story into chapters, this helps us to structure our website.


 

Navigation Structure

Online Story-boarding is different from writing a script for a play or a book. The main difference is that in an online story there are more possibilities of navigation, more scenarios the user can experience and navigate through the story.

 

This means that while creating our online story we need to decide how flexible we want our story to be. The most useful way to do this is to divide the story into chapters and then decide how to present those chapters.

We present the chapters one after another or allowing the user to decide how to navigate between the different chapters. ​

Sections are the building blocks of a website and chapters are the building blocks of a story, now we can easily decide that each chapter will be a section on your website.

 

The Intro

The website introduction should reflect our website’s message and catch the attention of desired users, the users that we want to tell our story to.​

Storyboarding

Tell your story over and over again until it’s perfect. Every time you tell it focus on a different angle and improve the harmony of the story. We start with an outline of the story, then moving on to the content, the interaction, the motion of our elements, and then finally to the sound.

 

Below you can find websites that will help you storyboard your story, and mockup your flow, check them out.

Mocking up & Wireframing Tools

thumb_figma.jpg

Web, macOS, Windows, Linux

For design and real-time collaboration

Figma

>

thumb_Invision_studio.jpg

macOS

Wireframing for multiple screen sizes

Invision Studio

>

thumb_CANVA.jpg

Web

For quick marketing wireframes and visual hand-offs

Canva

>

thumb_Axure.jpg

macOS, Windows

A powerful tool to plan, prototype, and hand off to developers, all without code

Axure

>

thumb_balsamic.jpg

macOS, Windows, Web

For beginners

Balsamic

>

thumb_adobeXD.jpg

macOS, Windows

For a complete wireframe > prototype tool

Adobe XD

>

Continue to

Next Post

Thumb_new04.png
Techniques