top of page

Interactive Post 03 


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.​


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


Web, macOS, Windows, Linux

For design and real-time collaboration





Wireframing for multiple screen sizes

Invision Studio




For quick marketing wireframes and visual hand-offs




macOS, Windows

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




macOS, Windows, Web

For beginners




macOS, Windows

For a complete wireframe > prototype tool

Adobe XD


Continue to

Next Post

bottom of page