MockupScreens - User Guide

Transcription

1 MockupScreens - User Guide

2 Contents 1. Overview Getting Started...5 Installing the software... 5 Registering Understanding the Interface...11 Menu Bar Tool bar Elements Screens Basic and advanced options Comments Using MockupScreens...19 Managing elements Choosing elements to build a screen prototype...19 Setting the basic options of elements...20 Setting the advanced options of elements...23 Adjusting elements on the screen...27 Cut/Copy/Paste Elements...27 Transforming one element to the other...27 Selecting multiple elements...28 Managing Screen Prototypes and Groups Creating screen prototypes...28 Creating groups...31 Moving screens from one group to the other...32 Importing scenarios Exporting scenarios Exporting scenarios to a folder...32 Exporting scenarios to html...33 Export scenario to xml...34 Running slideshow of a scenario Taking snapshot of the current screen Printing screens/groups/projects... 36

3 5. Setting Options...38 Editor options Export options Print options Slideshow options Snapshot options Switching skins... 44

4 1. Overview MockupScreens is an easy-to-use software application designed to handle the early stages of the software development process. MockupScreens helps you to: sketch screen prototypes of your product and arrange them in groups or scenarios. experiment interactively with clients, and quickly visualize scenarios of software application, even before the coding has started. communicate your product developments to your clients and discuss design ideas. create five prototypes in ten minutes without any programming knowledge.

5 2. Getting Started Installing the software Before installing the software, you need to download the trial version and then register it with license key. To download the software: 1. Click the following link: 2. In the Opening Mockup4Setup.exe box, click Save File. The Mockup4Setup.exe icon is downloaded. You can install the MockupScreens application by performing the following steps. To install the software: 1. Double-click the Mockup4Setup.exe icon. 2. In the Setup window, click Next to continue.

6 3. In the Licence Agreement window, click the I Agree button. 4. In the Choose Install Location window, click the Browse button.

7 5. In the Browse For Folder dialog box, navigate to the destination folder in which you want to install Mockup Screens 4.a6. Click Next. 6. In the Choose Start Menu Folder dialog box, select the Start Menu Folder in which you want to create the program s shortcuts. Note: You can also create a new folder. 7. Select the Do not create shortcuts check box if you do not want to create any shortcuts. 8. Click the Install button. 9. In the Completing the Mockup Screens 4.a6 Setup Wizard dialog box, click Finish. 10. To run the application instantly, select the Run Mockup Screens 4.a6 check box.

8

9 Registering Though you can avail the unregistered 30-day trial version facility, it is highly recommended that you register to get the full version of the application. Registering of the application ensures you: No watermark image on your screens No annoying messages of time limits 12 months of free upgrades and free support If you are using the trial version, do the following to register yourself: To register: 1. Click Register on the Help menu, the submenu is displayed. 2. In the Buy the Full Version of Mockup Screens dialog box, click the Buy the Full Version Now... button.

10 The page is displayed where you buy your license by opting one of the following packages based on the team size that use the product: Single User Team Corporate Education 3. Select a package based on your requirements. 4. Fill in the registration form and click Submit. Note: Once you are successfully registered, you will receive the registration code to your mail ID (which you have provided in the registration form.) 5. In the Buy the Full Version of Mockup Screens dialog box, click the Enter your registration Code... button. 6. In the prompted message box, enter the registration code and click OK. The MockupScreens application opens.

11 3. Understanding the Interface MockupScreens comes with a user-friendly interface and is easy to use. The simplified design of the interface, which is almost confined to a single screen, enables you to perform the tasks easily and quickly. The following screen shot explains different components of the interface: Menu Bar The menu bar consists of five menus: File, Edit, Drawing, Tools, and Help. File: Using the File menu, you can: create a new project or open an existing project. save the project in a specified location. print the whole project or a selected group or the current screen.

12 open the recent files that you have worked on. exit the MockupScreens application. Edit: Using the Edit menu, you can: undo or redo the previously performed actions. copy, cut, and paste. Drawing: Using the Drawing menu, you can: create, delete, and rename a screen. create, delete, and rename a group. transform one element to the other. Show/ hide the grid. bring an element to front or send it to back if there are two elements.

