21:04:20 <danielsmw> #startmeeting Designing UI Mockups in Inkscape - Mairin Duffy
21:04:20 <zodbot> Meeting started Sat Dec  5 21:04:20 2009 UTC.  The chair is danielsmw. Information about MeetBot at http://wiki.debian.org/MeetBot.
21:04:20 <zodbot> Useful Commands: #action #agreed #halp #info #idea #link #topic.
21:04:54 <danielsmw> Brad is going to video this presentation with Mo's camera
21:05:02 <danielsmw> Mairin: Getting started.
21:05:13 <tw2113> cool, i can watch the video later :D
21:05:14 <danielsmw> We'll be using Inkscape for mockup design
21:05:26 <danielsmw> This isn't about creating UI's, it's about using mockups.
21:05:30 <danielsmw> My other session is about designing UIs.
21:05:43 <danielsmw> Mairin: I'm an interaction designer with Red Hat.
21:05:48 <danielsmw> I've been a designer for about 5 years now
21:06:04 <danielsmw> Every year for which I've used Inkscape, and I've grown with it as it's matured.
21:06:16 <danielsmw> The way I use it might not be the best way, but it's the way I've developed using it over time.
21:06:22 <danielsmw> Let me point out: you can do it.
21:06:31 <danielsmw> There's no magical, incense filled room necessary for mockups
21:06:49 <danielsmw> All the tools you need for design are in Fedora, so you don't need to pay $1000 homage to Adobe...
21:06:54 <danielsmw> And we *really* need you to do it.
21:07:15 <danielsmw> The way you approach Fedora from a design standpoint is by drawing mockups.
21:07:25 <danielsmw> Fundamental problems with software can come out with simple paper sketches.
21:07:40 <danielsmw> It's easier to find problems then than after it's actually implemented.
21:07:51 <danielsmw> So it's good to have a design focus, designing up front.
21:08:08 <danielsmw> This is mockup focused, but has some basic Inkscape usage too.
21:08:11 <danielsmw> Topics today:
21:08:16 <danielsmw> 1) Drive through the Inkscape UI
21:08:39 <danielsmw> 2) Rectangle and text tools
21:08:42 <danielsmw> 3) Control D.
21:08:47 <danielsmw> 4) Grouping items
21:08:52 <danielsmw> 5) Save & share
21:09:11 <danielsmw> This room is very loud...
21:09:29 <danielsmw> #Topic Take a drive through Inkscape UI
21:09:59 <danielsmw> Tools in inkscape we use all the time: selector, etc.
21:10:18 <danielsmw> Node edit tool: tweaking lines
21:10:40 <danielsmw> So for example, I could use that tool to drag "tabs" out of a rectangle and then replicate that. We'll demo this live in a minute
21:10:51 <danielsmw> Rectangle tool and text tool are used the most when doing mock-ups.
21:11:17 <danielsmw> The ellipse tools is used for making radio buttons, for example, because there aren't _that_ many circles in UIs.
21:11:32 <danielsmw> [Mairin dons a microphone]
21:12:11 <danielsmw> Mairin: the gradient tool is used for making gradient, say as placeholders for future graphics
21:12:11 * pwf notes herlo is pulling hard duty trying to get as much stuff recorded or streamed as possible
21:12:12 <tw2113> is there a live stream of video somewhere?
21:12:16 <danielsmw> The dropper tool is good for making sure you have the same color across your design instead of accidentally using, for example, different shades of grey
21:12:24 <danielsmw> tw2113: No, it's being taken on a personal digital camera
21:12:29 <tw2113> ah
21:12:34 <tw2113> just thought i'd ask
21:12:41 <danielsmw> There's also the rotate tool for rotating things, along with horiz/vert flip.
21:12:58 <danielsmw> The aspect ratio lock tool is also available, and very important.
21:13:04 <danielsmw> Inkscape special keys:
21:13:21 <danielsmw> Note that they're actually grouped into keyboard regions
21:13:49 <danielsmw> The standard shortcuts, i.e. Ctrl + Z, C, X, ... = Undo, Copy, Cut ...
21:13:53 <danielsmw> Inkspace specials:
21:13:59 <danielsmw> Ctrl+D = duplicate
21:14:08 <danielsmw> it duplicates objects, we'll look at this alter.
21:14:16 <danielsmw> Ctrl+G Groups objects
21:14:29 <danielsmw> 1 = 100% zoom
21:14:41 <danielsmw> this is important for keeping the normal size in perspective
21:14:50 <danielsmw> 5 = centering canvas, fill screen
21:15:09 <danielsmw> + and - keys zoom in and out (no key modifiers)
21:15:30 <danielsmw> PgUp, PgDn move through layer stack, which is beyond the scope of this presentation
21:15:54 <danielsmw> But as an example, my radio buttons have different objects stacked on top of each other (the button, the fill, etc)
21:16:01 <danielsmw> Home and End go to the top and bottom of stack
21:16:05 <danielsmw> Respectively
21:16:24 <danielsmw> Example: text gets stuck under a button; you just use these keys to move the button straight to the button
21:17:35 <danielsmw> When you press the button with tlock on it, you bring drawing and text back into aspect ration.
21:17:53 <danielsmw> Note: it's an open lock when you're not in aspect ration
21:17:55 <danielsmw> ratio*
21:18:04 <danielsmw> It's best just to leave it on by default
21:18:16 <danielsmw> PSM: Ctrl and Shift are magic!
21:18:34 <danielsmw> Example: if you're scaling objects on the canvas, you might have say a square, and you drag it by the corner
21:18:43 <danielsmw> But if you want to grow if from the center, hold down shift
21:18:48 <danielsmw> Like if you wanted to fill a radio button
21:19:05 <danielsmw> Or what if you wanted to rotate something about an axis instead of about the center?
21:19:11 <danielsmw> Hold down one of these keys
21:19:20 <danielsmw> Or shift, for example, will making moving things with arrows jump faster
21:19:29 <danielsmw> Then you can do finer adjustment without shift
21:19:48 <danielsmw> Or if you want to ungroup something, use Ctrl+(Shift)+G
21:20:11 <danielsmw> Another PSM: Don't get lost!
21:20:19 <danielsmw> If you're lost on your canvas, just hit 5.
21:20:24 <danielsmw> This centers the canvas.
21:21:01 <danielsmw> #Topic The rectangle and text tools are your best friends.
21:21:13 <danielsmw> Example on-screen: a functional mockup
21:21:23 <danielsmw> You don't need to be an artist to do this
21:21:39 <danielsmw> But it gives you a basic view of your website and will let you get ideas and feedback on layout and features
21:21:52 <danielsmw> It can be better to do this than to implement the site and then get feedback
21:22:24 <danielsmw> People are also more willing to give honest feedback with quick mockups than with developed sites with hours of work in there (because they don't want to hurt your feelings)
21:22:30 <danielsmw> Fill vs. Stroke
21:22:41 <danielsmw> To fill in an object, you select the object and click the color to color fill.
21:22:56 <danielsmw> You can select the color from the fill panel or type in an RGB value manually.
21:23:08 <danielsmw> If you want to select a color for the outline/stroke, hold down shift and click the color
21:23:29 <danielsmw> Select blur and your shape will have a blurry-whatever feel
21:23:47 <danielsmw> But normally I don't do this with mockups, because (a) they're just wireframe mockups and (b) it's cpu-consuming.
21:24:15 <danielsmw> You can also edit opacity to, for example, put tranparent notes on top of UI objects for developers to see both
21:24:38 <danielsmw> Stroke width: go to the stroke style tab and you can edit the width or line style or corner style.
21:24:58 <danielsmw> Steven: how did you get the stroke width on here?
21:25:09 <danielsmw> Mairin: the object menu, and then select fill and stroke
21:25:43 <danielsmw> Once you have toolbars/panels open, inkscape will remember even between executions
21:25:59 <danielsmw> When you open fill and stroke, you can just minimize/maximize these things from the side.
21:26:32 <danielsmw> Rectangles have controls on the corners that you can drag to round the corners of the rectangle
21:26:36 <danielsmw> This can be nice for rounded tabs, etc.
21:26:44 <danielsmw> Scaling rectangles in inkscape:
21:26:55 <danielsmw> You select and item and then mouse over an arrow on a side.
21:27:06 <danielsmw> You can then click and drag these arrows to scale the objects.
21:27:12 <danielsmw> Hold down shift while clicking to scale radially.
21:27:29 <danielsmw> If you click these arrows a second time, they become rounded; now you have rotation control.
21:27:38 <danielsmw> This is how text scaling works as well.
21:27:57 <danielsmw> #Topic Ctrl+D and movin' it.
21:28:08 <danielsmw> Ctrl+D is a secret to making mockups very quickly.
21:28:12 <danielsmw> Suppose a rectangle.
21:28:28 <danielsmw> I can select the whole thing by clicking down and dragging the lasso around all the objects
21:28:43 <danielsmw> If I hit Ctrl+D, it duplicates right on top of the same object
21:28:56 <danielsmw> this way I can get perfect alignment by just using the arrow keys.
21:29:26 <danielsmw> You could also duplicate several in a line and then duplicate the entire line to duplicate a single object into the grid
21:29:34 <danielsmw> this is how you keep things looking consistent in your mockup.
21:30:03 <danielsmw> You can do this to have equally spaced text on top of each other, for example. Ctrl+D will inherit all style properties in the text.
21:30:41 <danielsmw> Unnamed: You can also duplicate something multiple times and use the align feature
21:31:41 <danielsmw> Mairin: you can also have fancy designs that you save as svg and then go into the svg file itself to localize text, but the design is retained.
21:32:00 <danielsmw> You can also use Ctrl+D to duplicate entire screens
21:32:25 <danielsmw> So you can start with a screen framework, duplicate it, and then go down and edit another version slightly
21:32:51 <danielsmw> So you could, for example, have multiple tabs shown of a website where the rest of the mockup is consistent across tabs
21:33:11 <danielsmw> You can also duplicate screens to show other ideas on the side
21:33:23 <danielsmw> Or design sequentially motivated applications, like Anaconda
21:34:07 <danielsmw> Paul: the cool thing about duplicating the dialog is that you could save them as an svg and then show them all as the same size.
21:34:15 <danielsmw> Mairin: Yes.
21:34:21 <danielsmw> Moving items:
21:34:35 <danielsmw> I duplicate an object and move it with the arrows.
21:35:05 <danielsmw> Using just the arrow keys moves something at "middle speed", alt+arrows moves it very slowly (1 px at a time), and shift+arrows moves it really fast
21:35:10 <quaid> s/svg/png/ ?
21:35:19 <danielsmw> quaid: I don't think so...
21:35:25 <danielsmw> Besides, aren't svg's source xml?
21:35:30 <danielsmw> I didn't think you could go in and edit pngs
21:35:31 <quaid> ^^^^ re duplicating dialog to get same size, I thought Paul said PNG, but I could be wrong
21:35:33 <stickster> quaid: danielsmw: right, npng
21:35:34 <stickster> *png'
21:35:42 <quaid> yeah, export to png
21:35:45 <danielsmw> oh, okay.
21:35:48 <danielsmw> i'll correct that, thanks.
21:35:58 <danielsmw> Mairin: grouping:
21:35:59 <quaid> we're logging, consider it corrected :)
21:36:02 <danielsmw> make many objects into one.
21:36:25 <danielsmw> Select many objects as usual, and hit ctrl+g. They become one object.
21:36:38 <danielsmw> Make sure to do this before duplicating so you're not dealing with hundreds of little objects everywhere.
21:36:46 <danielsmw> Hit Ctrl+Shift+G to ungroup.
21:37:27 <danielsmw> You can also use group to "secure" objects so you don't accidentally move them.
21:37:36 <danielsmw> #Topic Giving it a try!
21:37:48 <danielsmw> If anyone has a laptop, you might want to open it and follow along
21:38:01 <quaid> this is cool, with the audio lag, the notes from danielsmw are showing up nearly simultaneously
21:38:07 <danielsmw> First I hit 1 to give me a 1 to 1 ratio.
21:38:09 <danielsmw> quaid: Nice
21:38:17 <danielsmw> So now I'll draw out a rectangle
21:38:27 <danielsmw> When you first draw it out, you might have to massage it a bit.
21:38:34 <danielsmw> I can select the border on its own and give it a color.
21:38:42 <danielsmw> I hit Ctrl+F to get the fill and stroke dialog.
21:38:52 <danielsmw> Now I have a black rectangle, a nice starting place
21:38:56 <danielsmw> I can put a stor logo up top
21:39:01 <danielsmw> *store
21:39:10 <danielsmw> You can just select the text tool, click, and start typing
21:39:15 <danielsmw> It's a little big though, my logo,
21:39:22 <danielsmw> So I'll scale it using the corner arrows
21:39:22 <anthro-diana> For those that are interested this is exactly how people do these things in non open source environments with very expensive software (I say this as a user experience designer in a non oss environment)
21:39:34 <danielsmw> Our sample will be a toothpaste store!
21:39:54 <danielsmw> I hit Ctrl+D and press shift+right over and over to have another title: toothbrushes.
21:40:09 <danielsmw> I keep doing this to get horizontally aligned titles that are equally spaces.
21:40:17 <danielsmw> I draw boxes around these titles to represent tabs
21:40:34 <danielsmw> To remove fill on the rectangles, select the red-Xed-box
21:40:39 <danielsmw> On the color bar.
21:40:56 <danielsmw> Now I'll create another rectangle by scaling a duplication of a tab box.
21:41:13 <danielsmw> If you hold down shift and select things, you select them all together; an additive select
21:41:47 <danielsmw> I go to path -> union to make it into one shape
21:41:47 <danielsmw> So I select my content area box and my first tab, union them, and it looks like a selected tab
21:42:02 <danielsmw> I can then select the tab from that box and drag a new version of it over to create the next tab
21:42:17 <danielsmw> Note that I have to use PgDn to move it down in the stack so the text is visible.
21:42:55 <danielsmw> I can make a menu on the side by using text and a ctrl+D + down arrow technique
21:43:02 <danielsmw> to vertically align several text objects.
21:43:19 <danielsmw> Let
21:43:20 <danielsmw> 's
21:43:23 <danielsmw> see some samples.
21:43:30 <danielsmw> These are anaconda mockups for F-13, I think.
21:43:52 <danielsmw> I'm holding down ctrl+arrows to pan around your canvas; you can also use the scroll bars.
21:44:36 <danielsmw> In my anaconda example, I have the "basic" install path along the top and the "advanced" path along the bottom.
21:44:36 <danielsmw> I can also drop in little notes for developers to see what's happening in the UI.
21:45:01 <danielsmw> When I was designing the Advanced path, there were multiple states the program could assume
21:45:08 <danielsmw> So I vertically stack them when that's the case.
21:46:15 <danielsmw> Question: is there a way to do inkscape or svg in general where you could export it to Glade to get the UI into code?
21:46:32 <danielsmw> Mairin: not now, but SVG has the capcity to do that, because SVG maintains the object types
21:47:09 <danielsmw> so you could theoretically create a translation layer to do this; great idea.
21:47:09 <danielsmw> Questions or topic 5?
21:47:22 <danielsmw> Paul: When you did the anaconda mockups, how'd you get it so realistic, colorwise?
21:47:40 <tw2113> nothing i can think of offhand for a quetion
21:47:43 <tw2113> question*
21:48:03 <danielsmw> Mairin: I have a dirty little secret about this; I took a screenshot of anaconda, drew a rectangle over the content, and eye dropper-ed it to get a blank dialog.
21:48:36 <danielsmw> If there's a particular section of the UI they want me to work on, I can use this same technique to just edit out one part
21:48:43 <danielsmw> #Topic Save & Share
21:48:58 <danielsmw> We have one source file. I actually export each screen in my canvas as a different SVG.
21:49:07 <danielsmw> SVGZs are compressed, as a note.
21:49:37 <danielsmw> I click the outline of screens to export, go to File->Export, go to the selection tab, and name them appropriately; numerical titling is a good tip.
21:49:40 <danielsmw> Then click export.
21:49:48 <danielsmw> Then just click a new frame and reexport.
21:50:00 <danielsmw> Now you have multiple mockups along with your total svg source.
21:50:18 <danielsmw> s/different SVG/differnt PNG/
21:50:30 <danielsmw> Create a wiki mockup sheet: make sure you post your source.
21:50:48 <danielsmw> Questions?
21:51:01 <danielsmw> Question: do you do banners, like for printing?
21:51:11 <danielsmw> Mairin: yeah, all the ones in the hallway, for example, are from inkscape
21:51:25 <danielsmw> Question: Can it do UML?
21:52:22 <danielsmw> Mairin: There's no library of SVG-UML objects. You could take Inkscape, open a nautilus folder, and drag things in as a "UML object library"
21:53:10 <herlo> http://screencasters.heathenx.org/
21:53:26 <danielsmw> Thanks for coming, and I hope to see your mockups soon!
21:53:29 <danielsmw> #endmeeting