| |
MockupScreens |
| Screen Mockups. Rapid GUI prototyping. Application interface prototypes. Software development tool. Gathering software requirements. Capturing storyboards. Application wireframes. | ||
You can download this document in PDF format here.
First, we start the MockupScreens application and we get the following screen:
The screen is divided in two parts. In the right frame, there is a list of scenarios for our project. Currently, there is only one default scenario: "Main scenario". Our project has a name "Project" which isn't very illuminating, so we change the name through the menu action File-->Rename Project to "Employee Database". We also rename the "Main scenario" to "Check Employee" with menu action Scenario-->Rename Scenario.
In the left frame, there are screens for selected scenario. As we haven't created any, there are no screens yet. We'll need three screens. Press the <Insert> key three times.
Note that in the status bar always there are instructions on most common actions you can take. The instructions are context sensitive: as you move the mouse over the screen or change focus while editing, instructions change to give you more precise help.
Now we have three screens in the main scenario. We'll rename screens according to the steps in scenario (of course, that is only one way how to organize screens): 1."Login", 2."Find Employee" and 3. "Employee Details".
We navigate between screens with arrow keys and <TAB> and change each screen's name with <ALT>+<S>.
We'll define the screens now. Navigate to Login screen and press <Return> (or you can just double-click it).
We see our Login screen. The screen elements we need are on the left toolbar. For the Login screen we need:
We choose from the left toolbar two labeled fields ("Lbl.Field") and two buttons. We don't have to position them precisely just yet.
Now we have the elements we need and we drag them with mouse to desired positions. We adjust the size of elements by dragging the "resize handle" shown on lower right corner of selected element.
Now we set the labels right. We cycle through elements with <TAB> and edit each element in the following manner:
Now close the screen and edit the "Find Employee" screen.
In "Find Employee" screen, first we add menus to the window: click within the form itself, and in the "Menu titles" enter on separate rows (go to the next row with <CTRL>+<Return>): File, Edit, Help and press <Return> to accept editing changes. The menubar will appear, with specified menus on it.
Now put the labeled field and accompanying button for searching the employee by name, and add the table for results.
We select the table and define the table columns. Again, to go to the next row press <CTRL>+<Return>. Columns are wide exactly as needed for their name. So if you want to make a column wider, just put enough spaces after the column name.
We'll populate the table with some employee data, so select the table and click the "Edit table data" button.
We enter the content for the first row, specifying data for each column in separate row (<CTRL>+<Return> starts the next row). Then we choose the second row by specifying "2" for "Edit row:" and enter the data for the second row as shown here.
We close the table editor and our screen looks like this:
Finally, select the table and click "V.Scrollbar" to add the scrollbar to the table and that's it for this screen.
Close the screen editor. The screen thumbnails has changed to make it easy to find the right screen.
We have yet to specify the third screen, so open it.
First add the "File", "Edit" and "Help" menus, and then add the "Tabs" element. Specify three tabs: "Personal", "Contact" and "Office" each on it's own row in "Tab captions" field.
Now add the following:
Let's say you decide that Department should be selected from dropdown menu. This is no problem, just select "Dept:" labeled field and choose "Transform - to Labeled Dropdown" from top toolbar. This way you don't have to (over)design everything upfront – just tweak it as you go.
If you have trouble selecting specific element, you can always select it on the tree on the right, where all elements are shown along with their overlapping order (Z-order) which shows which element is shown "above" some other element. You can change the Z-order by choosing appropriate action on the top toolbar.
We want to save the "screenshot" e.g. image of our mockup screen, to use it in our requirement or UI prototype documentation, UseCase specifications, storyboards or such.
We can take the snapshot of the single screen by clicking "Snapshot" button ot the top toolbar and simply choosing right folder and specifying the image filename and extension (there are two formats available, GIF and JPEG).
But there is another way, far more productive. Close the screen editor to get to the scenarios screen.
Again, choose the folder, but this time MockupScreens will export all screen images to the folder and give them names "screen001", "screen002", "screen003" respectively. Also, the "index.html" file will be created which just shows all the exported screens - many times, that's all you want: just double-click it and print, copy-paste or whatever you want with the mockups.
You made it: this is the end of the tutorial. Now you should be ready for the real work. I hope you'll find this software as productive as it is intended to be. Above all - have fun!
| Copyright © 2004-2006, Igor Ješe | ||