13 Tools: Using the Tools menu, you can: run a slideshow of the screens. take a snapshot of a screen and either save it or copy it to the clipboard. export the whole project or a selected group to a HTML page. export the whole project or a selected group to a XML page. export the whole project or a selected group to a scenario. import a scenario into the root group or a selected group. set Editor, Export, Print, Slideshow, Snapshot, and General options. Help: Using the Tools menu, you can: go to the product help. register yourself and buy MockupScreens. visit the M website.

14 Tool bar In addition to the menu functions, the tool bar consists of some more functions. Using the tool bar, you can perform the following functions in the same order as displayed in the application: Create a new project or open an existing project. Save a project. Print a screen. Undo or redo the previously performed actions. Cut, copy, and paste. Run a slideshow of the screens. Take a snapshot of a screen and either save it or copy it to the clipboard. Change the screen skin to Web or Black & White or Windows. set Editor, Export, Print, Slideshow, Snapshot, and General options. Bold, italicize, and underline text. Change color and font size of text. Align text to left, center, and right. Elements The screen elements are displayed in the left panel called Widgets. These elements are used to create a prototype of your product screen. You click elements in the left panel and click on the screen in the work area where you want the elements to appear. Using the elements, you can create prototypes according to your requirement.

15 The following image displays how the elements appear when you place them in the work area:

16 Screens The screens are displayed in the right panel called Screens. After you create screens in the work area, they are displayed in the Screens panel so that you can select any screen from the panel and work on it. The default Screens panel consists of one Screens folder, and within it, a Group folder. The following image displays that when a screen is created in the work area, it is displayed in the Screens panel: Basic and advanced options By setting the basic and advanced options to elements, you can create prototypes to suit your requirements. These basic and advanced options vary from element to element. You can set these options in the specified tab areas below the work area. You can also modify the options whenever you like. The following image displays the advanced options of the table element. To go to the basic options, you need to click the adjacent Basic tab.

17 Comments You can attach comments to elements if using the Comments tab below the work area. When a comment is typed for a specific element, the comment is displayed for the element with a line attached to it. The following image displays how a comment is attached to the table element:

18

19 4. Using MockupScreens This chapter helps you perform different functions of the application. Managing elements This section consists of the following topics: Choosing Elements to build a screen prototype screen Setting the Basic Options of Elements Setting the Advanced Options of Elements Adjusting Elements on the screen Cut, Copy, Paste Elements Attaching Comments to Elements Transforming one element to the other Selecting multiple elements Choosing elements to build a screen prototype To choose an element into the screen: 1. Click the element in the Widgets panel.

20 2. Click on the screen in the work area. The element is displayed on the screen. Setting the basic options of elements To set the basic options of an element: 1. Right-click the element on the screen and click Edit element. 2. In the Basic tab area, do the following:

21 Caption: Type a name for the element. Checked: Select or clear the check box to enable or disable the check box. This option is meant for the Checkbox element. Text: Type text in the box. This option is meant for the Text element. Transparent: Select the check box to make the text transparent. This option is meant for the Text element. Tab Captions: Type the tab captions in a list form in the box and the captions are displayed for the tabs. This option is meant for the Tab element. Active tab: In the drop-down list, select the tab which you want to be active. This option is meant for the Tab element. Select Gallery Image: Click the button to navigate and select a gallery image. This option is meant for the Image element. Select a Custom Image: Click the button to navigate and select a custom image. This option is meant for the Image element. Options: Type options in a list form in the box and the options are displayed as radio buttons. This option is meant for the Radio element. Selected Option: In the drop-down list, choose the option which you want to be displayed as selected. This option is meant for the Radio element. List Values: Type the list values in a list form in the box and the values are displayed as list values. This option is meant for List and Label.List elements. Tree Items: Type the tree items in a list form in the box and the items are displayed as tree items. This option is meant for the Tree element. Flip Diagonal: Select the check box to flip the line diagonally. This option is meant for the Line element. Columns: Type the column name in a list form in the box and the names are displayed as columns for the table element. This option is meant for the Table element. Table Editor: Click the Edit button to enter table data. In the prompted Edit Table Values dialog box, you can o o o o o o Add a column: Click the Add Column button. Delete a column: Select the column header (on the alphabet) and click the Delete Column button. Add a row: Click the Add Row button. Delete a row: Select the row header (on the numeral at the left side) and click the Delete Row button. Paste data from an excel sheet: Select the row or column and click the Paste from Excel button. Resize table column s width: Drag the column lines to expand or reduce the column width.

