Click here to Skip to main content
Click here to Skip to main content

Storyboard in Powerpoint

By , 14 Oct 2011
 

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
United States United States
No Biography provided

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.
Search this forum  
    Spacing  Noise  Layout  Per page   
QuestionWhere can we get this powerpoint addin ?memberskneife7-May-12 5:23 
Hi,
 
Is the powerpoint addin available by download somewhere ?
 
Sam
AnswerRe: Where can we get this powerpoint addin ?memberRanjan.D11-May-12 17:52 
You have to install VS2011 http://www.microsoft.com/visualstudio/11/en-us/products[^]
Ranjan.D

GeneralRe: Where can we get this powerpoint addin ?memberMember 875530216-Aug-12 2:15 
and by VS2011 you mean VS11/VS2012.
GeneralMy vote of 3memberakjoshi26-Feb-12 19:35 
Looks ok, but not a complete package.
GeneralMy vote of 3membermaq_rohit14-Oct-11 7:55 
Nice attempt but required more details on this..It would be great if you describe it in a deep!!
GeneralMy vote of 4memberMember 803644614-Oct-11 4:44 
This is a useful feauture.
SuggestionA few friendly suggestions...memberSnorri14-Oct-11 0:56 
First off - I like to say I find the article interesting because I did not know about that feature in PowerPoint. But...
What is the connections to Visual Studio 2011? Why is that PowerPoint template a part of VS2011 install? Is the PowerPoint file useable in some way in VS? Can you generate HTML/CSS files and/or code from it? Provide links to Microsoft MSDN article if you can. Bottom line - you need to provide more content. This article looks like it took less than an hour to write.
GeneralRe: A few friendly suggestions...memberRanjan.D14-Oct-11 1:14 
Interestingly the Powerpoint does;nt comes with the Storyboard Template by default. When you install VS 2011 , the template appears in Power-point. It's not just the PowerPoint , There are more stuffs , you can refer MSDN for more detail. I have already provided the link as a reference section of this article.
 
Yes definitively the power-point template is usable in VS.. you can link the Storyboards in VS TFS Items so every one can see those items , do the review and get feed backs from the team.
 
For your question on
Can you generate HTML/CSS files and/or code from it
>> The Storyboards in power-point is just a for prototyping and nothing to do with code generation.. I hope in future Microsoft will come up with code generation
 
For your question on
This article looks like it took less than an hour to write.
>> It's not about the time in writing the article , I took lot of time in creating Storyboards like this ones. I just thought rather than being more theoretical by explaining things verbally , I thought of doing it with more Storyboards.
 
Thanks,
Ranjan.D

QuestionMy non-votememberManfred R. Bihy14-Oct-11 0:51 
Hi Ranjan,
 
first of all I want to thank you for participating in CP by publishing this article. Second I want to say approximately the same as Reiss and Dewey. Your article could still be improved by being more elaborate. I hope you will improve on it and when you do please drop a comment to this post. If there's something new I'll come back and review it again.
 
Dont't be discouraged, but keep going.
 
Cheers!
"With sufficient thrust, pigs fly just fine."
Ross Callon, The Twelve Networking Truths, RFC1925


AnswerRe: My non-votememberRanjan.D14-Oct-11 0:54 
Thank You.. Sure I will work on these and post you when I have done with this.
 
Thanks,
Ranjan.D

GeneralRe: My non-votememberManfred R. Bihy14-Oct-11 1:00 
Thanks I'm looking forward to it! Thumbs Up | :thumbsup:
"With sufficient thrust, pigs fly just fine."
Ross Callon, The Twelve Networking Truths, RFC1925


SuggestionOff Topic Postmembernot_starman13-Oct-11 23:51 
This tutorial is for using basic features of PowerPoint. The point of this website is tutorials and examples of regarding programing. I would recommended moving this post to a forum concerned with MS office examples. I am not aware of any forums specifically for powerpoint but for an example if I wrote an excel example I would post it here. http://www.mrexcel.com/[^]
GeneralRe: Off Topic Post [modified]memberRanjan.D14-Oct-11 0:43 
Codeproject has all kinds of articles and it never says it's only dedicated for programming..It's Programmers to Programmers who share his/her experiences.
 
