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
- 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.
- 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.
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.
- When you open PowerPoint, you will see a ribbon as below, you can see a template for creating storyboard:
- Here are the storyboard shapes, which is available for us to visually represent our thoughts.
- Create a new slide and select a template as shown below:
- 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.
Advantages of Using Tools
- Creating Storyboard with tools is much easier and by using Pre-defined shapes, one can easily design the UI which meets the customers expectations.
- You can share with your Subject Mater Experts, they can review and easily make necessary changes if required.
- 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:
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.
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
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
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 Content 2014