22 Label: Type the label names in a list form in the box and the labels are displayed in the element. This option is meant for Label.Field, Label.Dropdown, and Label.List elements. Change Mark Icon: Click the button to select an icon from the box. This option is meant for the Marks element. Marks icons are meant to point something out on the screen. Marks icons are useful to explain the user interface.

23 Setting the advanced options of elements To set the advanced options of an element: 1. Select the element on the screen in the work area. 2. In the Advanced tab area, do the following: Disabled: Select the check box to disable the element. To enable the element, clear the check box. Jump to Screen: Using the Jump to Screen feature, you can set basic interactivity for presenting mockups to your customer. You can set any screen element to jump to any other screen within the project when clicked during slideshow or in the HTML export. This feature is explained below using the following example: o o o Select the Group Codes element in the screen. In the Advanced tab area, click the dotted button. In the prompted Select Screen to Jump message box, select the Group Codes screen from the list and click OK.

24 In the slideshow or in the HTML export, when you click the Group Codes button, it takes you to the Group Codes screen which you have set in the Select Screen to Jump box.

25 Horizontal Scrollbar: Select the check box to create a horizontal scroll bar for the element. Vertical Scrollbar: Select the check box to create a horizontal scroll bar for the element. Connection Lines: Select the check box to enable connection lines for the Tree element.

26 Grid Lines: Select the Vertical Lines check box to enable the vertical lines in the table. Select the Horizontal Lines check box to enable the horizontal lines in the table. Body Font: Using the formatting tolls, you can o bold, italicize, and underline the text in the table o change the font size and color of the text in the table o align text to left, center, and right in the table

27 Adjusting elements on the screen When two elements are placed one on the other, you can bring an element to front or send it to back according to the requirement. To adjust elements one on the other: 1. Right-click the element and click Bring to Front to bring it to front. 2. Right-click the element and click Send to back to send it to back. The following image displays how the field element and button element are adjusted one on the other: Cut/Copy/Paste Elements You can cut or copy screen elements from one location and paste them in another location on the screen. To copy/cut/paste an element: Right click the element and select the relevant option. You can also use the Edit menu to perform these actions. Transforming one element to the other You can transform one element to the other so that you can change the prototypes according to your ideas quickly. To transform one element to the other: 1. Right-click an element on the screen. 2. Point to Transform and click the element to which you want to transform it.

28 Note: When transforming one element to the other, the element changes to the selected element but data is preserved. You need not type all the data again. You, however, can set the basic and advanced options which you want to modify. Selecting multiple elements Instead of performing an element function for each element separately, you can select multiple elements and apply the same function to all at a time. To select multiple elements: Select multiple elements on the screen while holding the Ctrl or Shift key. (Or) Click and drag the mouse button around the elements. To deselect one of the multiple elements: Click the element while holding the Ctrl or Shift key. Managing Screen Prototypes and Groups This section consists of the following topics: Creating Screen Prototypes Creating Groups Moving Screens from one Group to the other Importing Screens into Projects Exporting Screens Creating screen prototypes To create a prototype screen:

29 1. Click New Screen on the Drawing menu. The new screen is displayed in the work area. 2. Click the element you want from the Widgets panel. 3. Now, click on the screen. The element is placed on the screen. Based on the prototype requirement, you can select and add them to the screen. The following image displays how elements can be arranged for a prototype using the Basic and Advanced options. 4. To set the basic and advanced options to an element, Right-click the element on the screen and then click Edit Element. 5. In the Basic and Advanced tab areas, set the required options for the element such as providing a caption for the element, disabling the element etc. Note: These basic and advanced options vary from element to element.

