Tonight I received an email from Eduardo Villagrán Morales, a Fedora ambassador from Chile. He wrote,

I read your post “Some http://www.fpo header mockups.” I want know what tools you use to create mockups.

As I told Eduardo, I use Inkscape running on Fedora as my primary mockup tool, with some help from Gimp for bitmap processing. I realized while writing my response to him that I actually gave a ~50-minute tutorial on how to use Inkscape specifically to create UI mockups, and I have video of it!.

Actually, I spent hours trying to make the video available immediately following FUDcon, but I experienced issue after issue:

• The camera, the Kodak zi8, encodes in .mov format. I wanted to post Ogg Theora video. I wrote a gstreamer pipeline in hopes of accomplishing this but several runs and many hours later, did not have usable video (it seemed to only play keyframes and nothing inbetween – very jerky.)
• The audio on the video was very low. I decided to give up on Ogg and ran the video through some gstreamer pipelines to boost the audio, keeping it in .mov format. This worked great.
• I attempted to upload the video to blip.tv – a video sharing site I like more than most because it supports Ogg formats and encourages Creative Commons licensing. No matter how many times I tried – both through FTP and the web upload client – the video would not appear on my page. It would complain that the video was corrupted – even the original files straight from the camera.
• Desperate, I tried Vimeo. No dice. The video was over their size limit (2 GB – my video is just a hair over 2 GB.)
• *Really* desperate (this was well before the webm announcement) I tried YouTube. No dice! Over the 10-minute limit.

So I simply gave up and forgot about the video until now. But jtanner from #rhel actually recently and kindly volunteered to provide some hosting space for the videos, so I’d like to make them available to you as well as Eduardo in case they are useful. I apologize for not being able to offer them in a streaming or web-playable format. In case you’d like to check if they are worth the hefty download, the slides are of course available, too. I am offering both this video and the slides that accompany it under a Creative Commons Attribution ShareAlike 3.0 license, and if you find either useful please share them – it’s the highest compliment you could give!

Here’s a run-down of the material:

• Part 1: Take a drive around the Inkscape UI – learn which parts of the Inkscape UI are the most useful for creating mockups. We go over vital keyboard shortcuts in this section as well.
• Part 2: The rectangle and text tools are your best friends. These tools allow you to create – you guessed it – rectangles and text which provide the basic framework for your mockups. Learn tips and tricks for using them to your best advantage in mockup creation.
• Part 3: Ctrl+D and movin’ it. One of the commands I use most often when creating a mockup is Ctrl+D, and you can take advantage of this trick to create perfectly-laid-out grids, tabs, navigation bars, and other UI elements in a mockup.
• Part 4: Get ‘em together and group! How to use Inkscape’s grouping functionality to organize your mockups logically.
• Part 5: Save and Share. Now that you’ve got a nice mockup, how are you going to save it and share it with other people? This section goes over an open-source workflow for doing so, showing how to use a single Inkscape SVG file to store multiple screen mockups, export them out into individual PNG bitmaps, and how to share those mockups using a MediaWiki-format wiki page.

I gave the tutorial with a mostly-developer audience in mind so there’s a healthy helping of, ‘you can do it!’ motivational kind-of talk in the video. You may not need it based on your experience , but I’ll justify it by saying that I get quite sad when developers and other folks who are way smarter than me tell me they don’t think they are good enough to create UI mockups. I believe quite strongly that anybody can be a designer. Creating mockups is an important part of working out a UI design, and there’s no mystique or mysterious smoke-filled rituals and ordaining required for you to be able to do it!

From beginning to end, in the video, I walk the class from a basic UI concept (‘the Fedora store’) to a wiki page with multiple screen mockups on it. It’s a simplistic example, but it pretty much outlines from beginning to end the workflow I follow using Inkscape and Mediawiki to produce mockup specs like this and this. It’s the same process I’m following in creating the Fedora website redesign mockups I’ve been blogging so much about lately.

So if you’d like to learn how to do this sort of thing, I hope you enjoy my attempt at teaching you how. Let me know what you think. And to my friends who still insist on Macromedia Adobe Fireworks or Illustrator or Photoshop being vital to creating mockups – please consider watching this and let me know how my tools fall short of yours in getting the job done! Maybe there’s ways we can improve them such that you can use them as well

Insert Hilarious Caption Here.

Video

• Part 1 (~2.0 GB)
• Part 2 (~ 143 MB)

Slides

• OpenOffice.org ODP format slideshow (40 slides)
• PDF format slideshow

NOTE: The adorable characters sprinkled throughout the slides were created by María “Tatica” Leandro, a quite talented and well-known designer on the Fedora Design team as well as a prolific Fedora Ambassador. She used Inkscape, of course.

Designing UI Mockups in Inkscape by the Fedora Project is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
Based on a work at tannerjc.net.