Visual Paradigm logo
Jump to Menu

What is Storyboard? How to Develop a Storyboard?

Websites and applications have evolved to become more and more complex. In order to deliver a better user experience to end users, UX design (user experience design) has become increasingly important.

In this article, you will learn what storyboard is, what a storyboard can deliver to development team and stakeholders, and how to create storyboard in Visual Paradigm with the storyboard and wireframe tool.

Compatible edition(s): Enterprise, Professional, Standard

  • January 20, 2016
  • Views: 5,976
  • PDF

Example - Android Tablet version of PostMania

PostMania is a service supported by VPository.com, a cloud-based repository for Visual Paradigm users to store their design. PostMania enables the sharing of software design online. Stakeholders can view the design through web browser and leave their comments.


In this section, you will see how we "eat our own dog food" by using the storyboard feature to showcase the screen flow of the Android version of PostMania. This section is split into two parts. The first part aims to show you how to create a simple storyboard with several wireframes in it. The second part shows you how to re-use a wireframe created in creating a new storyboard.

Part 1 - Posting a Comment in PostMania

In this part, we will create a storyboard to represent how user can post a comment in the Android tablet version of PostMania.

  1. Create a new project in Visual Paradigm. You can create a project by selecting Project > New from the toolbar. Enter the project name in the New Project window populated and click Create Blank Project.
    Create blank project
  2. Select Modeling > Storyboard from the toolbar.
  3. Click Add New Storyboard to create a storyboard.
    Add new storyboard
  4. In the popup dialog box, enter Post Comment as the name of storyboard. Click OK.
  5. Double click on the empty storyboard to open it.
    Open storyboard
  6. Now, we need to add wireframes into this storyboard to represent how user can post a comment in PostMania. Click Add Wireframe to Storyboard.
    Add wireframe to storyboard
  7. We are going to draw wireframes for the Android tablet version of PostMania, so let's keep Android Tablet selected and click New Android Tablet Wireframe.
    New android tablet wireframe
  8. This creates a new wireframe and you are immediately prompted to enter a name for this wireframe (diagram). Enter PostMania as name. If you have missed it, press F2 to trigger the rename function, or right click on the background of the wireframe (in blue) and select Rename Diagram... from the popup menu to rename the wireframe.
  9. We want to represent that the post function is triggered by tabbing on a 'New Post' button on action bar. Let's show the action bar first. Right click on the frame of the device and select Action Bar > Show from the popup menu.
    Show action bar
  10. On the right hand side of the action bar we want to show a button for creating post. Let's represent this button with an image widget. You may wonder why we don't use a button widget instead. We will explain it in a minute. Now, select the Image tool in the diagram toolbar.
    Select image tool
  11. Click on the right hand side of the action bar, next to the Overflow button.
    create image widget
  12. Drag on its corner to resize it to smaller size. Make it small enough to show inside the action bar.
    resize image widget
  13. Right click on it and select Android... from the popup menu.
  14. Select New Email from the Select Android Icons window. Click OK.
    select android icon
    As you can see, a beautifully looked button is added into the action bar.
    new email image created
    If you used the button widget there, what you will see now is a captioned button. Obviously, to represent this button with image is a better choice.
  15. Now, we want to represent that the diagram to post comment is shown inside the tablet. We can use an image to represent this. Again, select the Image tool from the diagram toolbar and create an image widget that span the whole tablet screen.
    create image wireframe widget
  16. We have finished the first wireframe. Let's go back to the storyboard first. Click on the text Post Comment in the breadcrumb.
    back to storyboard
  17. We want to represent that the end user should tab the New Post button to create a post. To represent this action, click on the down arrow button next to the name of the wireframe and select Finger Gesture > Tab from the drop down menu.
    using finger gesture
  18. Move the tab icon to the New Post button.
    finger gesture added
  19. Once user has tabbed the button, we shall popup a pane for him to enter his comment. Let's draw a new wireframe for this screen. Click Add Wireframe to Storyboard.
  20. Instead of drawing everything from scratch, we can create a new wireframe based on an existing one. This can be achieved by creating a 'state' of a wireframe. Let's try. In the corkboard you see a thumbnail of the wireframe you just created. Click on the Create Child State button at the bottom of the thumbnail to create a state from it.
    create child wireframe state
  21. You are brought to a new wireframe that looks exactly the same as the one you just drew. Now, modify it to make it become a new wireframe. Let's show a panel on the right hand side for entering comment. You can create such a panel using the Panel tool that can be found from the diagram toolbar.
    created panel
  22. Make use of the Text Field tool to draw a text field at the top of the panel for entering the subject of post. Enter Subject (optional) as placeholder text. You can enter text by double clicking on it.
    created text field wireframe widget
  23. Make use of the Label tool to add a label below the text field, with 1: as caption. When you add a label in wireframe it is shown as a placeholder shape. You can double click on it to enter a text.
    created label wireframe widget
  24. Make use of the Text Field tool again to draw a big text field next to the label for entering the post comment.
    created text field wireframe widget
  25. Let's say we want to represent an area of focusing in the diagram. Make use of the Polygon tool to draw an inverted triangle in the middle of the screen.
    created polygon
  26. Make use of the Label tool to add a label inside the triangle, with 1 as caption.
    label in polygon
  27. Finally, change the New Post button to a Send button. To do this, right click on the image and select Android... from popup menu.
    change android icon
  28. Select Send Now and click OK.
    select another android icon
  29. That's all for this wireframe. Click on Post Comment on breadcrumb to go back to the storyboard.
  30. Now, we want to represent the state when the subject of post is filled. Add a new wireframe by clicking Add Wireframe to Storyboard.
  31. This time, click on Create Child State from the second state.
    create child state
  32. Add a label inside the subject field. We just want to represent that the subject is filled. The text entered is not of our interest. So, we don't need to give the label a caption.
    created label in text field
  33. Click on Post Comment on breadcrumb to go back to the storyboard.
  34. Add one more wireframe. You should create a child state from the last wireframe state.
  35. This time, add a label inside the content text field. To represent multiple lines, drag the handler at the bottom of the label widget to make it render in multiple lines.
    created labels
  36. Click on Post Comment on breadcrumb to go back to the storyboard.
  37. To end the story of posting a comment, user is expected to tab the Send button. Click Add Wireframe to Storyboard again.
  38. Instead of creating a state, let's re-use the final state this time. Click on the checkbox of the final state.
    selecting child state
  39. Click Done on top of the corkboard, on the right hand side.
    confirmed child wireframe state selection
  40. Add a finger gesture Tab onto this wireframe and position it at the Send button.
    using finger gesture in storyboard
  41. That's all for this storyboard. Let's move on to the next part to work with a new story.