30 6. To add a comment to an element, type the comment text in the Comments tab area. The comment is attached to the element on the screen. 7. To set the comment settings, click Options on the Tools menu. 8. In the Editor tab area, set the comment options in the Marks and Comments area. Display Comments: Select the check box to display comments you used. If you clear the check box, comments are not shown on the screen. Comment Word Wrap Length: Enter numerals in the field to set the word wrap length in the displayed comment box on the screen. Comment Max Display Length: Enter numerals in the field to set the display length of the comment. Note that this comment display length cannot be less than word wrap length. To cut/copy/paste a screen: On the Edit menu, click the Cut, Copy, Paste button according to the requirement. (Or) In the Screens panel, right-click the screen and click Cut/Copy/Paste. To delete or rename a screen:

31 On the Drawing menu, select Delete Screen or Rename Screen. (Or) In the Screens panel, right-click the screen and click Delete or Rename. Creating groups Groups consist of the prototype screens you have created. You can organize all the related screens in one group. You can create any number of groups, rename the groups, and delete unnecessary groups. The default Screens panel consists of one group within the default Screen folder. You can rename the default group or create a new group. To create a group: Click New Group on the Drawing menu. The new group is displayed in the Screens panel. The following image displays how screen prototypes are arranged in groups. To cut/copy/paste a group: 1. Select the group in the Screens panel. 2. On the Edit menu, click the Cut, Copy, Paste button according to the requirement. (Or) In the Screens panel, right-click the group and click Cut/ Copy/Paste. To delete or rename a group: 1. Select the group in the Screens panel.

32 2. On the Drawing menu, select Delete Screen or Rename Screen. (Or) In the Screens panel, right-click the group and click Delete or Rename. Moving screens from one group to the other You can move screens of one group to the other according to your requirement. To move screens: 1. Right-click the screen you want to move and click Cut or Copy. 2. Right click the group you want to place the screen and click Paste. Importing scenarios A scenario is a.mck file which is a collection of screens. You can import a scenario from outside folders into the project. To import a scenario: 1. Click Import Scenario on the Tools menu. The Select Scenario Import Option box is displayed. 2. Click one of the two buttons based on the requirement: Import into root group: The scenario will be imported to the root group in the Screens panel. Import into selected group: The scenario will be imported to the selected group in the Screens panel. 3. In the Choose a Mock file dialog box, navigate to the scenario (.mck file). 4. Select the scenario and click Open. The scenario is imported in the Screens panel. Exporting scenarios You can export scenarios to an outside location, or to HTML, or to XML. Exporting scenarios to a folder To export a scenario to a folder:

33 1. Click Export Scenario on the Tools menu. The Select Scenario Export Option box is displayed. 2. Click one of the two buttons based on the requirement: Export Whole Project: The whole project will be exported to the selected location. Export Selected Group: The selected group will be exported. 3. In the Save Scenario as... dialog box, navigate to the folder into which you want to export the scenario. 4. In the File name field, type a name for the scenario. 5. Click Save. The scenario is exported to the folder. Exporting scenarios to html To export a scenario into HTML: 1. Click Export to HTML on the Tools menu. The Select HTML Export Option box is displayed. 2. Click one of the two buttons based on the requirement: Export Whole Project: The whole project will be exported HTML. Export Selected Group: The selected group will be exported. 3. In the Browse For Folder dialog box, navigate to the folder into which you want to export the scenario.

34 4. In Folder field, type a name for the folder. To make a new folder, click the Make New Folder button. 5. Click OK. The scenario is exported to HTML and the HTML page also opens. Export scenario to xml To export a scenario to XML: 1. Click Export to XML on the Tools menu. The Select XML Export Option box is displayed. 2. Click one of the two buttons based on the requirement: Export Whole Project: The whole project will be exported to XML. Export Selected Group: The selected group will be exported. 3. In the Save XML as... dialog box, navigate to the folder into which you want to export the scenario.

35 4. In the File name field, type a name for the XML file. 5. Click Save. The XML file is saved to the folder and the XML file also opens. Running slideshow of a scenario You can view the slideshow of a scenario for a better view for explanation. To run a slideshow of a scenario: 1. Click Run Slideshow... on the Tools menu. The Slideshow window is displayed. 2. Click the Go Screen button to view screens one by one. You can also use the UP and Down arrow buttons to move from one screen to the other. 3. To close the slideshow, click the Close button. Taking snapshot of the current screen You can take a snapshot of the screen you are working on. You can either save it to a folder or copy it to the clipboard.

