![]() ![]() Instead of drawing everything from scratch, we can create a new wireframe based on an existing one. Let's draw a new wireframe for this screen. Once user has tabbed the button, we shall popup a pane for him to enter his comment. Move the tab icon to the New Post button. 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. We want to represent that the end user should tab the New Post button to create a post. Click on the text Post Comment in the breadcrumb. Again, select the Image tool from the diagram toolbar and create an image widget that span the whole tablet screen. Now, we want to represent that the diagram to post comment is shown inside the tablet. Obviously, to represent this button with image is a better choice. If you used the button widget there, what you will see now is a captioned button. Click OK.Īs you can see, a beautifully looked button is added into the action bar. Select New Email from the Select Android Icons window. Make it small enough to show inside the action bar. Now, select the Image tool in the diagram toolbar.Ĭlick on the right hand side of the action bar, next to the Overflow button.ĭrag on its corner to resize it to smaller size. You may wonder why we don't use a button widget instead. Let's represent this button with an image widget. On the right hand side of the action bar we want to show a button for creating post. Right-click on the frame of the device and select Action Bar > Show from the popup menu. We want to represent that the post function is triggered by tabbing on a 'New Post' button on action bar. ![]() ![]() from the popup menu to rename the wireframe. 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. This creates a new wireframe and you are immediately prompted to enter a name for this wireframe (diagram). 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. Now, we need to add wireframes into this storyboard to represent how user can post a comment in PostMania. Click OK.ĭouble click on the empty storyboard to open it. In the popup dialog box, enter Post Comment as the name of storyboard. Select Modeling > Storyboard from the toolbar.Ĭlick Add New Storyboard to create a storyboard. Enter the project name in the New Project window populated and click Create Blank Project. You can create a project by selecting Project > New from the toolbar. In this part, we will create a storyboard to represent how user can post a comment in the Android tablet version of PostMania.Ĭreate a new project in Visual Paradigm. The second part shows you how to re-use a wireframe created in creating a new storyboard. The first part aims to show you how to create a simple storyboard with several wireframes in it. ![]() 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. Stakeholders can view the design through web browser and leave their comments. PostMania enables the sharing of software design online. PostMania is a service supported by Visual Paradigm Online. Example - Android Tablet version of PostMania ![]()
0 Comments
Leave a Reply. |