If you have observed the Beginning of the article code-project has Office Development » General. This article is just a beginning and there are lots of stuff to be discussed and it;s not only related to power point.. Basically one can create storyboards in power point and can link those as Storyboard items in TFS task etc.
 
For your reference in MSDN: http://msdn.microsoft.com/en-us/library/hh301773(v=vs.110).aspx[^]
 
Thanks,
Ranjan.D


modified 14-Oct-11 6:50am.

GeneralRe: Off Topic Postmembernot_starman14-Oct-11 4:30 
First I want to say that this submission has a lot of potential. I think after reading the attached message for this this post what you are trying to write a simple methods article. I think that your primary problem is the order of information in your article. Currently you feature power point as the main topic. If you want to feature how you use story boards to optimize your UI, promote team work flow and how that Microsoft provides tools to do that I suggest changing the order you present your article.
 
First state the problem. People make bad UI because of poor planing and this poses a problem for team....
Second state what to do about it. I purpose that people use storyboards because....
Third Microsoft has implemented new tools to assist us. Describe the tools and there implementation.
Four the tutorial on how to use the tools....
Five (optional) Any other added benefits to using these tools.
Six Quickly summarize all your points your points
Seven (optional) a little paragraph about you and your experience.
 
This is simply a suggestion so take it or leave it.
GeneralRe: Off Topic PostmemberRanjan.D14-Oct-11 5:01 
What ever you said is absolutely right. You have identified my problems. You are the first person who has guided me in the right direction. Hats-off to your time in giving me a direction on how to make this one better.
 
The first problem when I put Power point as Main context , The entire article turns-down. Actually my primary goal is about explaining StoryBoard ,Importance, Advantages, ... and then how to create etc.
 
I will be re-drafting the entire content from top to down and try to present in a good way.
 
