How designers can create interactive prototypes with Illustrator
At the start of a product idea the designer uses wireframes, mockups and prototypes to get feedback as fast as possible. Balancing the amount of time spent creating these temporary assets and reducing misinterpretation is key.
Tools like Illustrator give the designer the flexibility to experiment and draw without being forced to think about technical constraints early in the process. It’s great for quickly outputting static mockups, though Illustrator does not have great tools built-in to express interactions or different states in the product.
This article explains how you can quickly go from Illustrator to an interactive clickable prototype in the browser without the need for a developer, without writing HTML, in about 10 minutes.
The goal
As an example we’re going to prototype a small fruit application. The end result of this process is embedded below. Try hovering and clicking the first row.
The example contains some common interaction elements like hover states, tooltips, and dialogs. This is all easily layed out in one artboard. There’s no need to export and maintain different PNGs for each state of the product. You don’t have to upload your assets to a 3rd party tool. The technique that is about to be explained just exports one SVG with all the states in it. Sounds good? Let’s get our hands dirty.
Preparing your Illustrator document
There are two things to keep in mind when you’re going make a prototype out of your Illustrator document;
- Create a logical hierarchy and name the important elements (layers, groups and shapes) in your "Layers" palette. Keep in mind that we’re going to export the whole document in one SVG file.
- All elements should live in the same artboard. Hidden elements can later be made visible after a mouse event in the browser. e.g., a dialog can be hidden, but it should be the topmost element.
The name of an element will be used as its ID. This ID is later used to attach mouse event listeners to its element. This is what makes SVG so interesting for prototyping compared to bitmaps; every shape or group is its own element in the browser.
A group’s click area will be exactly the area its child shapes cover. To avoid potential gaps in its hit target you can add a big invisible rectangle (zero opacity) to the group. That rectangle should cover what you want the group’s hit target to be.
When you’re done mocking up you can export the document as an SVG file using"Save as…" and select "SVG" from the file format list. In the export dialog you can optionally embed the images and fonts used inside the document. If you’re not going to manipulate the text or numbers using JavaScript you can select "Create outlines". This makes sure the fonts look the same on all computers.
The visual part is ready to go. The next step is creating a small separate document to which we’ll add the interactivity.
Setting up the playground
As promised there will be no converting to HTML, but we do need a place to connect the SVG to the interactive instructions. The easiest way to add interactivity through JavaScript and CSS to your document is by having a separate HTML load the SVG into it. By not directly editing the SVG file you can just keep exporting the Illustrator document without overwriting your additions. This will make it possible to iterate fast while still be able to quickly test the different states.
Create an HTML file called “fruit.html” in the same directory as the SVG file with the following contents:
<!doctype html>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$.get('fruit.svg', function(data) {
$(document.body).append(data.documentElement);
init();
});
function init() {
/* Add JavaScript here */
}
</script>
<style>
/* Add CSS here */
</style>
You don’t have to understand what’s going on in here. You do have to make sure ‘fruit.svg’ is the actual name of the file you exported from Illustrator. The comments point to where you’re going to paste the instructions from the next chapter.
You now created all three necessary files:
- An Illustrator file in which you can edit the visual part of the prototype.
- An exported SVG file that will be loaded by the browser (do not edit).
- An HTML file that contains the JavaScript.
The HTML is set up to load jQuery. jQuery will later help us add mouse event listeners and animations. The call to $.get() will load the specified SVG document you exported in the previus chapter. Inside the “style” element you can optionally apply CSS to the SVG elements. You could also use it to add a background or other branding to the page.
We’re almost at the fun part. Because the HTML embeds the SVG; both files need to be loaded from the same webserver. This is because of browser security restrictions. If you’re already editing on a webserver you don’t have to do anything. If you are working on your local computer you can use your favorite webserver or open your terminal and go to (type “cd” and drag the folder onto the terminal) the directory the files are in and run:
python -m SimpleHTTPServer
You can now open your browser and go to http://localhost:8000 . You should see a link to the fruit.html file. Let’s get ready for the final step and add some interactions to the prototype.
Creating interactivity
A typical interaction you’ll want to create is showing a dialog when you click a certain button. We already drew and positioned a dialog in Illustrator and put it in a group called “dialog” and then hid the group.
You can easily show and hide layers, groups and shapes using jQuery’s $() selector. To create some great interactive prototypes you can get a long way with just usingclick, show, hide, mouseenter and mouseleave.
In the following code example we make the “dialog” group visible when the “row1” group is clicked.
$('#row1').click(function() {
$('#dialog').show();
});
When the “closebutton” group in the dialog is clicked we hide the dialog again.
$('#closebutton').click(function() {
$('#dialog').hide();
});
Another typical mouse interaction is showing a tooltip when a certain element is hovered over. The tooltip is completely mocked up in the Illustrator file so all we have to is make it visible when the “mouse enters” the “row1” group area. We hide it again when the mouse leaves that area.
$('#row1').mouseenter(function() {
$('#tooltip').show();
});
$('#row1').mouseleave(function() {
$('#tooltip').hide();
});
By copy and pasting these two examples you’ll be able to express a lot of different states in a normal application.
Download
I hope you enjoyed learning about this easy way of prototyping. If you love Illustrator like I do, I think you’ll find this process keeps a good balance between iteration speed and expressiveness.