UI Design in Inkscape (1)

I’ve worked as a designer for over 10 years, but before that I was a UI developer. When I started designing UIs while still a UI dev, I quickly realized how important a high fidelity mockup is for getting approvals. The posts in this series are targeted toward UI devs and BAs who do a designer’s job, out of interest or out of desperation.

Using Inkscape for UI and web design makes sense. It has simpler tools and a flatter learning curve than GIMP, the other open source drawing alternative. Here are some pro tips to get you started designing in Inkscape.

1. Start with a wireframe

It helps to list the data you want to collect from the user, the sequence in which to present the fields, and the best component to use on-screen for each field. A simple list is fine, but putting this in a wireframe will get you started on the layout. Wireframes are easy to correct and create the scaffolding you use to picture what the finished product will look like.
A "New Project" dialog wireframe drawn with a pencil on paper.

2. Set up your document correctly

Inkscape has a “Document Properties” dialog, accessed through the FILE ► DOCUMENT PROPERTIES menu or CTRL+SHIFT+D. When designing UIs, set the units, document size, and scale as in the image below:
Inkscape's Document Properties dialog

For the custom size, use the monitor size you’re designing for instead of the form or page size. This controls the page size, preventing the appearance of unwanted or unexpected scrollbars in the browser later. It is possible to store these document properties as a template, and we’ll see how in another blog post.

3. Set up the toolkit

In your workspace, set up the palette, fonts, and sizes. These may be prescribed by your application’s style guide or you could be working on a new project. You’ll need the following:

• Palette
  • Primary colors
  • Primary orthogonal colors
  • Secondary colors
  • Black-grey-white
    (Instead of setting the palette up in the workspace, you can also use Inkscape’s built-in swatches, and the color palette by adding a .gpl file in ~/.config/inkscape/palette, as explained in this Inkscape custom palette post.)
• Fonts
  • Body font: large, medium, small
  • Header font: main, secondary
  • Action font
  • Component font
• Sizes: Some designers calculate these on the fly. Others set up a grid or guides.

If your style guide specifies component stencils, add them to the workspace for easy access.
Set up the palette, fonts and components for your design.

Here is an Inkscape SVG file to serve as a template for UI design. It contains stencils for a browser and various UI components, a sample palette, and font templates.

4. Design at pixel boundaries

While it is easy to use the mouse to draw shapes and adjust sizes by dead reckoning, your end product will be a UI made up of whole pixels. Even the PNG image exported from Inkscape looks clearer when things are aligned to pixel boundaries.

After you drag a shape or group of shapes to where you want to place them, go to the Tool Controls bar at the top and specify their location (coordinates of selection) and size (width and height). Another way is to use the built-in grid(#), but I find the snapping behavior annoying.

5. Get comfortable with shortcuts

Most commands in Inkscape have a shortcut key shown in the menu and also when you hover over the toolbar buttons. All the toolbox dialogs also have shortcuts, shown in the title bar. Here is a complete list, including other useful shortcuts that help you pan, zoom, and move shapes around. It’s worth your time getting familiar with these if you’re going to use Inkscape for longer than a couple of hours. A useful trick is to use the shortcut for a command even after you’ve located it in the menu or toolbar, instead of clicking on it right there.
Shortcuts listed in toolbox dialog titles

Here’s a short video of the wireframe in this post being converted to a high fidelity mockup in Inkscape.  Much of what I’ve discussed here is shown in the video.
@Inkscape UI Design—Dialog

(Originally published in my blog as UI Design in Inkscape (1))