Assembling Demos from balsamiq Mockups
UPDATE: I posted an enhancement to this technique that pre-loads the image files to make the demo more responsive.
Several weeks ago I blogged about balsamiq Mockups. Now that I’ve really had a chance to use Mockups I am even more impressed with it! I won’t be using paper and pencil for thinking through UI designs any more!
Over the last few weeks I’ve put together a number of mockups and thought it would be really cool if I could link them together based on a user’s click on a hotspot on the image – like HTML image maps. A number of people have asked balsamiq for a demo or storyboard feature – and that would be really cool – but until that day comes, here is my low-budget, but pretty nifty, way to build demos from Mockups or any screen image or capture for that matter.
Here is a little demo that you can try out. There are 2 hotspots on the first page – over the Login button and over the first item in the “Today’s BIG Shrughs” list. Mouse over them and you should see a transparent orange rectangle with a dotted border appear. When you click the Login button, the next mockup screen will be displayed. It has several hotspots too. Explore a little bit before reading the next section.
How its Done
- Create a folder for your demo. Download and copy the index.html.txt and selection.css files in to your folder. Remove the ‘.txt‘ from index.html.txt – it is just there so you can download the file as text and not as a Web page! Create a folder called images too.
- Create your Mockup screens and save each as a PNG file. I like to put them in the folder called images (of all places!).
- Open index.html in your favorite text editor (I use TextMate on the Mac) and change the text between the <title> and </title> tags to your demo’s name.
- In the #image-map CSS, change the background-image: filename to point to your 1st Mockup PNG file. I like to name my PNGs with simple names like 01.png, 02.png, etc. Also change the height: and width: tags to your image’s dimensions.
- You will notice that there are 2 hotspots defined in the index.html file you downloaded. If you save index.html and then open it in a browser, you will see these hotspots highlight as you mouse around over your Mockups image. All you have to do now is determine how many hotspots the screen should have on it and create an anchor for each in the <body><div id=”hotspot”> section. Here is an example: <a href=“02.html” id=“signin”></a>. The href points to the destination html file that will include the Mockups PNG file for the next screen. Once you have finished, you need to add a hotspot markup in the CSS style section. Here is an example from the sample:
#hotspot a#signin {
top: 106px;
left: 438px;
width: 333px;
height: 27px;
}
You will need to change the top:, left:, width: and height: to fit the hotspot on your Mockup. Make sure it has the same name as the id tag in the anchor section you created. Create as many of these hotspot anchor sections as you need.
That’s all there is to it! It is a little manual but it goes quickly one you get the hang of it. Take a look at the demo again so you can see how it works. One last thing, you can change the appearance of the highlight hotspot rectangle in the selection.css. The border color can be changed, its width changed, and its style changed to solid, dashed, or dotted. You can also have a fill color (background-color:) and make it transparent with the opacity:. My example demonstrates this. Notice that IE needs a special markup for opacity.
One last thing! You can also add text to the HTML page to tell your users/testers what they are seeing, give a Use Case or anything else you want.
AtlasCamp, Podcast, Linked Mockups, yay! | The Balsamiq Blog said:
Nov 07, 08 at 7:51 am[...] Hackney just posted a tutorial on how to assemble multiple mockups into an HTML+image map+CSS “runnable” demo. I know many of you are waiting for this [...]
Balsamiq Mockups Rocks | The Institute for User Experience said:
Nov 29, 08 at 5:08 am[...] It is important to note that Balsamiq does not cover the “Full Product Lifecycle”, but thanks to the tips of one of the Balsamiq users (Michael Hackney), you can now do interaction with the help of a little bit of HTML, Image Map and CSS. [...]
Marc-Antoine Ross said:
Jun 17, 10 at 10:23 pmHi EclecticGuy,
This example looked interesting but all the links to the demo and sample files are broken.
Cheers,
Marc-Antoine
Scott Kellish said:
Jul 15, 10 at 4:48 pmHi,
Are the demo and files you posted for creating demos of mockups using balsamiq still available? The links above are broken.
Thanks in advance
Scott
EclecticGuy said:
Jul 30, 10 at 5:08 pmMarc-Antoine and Scott, I am not sure why they disappeared. I will try to dig them out this weekend and repost.
regards,
EG
Aaron Day said:
Nov 01, 10 at 11:30 pmHi,
I was very interested in trying this, are the demo and files you posted for creating demos of mockups using balsamiq still available?
The links are broken.
Many thanks
Aaron
Eivind said:
Dec 14, 10 at 8:27 amHi.
The links are still broken
/Eivind
EclecticGuy said:
Dec 30, 10 at 1:56 pmUnfortunately they got were lost when I moved my blog to a new host. I will see if I can dig out a backup.
cheers,
EG
EclecticGuy said:
Dec 30, 10 at 1:58 pmUnfortunately yes. I have not had time to look for them.
EclecticGuy said:
Dec 30, 10 at 2:29 pmOk! The links work now so you can download the tutorial files. On top of that, here is the link to the complete demo: http://eclecticguy.com/wp-content/shrugh/index.html
Finally, I have packed ALL of the files including the Balsamiq source into a zip file here: http://eclecticguy.com/wp-content/shrugh/BalsamiqDemosDemo.zip
Enjoy!
EG