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.
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:
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 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.
- 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.
element.style.fill = 'red'.