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

Storyboard in Powerpoint

, 14 Oct 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
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)

Share

About the Author

Ranjan.D
Web Developer
United States United States
Profile
 
Around 10 years of professional software development experience in analysis, design, development, testing and implementation of enterprise web applications for healthcare domain with good exposure to object-oriented design, software architectures, design patterns, test-driven development and agile practices.
 
In Brief
 
Analyse and create High Level , Detailed Design documents.
Use UML Modelling and create Use Cases , Class Diagram , Component Model , Deployment Diagram, Sequence Diagram in HLD.
 
Area of Working : Dedicated to Microsoft .NET Technologies
Experience with : C# , J2EE , J2ME, Windows Phone 8, Windows Store App
Proficient in: C# , XML , XHTML, XML, HTML5, Javascript, Jquery, CSS, SQL, LINQ, EF
 
Software Development
 
Database: Microsoft SQL Server, FoxPro
Development Frameworks: Microsoft .NET 1.1, 2.0, 3.5, 4.5
UI: Windows Forms, Windows Presentation Foundation, ASP.NET Web Forms and ASP.NET MVC3, MVC4
Coding: WinForm , Web Development, Windows Phone, WinRT Programming, WCF, WebAPI
 
Healthcare Domain Experience
 
CCD, CCR, QRDA, HIE, HL7 V3, Healthcare Interoperability
 
Others:
 
TTD, BDD
 
Education
 
B.E (Computer Science)
 
CodeProject Contest So Far:
 
1. Windows Azure Developer Contest - HealthReunion - A Windows Azure based healthcare product , link - http://www.codeproject.com/Articles/582535/HealthReunion-A-Windows-Azure-based-healthcare-pro
 
2. DnB Developer Contest - DNB Business Lookup and Analytics , link - http://www.codeproject.com/Articles/618344/DNB-Business-Lookup-and-Analytics
 
3. Intel Ultrabook Contest - Journey from development, code signing to publishing my App to Intel AppUp , link - http://www.codeproject.com/Articles/517482/Journey-from-development-code-signing-to-publishin
 
4. Intel App Innovation Contest 2013 - eHealthCare - http://www.codeproject.com/Articles/635815/eHealthCare
 
5. Grand Prize Winner of CodeProject HTML5 &CSS3 Article Contest 2014
 
6. Grand Prize Winner of CodeProject Android Article Contest 2014

Comments and Discussions

 
QuestionWhere can we get this powerpoint addin ? Pinmemberskneife7-May-12 6:23 
AnswerRe: Where can we get this powerpoint addin ? PinmemberRanjan.D11-May-12 18:52 
GeneralRe: Where can we get this powerpoint addin ? PinmemberMember 875530216-Aug-12 3:15 
GeneralMy vote of 3 Pinmemberakjoshi26-Feb-12 20:35 
GeneralMy vote of 3 Pinmembermaq_rohit14-Oct-11 8:55 
GeneralMy vote of 4 PinmemberMember 803644614-Oct-11 5:44 
SuggestionA few friendly suggestions... PinmemberSnorri14-Oct-11 1:56 
GeneralRe: A few friendly suggestions... PinmemberRanjan.D14-Oct-11 2:14 
QuestionMy non-vote PinmemberManfred R. Bihy14-Oct-11 1:51 
AnswerRe: My non-vote PinmemberRanjan.D14-Oct-11 1:54 
GeneralRe: My non-vote PinmemberManfred R. Bihy14-Oct-11 2:00 
SuggestionOff Topic Post Pinmembernot_starman14-Oct-11 0:51 
GeneralRe: Off Topic Post [modified] PinmemberRanjan.D14-Oct-11 1:43 
GeneralRe: Off Topic Post Pinmembernot_starman14-Oct-11 5:30 
GeneralRe: Off Topic Post PinmemberRanjan.D14-Oct-11 6:01 
GeneralMy vote of 2 PinmemberMario Majcica14-Oct-11 0:48 
GeneralRe: My vote of 2 PinmemberRanjan.D14-Oct-11 1:46 
GeneralRe: My vote of 2 PinmemberMario Majcica16-Oct-11 23:03 
GeneralMy vote of 1 Pinmemberii_noname_ii12-Oct-11 23:36 
GeneralRe: My vote of 1 PinmemberRanjan.D12-Oct-11 23:41 
GeneralRe: My vote of 1 Pinmemberii_noname_ii12-Oct-11 23:43 
GeneralRe: My vote of 1 PinmemberReiss13-Oct-11 4:12 
GeneralMy non vote PinmemberReiss12-Oct-11 22:40 
GeneralRe: My non vote PinmemberRanjan.D12-Oct-11 22:56 
GeneralMy vote of 4 PinmemberJan Steyn12-Oct-11 2:42 

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.

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