Creating UI Mockups in Inkscape Video Tutorial


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

I read your post “Some 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

Slides

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. 🙂
Creative Commons License
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.

27 Comments

  1. Here's my experience with zi8 and converting from .mov to theora:
    – "ffmpeg2theora movie.mov" works like a charm;
    – equally well you can use gstreamer and a GUI application: OggConvert;
    – is you want to do further editing, Kdenlive in F13 soved the problem with Theora export, is slow but usable.
    As for video hosting services:
    – YouTube increased recently the limit from 10 to 15 minutes, which is still not enough;
    – supposedly blip.tv has a hidden limit, it was failing because your file was over 1GB

  2. camillem says:

    Hi,
    I was just wondering: what are the main advantages of using Inkscape for UI mock ups compared to a tool like Pencil ( http://pencil.evolus.vn )?
    Thanks,
    Camille

    1. Hi Camille,
      I've tried to use Pencil several times before. I found it to be quite sluggish and it added a lot of drag to my workflow. Its selection of widgets was also quite limited and it was not easy to create 'custom widgets' with it. Do you use pencil?

      1. camillem says:

        Pencil is indeed slow sometimes, especially when it comes to rendering SVG filters (for shadows typically) .
        For custom widgets, have you tried version 1.2 ? There is a "right click> Add to my collections" function that I find convenient.
        So yes, I use pencil but as I am nowhere near a professional user, I was curious to know its suitability for "real" design workflows.

        1. Hi Camille, I haven't tried 1.2; the add to my collections sounds quite convenient so I'll give it a shot! For my workflows, the speed of the tools is really key (I'm just way too easily distracted if the tool takes too long 🙂 ) so I feel like Inkscape is a much better fit for my workflow. But pencil absolutely has some promise, and I'm happy to give the new version a shot. One thing I like about pencil is that if I posted my mockup sources for mockups created in it, it's a bit more obvious than Inkscape mockups are for folks to understand how to manipulate the design I think. It's pretty important to me for the work I do to be a conversation rather than a one-sided push!

          1. camillem says:

            Hi Máirín, thanks very much for your detailed answers 🙂

  3. That's awesome.
    I was thinking I should do some tuts myself. Inkscape is amazing, but the switch from Flash wasn't easy. I should spread some of what I've learned and make it easier for others to make a similar switch…
    Anyone got any requests? 😀

  4. Appreciate the resources. Will watch them, as I'm interested in doing some web mockups in the near future for a local business my wife and I are looking into launching.

  5. Nice Post, I use Inkscape for website mock-ups as well as for creating final graphics.
    In regards to @camillem, I also have tried to use Pencil in the past and it was just too limited, and slow, and it really affected my ability to make anything useful with it.
    I have recently discovered that the drawing feature in google docs works very well for flow charts and wireframes. I do prefer Inkscape, but I love that google docs is in the cloud, and I don't have to download and install any software to make minor edits, or use a service like dropbox when moving across machines.

  6. good vid, picked up a couple of tips i didn't know. I haven't been using CTRL+D, been doing copy then paste and then trying to align, will help a lot!

  7. Hey Mairin,
    Thanks for the awesome presentation !

  8. Pablo Estefó says:

    Thanks a lot for sharing all that useful material
    you rock! 😀

  9. For easy transcoding and (seemingly) limitless gratis hosting, I'd checkout The Internet Archive at http://www.archive.org. They'll host a lot of stuff (including feature-length movies, so no need to worry about space or length) and they'll transcode movies for you as well. You don't get control over the quality settings of their transcoding, so upload your own if you prefer. You can link directly to the files hosted on archive.org; I recommend using the URLs with "download" in them so your URL stays static even as they do their internal housekeeping moving files around their many mirrors.
    Best of luck.

  10. I've just made a video-slideshow out of those odp slides with DVD slideshow GUI and uploaded it here: http://download.videohelp.com/tin2tin/UI_Mockups_
    (5.7 MB)
    Unfortunately DVD slideshow GUI is Avisynth based and can only run on Linux with Wine. DSG is using Open Office for converting odp to image files.
    I can upload the video to my Youtube account if you want or you can use it together with your other videos.

  11. +1 for archive.org, painless upload & transcoding for free.

  12. Thanks a lot for sharing all that useful material

  13. Ben Asselstine says:

    I halfsized the first 45 minute video in Pitivi and uploaded in .ogv format to rapidshare.
    The second video had out of sync audio so I didn't bother converting it.
    http://rapidshare.com/files/411399219/inkscape.og

  14. thkyu..

  15. I was just wondering: what are the main advantages of using Inkscape for UI mock ups compared to a tool like Pencil

    1. Well, working with Pencil is quite a bit slower. I'm not sure why it is slow, but working with Pencil is a little frustrating because of this slowness – in the screen redrawing itself, in how quickly you can drag & drop GUI elements, etc. Pencil also does not include all the widgets you need to design web apps and GTK apps so you are basically required to create your own from scratch. Inkscape is just a lot more flexible and meets my needs a lot better. I'll continue to look at Pencil though because I hope it does get better over time.

  16. nice post, thx

  17. Matt Rogers says:

    Thanks for the great video! One thing that I've run into with Inkscape in Fedora 13 is the whole page thing. In the more complex examples in the video, do you just have the page border turned off? Or do you just silently ignore and/or workaround the size of the page?

    1. I'm very happy you found it of use, Matt! How I typically work with the page borders is to set the page size to be the exact size of the mockup's first page/screen. So I think I showed Anaconda mocks in the vid…. those I set to 800×600. For web apps I typically do 1020 x 1200 or so (1020 because I use 960.gs) I'll do the first page mockup within the page borders and expand the borders as needed to fit….why? Well, if you ignore the borders, then your file manager's thumbnail preview of the svg file will likely not be very useful. If you treat them as the borders for page 1 then the preview will be a nice thumb of the first mockup. Make sense? I hope this helps; let me know if it doesn't answer your question. Happy Inkscaping!! 🙂

  18. bierwirt says:

    I am sorry to say this but the download of over 2 GB isn't really worth it. The audio is way too low. The video (beside the shaking quality at the start) itself is basically an Inkscape tutorial. A good thing is that the slides are available, which will show much faster than a video how to get to mock-ups.
    The basic message is: everyone can draw texts and boxes, even with object duplication. Anyways thanks for sharing

  19. Pictures are worth a thousand words…

  20. Vaibhav Sidapara says:

    the video… i cannot download it.. 404 error!! :(.. smone pls update a working link..

  21. Chirag says:

    VIdeo links are deed

Leave a Reply to Pablo EstefóCancel reply

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