Click here to Skip to main content
Licence CPOL
First Posted 11 Oct 2011
Views 14,429
Downloads 412
Bookmarked 7 times

Storyboard in Powerpoint

By | 14 Oct 2011 | Article
This article explains how we can create Storyboards in Microsoft Powerpoint

Introduction

A storyboard is a document which specifies the visual elements, text elements, audio elements, interactions and branching (where the system or user will go next) of every screen. It is basically used to express our ideas and thoughts.

Prerequisites: Install Microsoft Visual Studio 2011

When Do We Start?

Storyboarding is typically part of the Design and Development Phase. It will start after we are done with our Analysis.

Why It’s So Important?

The storyboard is usually created by a graphic designer or a part of the team who is responsible for the look and feel of the UI. This helps the programmers to produce the exact UI look and feel. The storyboard is usually reviewed by the subject matter expert and your client.

Types of Storyboard

  1. Textual approach: Some prefer to follow the storyboard with textual description, which may be much quicker, but may not be as informative and it’s not appealing.
  2. Visual approach: It’s always good to go with visual storyboard as the picture is always worth more than the textual description and it’s more appealing.

Creating Storyboard

You will see a new Storyboard template in PowerPoint, when you install Microsoft Visual Studio 2011. Creating storyboard is very similar to creating a new slide and working on it.

StoryBoard1.png

  1. When you open PowerPoint, you will see a ribbon as below, you can see a template for creating storyboard:

    Ribbion2.png

  2. Here are the storyboard shapes, which is available for us to visually represent our thoughts.

    Shapes.png

  3. Create a new slide and select a template as shown below:

    LeftBar.png

  4. Start designing a screen by using the pre-defined shapes.

Is Powerpoint the Only Means for Creating Storyboard?

Definitively not! You can still express your ideas and thoughts by using other tools like "Pencil Project" or simply create using Paper and Pencil.

Here's an example of How I created a "Sign-In" Storyboard by making use of Paper and Pencil.

Signin-Storyboard.png

Advantages of Using Tools

  1. Creating Storyboard with tools is much easier and by using Pre-defined shapes, one can easily design the UI which meets the customers expectations.
  2. You can share with your Subject Mater Experts, they can review and easily make necessary changes if required.
  3. You can simply attach these Storyboards in your Design Spec so that it will help the developers to produce the same UI or functionality.

Points of Interest

I am considering a scenario of developing a mobile based app. Below are few storyboards by which one will get a fair idea of how exactly the User Interface will look like.

These sample screens are designed with the help of PowerPoint Storyboard template:

StoryBoard2.png

StoryBoard3.png

Reference

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Ranjan.D

Web Developer

India India

Member



Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board. (secure sign-in)
 
Search this forum  
 FAQ
    Noise  Layout  Per page   
  Refresh
QuestionWhere can we get this powerpoint addin ? Pinmemberskneife5:23 7 May '12  
AnswerRe: Where can we get this powerpoint addin ? PinmemberRanjan.D17:52 11 May '12  
GeneralMy vote of 3 Pinmemberakjoshi19:35 26 Feb '12  
GeneralMy vote of 3 Pinmembermaq_rohit7:55 14 Oct '11  
GeneralMy vote of 4 PinmemberMember 80364464:44 14 Oct '11  
SuggestionA few friendly suggestions... PinmemberSnorri0:56 14 Oct '11  
GeneralRe: A few friendly suggestions... PinmemberRanjan.D1:14 14 Oct '11  
QuestionMy non-vote PinmemberManfred R. Bihy0:51 14 Oct '11  
AnswerRe: My non-vote PinmemberRanjan.D0:54 14 Oct '11  
GeneralRe: My non-vote PinmemberManfred R. Bihy1:00 14 Oct '11  
SuggestionOff Topic Post Pinmembernot_starman23:51 13 Oct '11  
GeneralRe: Off Topic Post [modified] PinmemberRanjan.D0:43 14 Oct '11  
GeneralRe: Off Topic Post Pinmembernot_starman4:30 14 Oct '11  
GeneralRe: Off Topic Post PinmemberRanjan.D5:01 14 Oct '11  
GeneralMy vote of 2 PinmemberMario Majcica23:48 13 Oct '11  
GeneralRe: My vote of 2 PinmemberRanjan.D0:46 14 Oct '11  
GeneralRe: My vote of 2 PinmemberMario Majcica22:03 16 Oct '11  
GeneralMy vote of 1 Pinmemberii_noname_ii22:36 12 Oct '11  
GeneralRe: My vote of 1 PinmemberRanjan.D22:41 12 Oct '11  
GeneralRe: My vote of 1 Pinmemberii_noname_ii22:43 12 Oct '11  
GeneralRe: My vote of 1 PinmemberReiss3:12 13 Oct '11  
GeneralMy non vote PinmemberReiss21:40 12 Oct '11  
GeneralRe: My non vote PinmemberRanjan.D21:56 12 Oct '11  
GeneralMy vote of 4 PinmemberJan Steyn1:42 12 Oct '11  
Question[My vote of 2] This is a joke... right? PinmemberDewey23:34 11 Oct '11  

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Mobile
Web03 | 2.5.120517.1 | Last Updated 14 Oct 2011
Article Copyright 2011 by Ranjan.D
Everything else Copyright © CodeProject, 1999-2012
Terms of Use
Layout: fixed | fluid