Lurker, is this your real name(I don't know).. I got this from code project. Thanks a lot Lurker!
 
Thanks,
Ranjan.D

GeneralMy vote of 2memberMario Majcica13-Oct-11 23:48 
As Dewey sad, Where's the beef?
 
Vote of 2 just for the good will!
GeneralRe: My vote of 2memberRanjan.D14-Oct-11 0:46 
I really don't understand what beef you are expecting.. If you can explain the missing things , that would be really great..
Peoples just say "Where's the beef".. But they really don't know what it is Laugh | :laugh:
 
Thanks,
Ranjan.D

GeneralRe: My vote of 2memberMario Majcica16-Oct-11 22:03 
Well, I was expecting more, much more. As an article, it is not a simple three click guide, click here for this click there for that.
 
What I would like to here from you is the direct experience, problems you encountered, alternatives, effective usage of StoryBoards, re-usage of done (reusing the drawings in order to get the UI elements, as it occurs per DB Design) if possible, etc.
 
Due to this I give you a low vote.
 

Cheers
GeneralMy vote of 1memberii_noname_ii12-Oct-11 22:36 
!?!? Pointless?!
GeneralRe: My vote of 1memberRanjan.D12-Oct-11 22:41 
Thanks You..
Ranjan.D

GeneralRe: My vote of 1memberii_noname_ii12-Oct-11 22:43 
Sorry!! No offense intended. Sigh | :sigh:
GeneralRe: My vote of 1memberReiss13-Oct-11 3:12 
If you meant no offense, then give the reason why you down voted, what is lacking from the article in your opinion - disagreeing with the OP is your right, but explaning why when someone has given their free time to try and share something is theirs
GeneralMy non votememberReiss12-Oct-11 21:40 
I haven't voted on your article as I really don't know what to score it as I feel your article needs some work
 
It introduces a feature that is new and shows it to people - pro
 
You need to tag it VS 2011 as it is a pre-requisite - con
 
Story boarding is definitely not part of the development process (it is part of the requirements and anaylsis phase, you even mention that you do it with a SME and client) - con
 
You don't explain why this approach is approach is better than using other methods - con
 
You talk about using pre-defined shapes, but there is no mention of whether custom shapes can be used - con
 
I hope this feedback is talking in the spirit it is meant as I feel this could become a useful article.
GeneralRe: My non votememberRanjan.D12-Oct-11 21:56 
Thanks for your valuable feedback. I would really consider on what you have mentioned
 
Following things I would like to tell you.
 
1. I don't think Story-boarding comes at requirements and anaylsis phase. The reason is, you need not bother about the design aspect of UI at requirement gathering phase. It should be at design phase when we create High Level/Low Level design and when it comes to Agile methodology one will review the Storyboard make some changes if required and it can also happen b/w the development cycle. I mean there's nothing static in the Storyboard.
 
2. There is an option of Importing shapes if the pre defined shapes doesn't suit you
 
3. This approach is something one will follow in the day to day life (a part from using Powerpoint) and there's nothing much new in Software life cycle.. When it comes to other methods not sure which one..
 
4. I did not knew about the Tagging .. Will find out on this and do that.
Ranjan.D

GeneralMy vote of 4memberJan Steyn12-Oct-11 1:42 
Thanks, I didnt't know about the storyboarding feature being builtin
Question[My vote of 2] This is a joke... right?memberDewey11-Oct-11 23:34 
I seriously must be missing something.
 
Where's the beef?
 
You make a valid point about storyboarding, but beyond that, I'm at a loss to divine any additional value.
 
My vote of a generous 2.
AnswerRe: [My vote of 2] This is a joke... right? [modified]memberRanjan.D12-Oct-11 0:34 
Yes you are missing StoryBoard Template in Power point , which comes with VS 2011.. Please let me know what you are really expecting. Storyboard is something which you are expressing your thoughts say Pictorially.. I cannot take all the real word example or products and explain in a fashion that suits every one.
 
One has to understand the concept why it's required , Importance and How it can be done. The rest depends on you how exactly you are presenting it in a Storyboard.
 
Please respect the Authors time.
 
Thanks,
Ranjan.D


modified 12-Oct-11 23:18pm.

AnswerRe: [My vote of 2] This is a joke... right?memberii_noname_ii12-Oct-11 22:36 
I agree... I'm either not understanding, or there is no content... Voted 1.. Sorry author.
"Oh look at the button!" "Ooh, look an empty toolbox!"
GeneralRe: [My vote of 2] This is a joke... right?memberRanjan.D12-Oct-11 22:43 
I don't know which field you are working on. BTW I really want to know what you did not understood.. The reason why I have put pictures is it's worth than a lines of text Smile | :)
 
>> "Oh look at the button!" "Ooh, look an empty toolbox!"
Anything wrong with Button or an Empty textbox.. Oh boy these are just a prototype
 
Thanks,
Ranjan.D

GeneralMy vote of 3memberPravin Patil, Mumbai11-Oct-11 23:26 
Good attempt....
QuestionFeedback and VotememberRanjan.D11-Oct-11 21:02 
Guys,
 
I'am expecting some feedback's on this article.. Also kindly vote if you find it useful
 
Thanks,
Ranjan.D

AnswerRe: Feedback and VotememberDoc Lobster11-Oct-11 21:54 
Sorry, but there's not enough to vote on. Nonetheless, I think a good article on making mock-up presentations would be valued.
GeneralRe: Feedback and VotememberRanjan.D11-Oct-11 22:03 
Thanks! Mockup UI or presentation purely depends on the business needs. Still I can take up one simple scenario and explain. Some of the Storyboard items which you can see in this article under "Points Of Interest" are, when you want to develop an mobile based application and in particular these are Mobile Payment app.
 
Thanks,
Ranjan.D

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

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