Part II - Posting Multiple Comments

In this section we want to create another storyboard for representing the actions required to create multiple marks when posting a comment in PostMania. We are going to start by re-using a wireframe created before.

  1. Click on Storyboards in the breadcrumb.
    open storyboard
  2. Click Add New Storyboard and enter Post Comment (Multiple Marks) as storyboard name.
  3. Double click to open the storyboard.
  4. Click Add Wireframe to Storyboard.
  5. We can reuse the wireframe created before. Select the Android wireframe PostMania.
    re-use existing wireframe
  6. The first two states match the new storyboard. Let's reuse them. Click on the checkbox of the first state, and then the second state.
    re-use existing states
  7. Click Done on top of the corkboard, on the right hand side.
  8. You are brought to the storyboard. Let's continue our story by creating a new wireframe. Click Add Wireframe to Storyboard.
  9. This time, create a child state from the second state.
    create child state
  10. Create one more set of label and text field in the panel on the right hand side. Change the label to have 2: as caption.
    duplicate label and text field
  11. Create an inverted triangle in the screen for representing the second mark.
    added polygon and label
  12. Click Post Comment (Multiple Marks) in breadcrumb to go back to the storyboard.
    back to storyboard
  13. We want to represent that the user can press on a specific position and hold the gesture to create a mark. Let's represent this with a Place and Hold gesture.
    press and hold gesture
  14. Now, try to apply the techniques you just learned to add a wireframe with the subject field filled. You should create a child state from the state you just created.
    wireframe modified
  15. Similarly, add another wireframe, which is a child state of the just-created state. This time, fill in the first comment field.
    wireframe modified
  16. Finally, create a wireframe with the second comment field filled.
    wireframe modified
  17. Don't forget the need to tab the Send button for posting a comment. In the Storyboard screen, click Add Wireframe to Storyboard. Check the last state and click Done at the top right of the screen.
    re-use wireframe
  18. Add a figure gesture Tab to the wireframe.
    using finger gesture

Enjoy the storyboard slideshow!

You have created two storyboards. How about having a presentation of what you have done? Let's play the story. The play feature helps you present your story with stakeholder. Let's try it now.

  1. Select Modeling > Play Storyboard from the toolbar. You are presented the first wireframe of the story Post Comment (Multiple Marks).
    wireframe slideshow
  2. Press the Right key to move on to the next wireframe. Press Right again and again to walk through all the wireframes. Enjoy!


Turn every software project into a successful one.