View this PageEdit this PageAttachments to this PageHistory of this PageHomeRecent ChangesSearch the SwikiHelp Guide
Hotspots: Admin Pages | Turn-in Site |
Current Links: Cases Final Project Summer 2007

Best ways to create GUI Mock Ups

Creating a good User Interface is one of the important lessons in this class.
You will start working on UI design even before you start programming or learn about Smalltalk.
During the Fall 2010 semester, M3 covered planning class structures and creating mock ups for the interface of the final product.
Unfortunately, this was before we were able to learn about what Smalltalk can and cannot do.
This later created conflict during the actual coding and front end development process.

For instance, the attached file shows the GUI mock ups created for M3: 2340 Mock Ups (2).pptx

Following link shows the screen capture of what our Smalltalk GUI ended up looking like: M7 Project GUI Coding

There is a way to make the design more elaborative in web version.
However, since my group did not take too much time to make the web design look pretty, we'll just skip that part.

You can probably see the vast difference between the initial design and the actual implementation.
The best way to reduce this gap is understanding what kind of GUI functionality Smalltalk can provide.
Since Smalltalk's GUI is similar to that of Visual Basics, where the user can drag and drop the necessary fields,
it is very easy to figure out what your actual User Interface would look like even before learning about the Smalltalk.

What this guide will teach you is the best and most effective way to create a GUI Mock UP that would closely reflect the final GUI implementation.
There are several ways to create the mock ups but the following 2 options are what I recommend from my personal experience of completing all 10 Milestones.

As I said previously, the best way to reduce the gap between the mock up and actual implementation of GUI
is by understanding what Smalltalk offers in terms of designing GUI.
What would be the best way to do this other than actually experimenting with Smalltalk IDE?

Step 1. Installing Visual Works
Fill out the necessary information and download the Visual Works (IDE for Smalltalk) from the following link and install it on your machine

Step 2. Open a New Canvas
canvas open.jpg // this is what canvas looks like

Step 3. Create a GUI Mock Up by dragging and dropping widget from the palette

Step 4. Capture screen and save as a picture
Mac Users:
To capture a portion of the desktop, press Command-Shift-4. A cross-hair cursor will appear and you can click and drag to select the area you wish to capture. When you release the mouse button, the screen shot will be automatically saved as a PNG file on your desktop.

Windows Users:
You can capture the screen by pressing "Prt Sc" key on your keyboard.
Doing this would capture your entire computer's screen.
capture screen.jpg

Open "Paint" by going to Start -> All Programs -> Accessories -> Paint
This should have come with Windows OS for free.
Press Ctrl + V to paste the captured screen

2007 or later version
Then by selecting the part you want to keep and right click and select "crop".
Go to File ->Save As - JPG - Save in a desired location under a name you want.

If you do not have up to date version of Windows OS, you will not have the "crop" function in Paint.
In this case, you'll have to select the part you want to keep and right click then select "cut"
Go to File -> New. This will open up a blank canvas.
Click "Image" on the menu bar at the top of the screen. Choose "Resize/Skew" from the menu. The "Resize and Skew" window opens up.
Change the size to 30% or something small.
On the blank canvas, right click then select "paste".
Now save this file in desired location in a format and name you want.

If you're not entirely satisfied with what Smalltalk can offer you in terms of GUI,
another easy way to create GUI mock up is using the power point.
If you have 2007 or later version of power point, you can make a beautiful ppt mock ups easily
and can even simulate step by step actions through slideshow.

Example: 2340 Mock Ups (2).pptx

One important thing to remember is to save any graphics or pictures you use.
This will come in handy when you're designing the website version.

Another way to create a mock up is through web-design on prism account.
But if you're not very familiar with CSS or HTML, I do not recommend this.
In case you're not familiar with web design but would like try anyway, following link should be helpful:

I hope this guide helped you create a GUI Mock up in relatively short time and got you to learn more about what you can do in Smalltalk

Links to this Page