UI Design in Inkscape (2)

Using Inkscape on a dual monitor setup

This is the second in a series of posts about how to use Inkscape to design UIs. If you are a UI dev or a BA doing UI design, you might find this series useful.

1. Save frequently; emergency-save and auto-save

Inkscape is quite stable, but sometimes extensions misbehave. Get used to pressing CTRL+s often. In case of catastrophic failure, Inkscape will attempt to emergency-save a date-time-stamped copy of your file at the original file’s location. If you haven’t saved your work yet, you might still find an emergency-saved copy in your home directory or temp directory. Inkscape might even inform you of where it saved the file before dying. You can also enable auto-save in the menu: EditPreferencesInput/OutputAutosave.

The Autosave section in the Preferences dialog
The Autosave section in the Preferences dialog

2. Fully utilize twin monitors

If you have a dual monitor setup, you can free up space in your drawing area by moving the toolboxes you need to the other monitor. Just drag the title bar of the toolbox so it becomes a dialog box. Place your editing window on the main monitor and arrange all the toolboxes you use frequently on the other one.

Using a dual monitor setup with Inkscape
Using a dual monitor setup with Inkscape

3. Duplicate and align

Use the duplicate command (CTRL+d) and the alignment dialog (CTRL+SHIFT+a) to copy and move components after you’ve drawn them the first time. This is particularly useful when tiling text-boxes and labels—just group→duplicate→align→edit text.

Duplicate - Align - Edit strategy of mocking up forms
Duplicate - Align - Edit strategy of mocking up forms

4. Use groups

CTRL+g and CTRL+SHIFT+g are your friends. Select multiple shapes and press CTRL+g to group them and move them around as a single entity. Now you can align them to the page or other shapes. Copy-paste them. Flip them (h and v). Rotate them. Resize them. All the operations you now perform on this group happen to the group as a whole. So whereas a single shape might just get flipped, a shape in a group will have flipped and transposed.

For example, you want to center a button’s icon and text such that you have the same space on the left of the icon as on the right of the text. If you select the icon and text and center them against the button using the “Align and Distribute” toolbox, you will find them overlapping in the center of the button. Instead, position the icon and text correctly, group them using CTRL+g, and center this group in the button.

Aligning icon and text in a button without and with grouping
Aligning icon and text in a button without and with grouping

5. Use layers

In designing UIs you’ll place shapes on top of each other. You might have:
a button
on a panel
on a dialog
on a shadow
on a modal mask
on a chart
on a chart grid
on a panel
on a layout section
on a page background
on a page
on a browser tab
on a browser window.
That’s 13 levels. If you drag-select something at any one level (say, the dialog and everything in it) you’ll wind up moving the shapes underneath. But not if you use layers. Layers allow you to logically collate shapes and groups together into a single entity. They are like named groups, but have some extra abilities. You can hide and show them, and you can lock them. Once locked, they are immutable, which means if you drag-select a layer, the locked layers underneath are no longer affected.

Inkscape allows you to have layers within layers. You can also tweak the opacity of an entire layer or control how an upper layer mixes with the layer below on rendering a flattened image. This is called the blend mode.

The various layers contained in a website design mockup. Shows a hierarchy of named layers.
Layers for a typical website design

Stay tuned for more posts on how to design UIs in Inkscape.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.