36 To take a snapshot: 1. Click Take Snapshot on the Tools menu. The Select Snapshot Option box is displayed. 2. Click Save to file to save the snapshot to a folder. 3. In the Save Image as... dialog box, navigate to a location. 4. In the File name field, type a name for the image. 5. From the Save as type drop-down box, select the image format. 6. Click Save. The snapshot is saved to the folder. 7. The Select Snapshot Option box, click Copy to Clipboard to copy the image for later use. Printing screens/groups/projects You can print the whole project or a selected group or a current screen. To print: 1. Click Print on the File menu. The Mockup Print box is displayed.

37 2. Click one of the buttons to print the whole project, a selected group, the current screen. The Mockup Print Preview dialog box is displayed. 3. To move from one screen to the other use the arrow buttons on the top bar. 4. Click the Goto button. 5. In the Goto Page box, enter the page numbers that you want print and click OK. 6. Click Print. 7. In the Print dialog box, set the required options and click Print.

38 5. Setting Options Based on your requirements, you can set different options to make functions work the way you like. Setting element options determines how the element looks on the screen and populates its data. You can set options in six areas: Editor, Export, Print, Slideshow, Snapshot, and General. Editor options To set editor options: 1. Click Options on the Tools menu. 2. In the Set Options dialog box, click the Editor tab. 3. In the Grid area: Snap to Grid: Select the check box to snap to grid. Show Grid: Select the check box to show grid. Clear the check box to hide the grid. Size(px): Enter a numeral in the field to set the size of the each grid pixel. Note that grid size does not take less than In the Marks and Comments area:

39 Display Marks: Select the check box to display marks you used. If you clear the check box, marks are not shown on the screen. Display Comments: Select the check box to display comments you used. If you clear the check box, comments are not shown on the screen. Comment Word Wrap Length: Enter numerals in the field to set the word wrap length in the displayed comment box on the screen. Comment Max Display Length: Enter numerals in the field to set the display length of the comment. Note that this comment display length cannot be less than word wrap length. 5. Click OK. The following image shows how the setting options feature works for you. By changing the comment word wrap length, you can change the appearance of the comment box. Export options To set export options: 1. Click Options on the Tools menu.

40 2. In the Set Options dialog box, click the Export tab. 3. In the Image Format area: Export images as: Select the image format from the drop-down list. 4. In the Marks and Comments area: Export comments as text below the image: Select this radio button to display comments as text below the image. Embed comments in the image: Select this radio button to embed comments in the image. Don t export comments: Select this radio button if you do not want to export comments. 5. In the Grid area: Export Grid: Select the check box to export grid. 6. Click OK. Print options To set print options: 1. Click Options on the Tools menu. 2. In the Set Options dialog box, click the Print tab.

41 3. In the Marks and Comments area: Print comments as text below the image: Select this radio button to print comments as text below the image. Embed comments in the image: Select this radio button to embed comments in the image. Don t print comments: Select this radio button if you do not want to print comments. 4. In the Grid area: Print Grid: Select the check box to print grid. 5. Click OK. The following image displays how the comment displays when you change the options.

42 Slideshow options To set slideshow options: 1. Click Options on the Tools menu. 2. In the Set Options dialog box, click the Slideshow tab.

43 3. In the Grid area: Show Grid: Select the check box to show grid. 4. In the Marks and Comments area: Display Marks: Select the check box to display marks. Display Comments: Select the check box to display comments. 5. Click OK. Snapshot options To set snapshot options: 1. Click Options on the Tools menu. 2. In the Set Options dialog box, click the Snapshot tab.

44 3. In the Grid area: Show Grid: Select the check box to show grid. 4. In the Marks and Comments area: Display Marks: Select the check box to display marks. Display Comments: Select the check box to display comments. 5. Click OK. Switching skins You can switch the skin, look and feel of the screen prototypes, by using the General options in the Tools menu. To switch skins: 1. Click Tools> Options. The Set Options dialog box is displayed.

45 2. Click the General tab. It displays the default skin. 3. Select a skin type from the three options. Windows, Black& white and Web, 4. Click OK. The look and feel of the screens is changed accordingly.