Creating interactive wireframes with Inkscape and JavaScript

In this post I will show you how to create interactive wireframes the open source way using Inkscape and JavaScript. Wireframes are blueprints of how a website or other UIs of graphical applications will look. They allow for creating a simple prototype at a very early stage of development (actually before development kicks in).

Introduction

Sometimes people concentrate on the desired features of an application but neglect the presentation of those features to users. Creating a mockup of an application’s user interface encourages thinking about how people will eventually interact with your application. It also gives you a feeling for what the building blocks of the UI are and provides a common basis when discussing with customers and colleagues.

At this point of the project it’s not about going deep into detail but to stake out the broad outlines of the user interface. Most aspects of the visual appearance of your app/website like color palettes, icon design, typography or imagery do not matter at this stage of conceptualization. It’s about laying out the basic parts like navigation, orientation, functional or content elements and deciding on how those parts should work together as a whole.

We will be creating the wireframes using Inkscape, a free and open source SVG editor available for Windows, Linux and OSX. One great thing about Inkscape is its flexibility. You can draw practically anything you want since it is a full-blown vector graphics editor that can easily keep up with commercial tools like Adobe Illustrator. Moreover, it uses SVG as its image format, a W3C standard that can be displayed by any modern browser. You can even link multiple SVG documents using hyperlinks just the same way you do with websites. And the best is, you can manipulate the SVG DOM using JavaScript.

To show you the basic workflow of wireframing in Inkscape I will create a mockup for a very simple website that includes main navigation, a logo and some content elements. I will step through the creation process without providing too much detail. The landing page of the website draft will look like this:

 You can download the finished svg files or create them yourself following the steps below:

• index.svg
• contact.svg

Setting up Inkscape

The screenshot above shows the most important Inkscape toolbars. If the layout of your toolbars differs from the layout in the screen shot, select View -> default in the menu bar.

• Open the document preferences and set the canvas size to width, 960 and height, 860.
• Inkscape provides a snapping feature. Use the snapping toolbar to activate it. The objects will now “glue” to each other as if they were magnetic.
• It is also helpful to use a grid to align the objects. To show and hide the grid, simply press the [#] key on your keyboard. If snapping is activated the objects will snap to the grid as well. If you need to, you can edit the grid in the document preferences.

Creating the wireframe

We will create the wireframe using simple rectangles and text. You can find the rectangle tool and the text tool in the toolbar on the left side.

• Select the rectangle tool. Then left-click and drag the mouse to create a rectangle.

• When you’re done creating the rectangle, click on the mouse-cursor icon in the left toolbar to leave the “rectangle mode”. Now you can drag the rectangle around and resize it.
• You can change the fill color of the rectangle in the color window. The window is activated by choosing Object -> Fill and Stroke in the menu bar.
• Create a few more rectangles, resize and place them so that you get something that looks like the first screenshot. You can also copy/paste existing rectangles.
• The sticky grid will help you align the elements. Moreover, there is an alignment window that allows you to align elements relative to each other. Open it with Object -> Align and Distribute.

Adding text

Adding text is simple. Select the text tool from the left toolbar, click into the canvas and start typing. When you’re done writing the text, click the mouse-cursor icon on the left toolbar. You can now drag the text object around.

Note that you can group objects. For example, you can group a rectangle and a text. Select the mouse-cursor icon from the left toolbar. Click into the canvas and drag the mouse to select multiple objects. Now choose Object -> Group to group them into one object.

Creating a second page

Now let’s create a second page that displays our contact information. First, save your current document with File -> Save and call it index.svg. Then, choose File -> Save As to create a copy of the current document and call the document “contact.svg”. You now have a duplicate of the first page. Remove everything from the newly created contact page except the header with the navigation buttons and the footer. The contact page will hold an email address. Select the rectangle that represents the contact button and change the color to red:

Adding some interactivity

Finally, we will link both the index page and the contact page with each other. We want the contact page to be displayed when someone clicks the “contact” button. Clicking the logo should bring us back to the index page.

• Re-open the index.svg file.
• Select both the “contact” text and the rectangle behind it.
• Group them.
• Right-click the group and choose Object Properties:

• The object properties window will open. At the bottom you can see a collapsed interactivity area. Click to expand it.
• The interactivity area includes some text fields where you can write JavaScript code that will be executed whenever the particular event is fired.

• Enter the following line of JavaScript code into the onclick text field: window.location='contact.svg'; and save the file. This JavaScript code instructs the browser to open the file contact.svg when someone clicks the contact button
• Open the contact.svg with Inkscape and make the logo refer back to index.svg by adding window.location='index.svg'; to the object properties of the logo.

To test your newly created interactive wireframe, open index.svg in your browser. You should now be able to open contact.svg by clicking the contact button and you should return to the landing page by clicking the logo.

That’s basically it. Linking SVG documents with each other is only a very basic form of interactivity. You can do much more with SVG and JavaScript using DOM manipulations. The SVG DOM API in JavaScript only slightly differs from the HTML DOM API. So you can go on and do document.getElementById(); or element.style.fill = 'red'.

Of course, instead of using Inkscape to add JavaScript you can also open the SVG file with a text editor and add a <script> tag.

Have fun.