The ZURBlog is where we discuss interaction design and strategy.

Your mom has always told you "It's the thought that counts," but unfortunately you can't buy thoughtfulness at Target. You can however buy a collection of inexpensive items, a 99-cent card, some decent gift wrap and become renown for your thoughtfulness.

We like to think that our processes here at ZURB can be applied to almost anything in life. Our project management philosophy is an especially good fit for gift giving. It consists of three simple steps:

1. Tell me
2. Show me
3. Tell me what you showed me

Tell me

This is where the 99-cent card comes in. We all understand that with gifts need to come cards, and within cards needs to be scribbled some generic message. Maybe "Wishing you the best," or perhaps you skip the message all together and go straight to "Love Peter, Paul and Ringo the Dog." The card is where the most opportunity is to properly setup your gift and deliver maximum thoughtfulness.

In your card describe why you choose the gift and allude to some hurdles (fictional or real) you had to overcome to acquire it. It's OK to give hints as to what the gift is, but try to refrain from stating it explicitly.

Dear Leia,

I know how much you love plants and I went to dozens of boutique garden stores before finding the absolutely perfect one for you. It reminds me of that lovely time we had at the french bistro last summer.

I sincerely hope you enjoy it, Han Solo

Show me

Picking the perfect gift is straight forward if you stay focused on the message you will write in the card. If you're out shopping at Walmart and have doubts about your mother enjoying the bucket of laundry soap you're holding, think through what the card would say.

Mom, I was frantically looking for a gift two hours before your birthday party and remembered how much you like doing the laundry for me and the rest of the family. I hope it does not give us all a rash like the last bucket of discount detergent we tried. Doug

Venturing out to your local mall without a plan is like being dropped into the middle of the jungle with a Nerf gun and a pair of safety scissors. MacGyver would make it out alive, but you won't. Use your card as your guide to keep you on task and on message.

Tell me what you showed me

After your gift has been opened make sure to follow up with the recipient. You are going to reiterate all the points you laid out in card to ensure the full extent of your thoughtfulness has been expressed. A typical conversation may go something like this:

Hey Meredith, did you like the Firefly box set that I bought you? I know how much you love Dollhouse and wanted to see some of Joss Whedon's other shows. It was a bit of a pain to find it during the holiday season but I knew you would really enjoy it.

Applied to Project Management

So how does this work for project management? Substitute the card for an email, the gift for the deliverable, and the follow up for a ... well that part is the same.

You may need to rinse and repeat a few times for larger projects but the core principle stays the same. For everything you deliver you need to be able to tell me, show me, and tell me what you showed me. Happy holidays.

Apple is notorious for creating great products with whimsically awesome interface design—ones that have certainly turned this old PC fanatic into an Apple fanboy. More than the finesse of the physical products or the sparkling chrome, it's refined and iterated design decisions that create great experiences for consumers.

As I was taking another mouthwatering look at the new unibody laptops, I was reminded of just how important those design decisions can be for how things work. The new unibody MacBook Pros come with fresh hotness all around, and the one design decision we all have been applauding at the ZURB office is the new laptop lids.

Push to Open is So Last Year

One of the biggest gripes we all have about the previous generation of MacBook Pros—the ones we use here—has been the lid latch. Here's a look at the culprit:

We all know it, but let's get this off all our chests—almost all laptop lid latches suck. There are those obnoxious sliders, tiny buttons, and clasping plastic contraptions that almost always break. Design decisions like these just make for bad experiences. You have to position your finger nail just right or you risk broken nails, pinched fingers, and frustrations abound. And when people are frustrated with their computers, bad things happen.

Aesthetics Don't Always Mean Great Interactions

The old MacBook Pro (MBP) lid latch was designed to compliment the general aesthetic of a great looking product. The short and wide design amplifies the perceived slimness of the machine, which is really cool, but not that functional. After continued use, the latch looses its "oomph," meaning you have to push harder, often with only a finger nail because your finger tip is too big.

When to comes down to it, the lid latch is just a bad experience for most users—even worse on some laptops, too! So where is the great interaction design? It's on the new unibody MBPs where Apple has rolled out an entirely new laptop latch.

Laptops Are Meant to be Opened

Apple has taken all the other great design decisions about the last generation of MBPs and made them that much better with this new unibody design. By far the one that stands out the most is the new lid latch.

And you know why it's so great? I'll tell you:

1. First, there's no tiny button that requires a finger nail to open.
2. Second, it maintains the magnetic clamp style from the last generation—and with just the right amount of magnetism.
3. Third, the design affordance (the interaction we expect from just looking at the latch) is much greater—just lift.
4. Fourth, it's just one motion. No push, then lift to open. Just open it.
5. And finally, it's still effortless to open. You can lift the lid with one finger and not worry about the rest of the laptop lifting with it.

Design is How It Works

While maintaining the ease of use of the previous generation of laptops, Apple has managed to increase the design affordance and the durability of a single element to make a better experience for their consumers.

Remember: design isn't just how stuff looks. Design is how it works. Consumers rely on great design decisions to make products worth buying and using. Acknowledging that in your work (hardware, software, online, etc) will almost always take it from good to great for everyone involved.

We use OmniGraffle to bust out fast, high quality wireframes here at ZURB. To help us crank those bad boys out, we rely on a few core features of OmniGraffle that allow us to stay focused on what really matters—the wireframing.

As is the case with all our deliverables, we do our best to maintain presentation and context with every deliverable (sketches, wireframes, mockups, etc) as they'll typically be emailed around without the original message. To keep as much context as possible, we put our logo, project name, document name, and task in the headers of our files like so:

Here's the Problem...

We're all human here. After a good jam session creating those wireframes, we sometimes forget to update that header information. We solved a big problem here by using shared layers in our documents, but needed to take it one extra step to help us out here.

In OmniGraffle, we typically have several canvases per document, meaning we have a lot of repeated information. To keep us sane and that information the same across canvases, we've used these sweet variables across shared layers. Here's how we wireframe faster by using OmniGraffle variables.

Inserting Variables

Inserting variables is easy. First, add some text to your wireframe. Next, while editing your text, open the Edit menu and select Insert Variable. You'll see a list of variables that come built into OmniGraffle including canvas name, layer name, dates, and more. Choose Canvas Name and you'll see your text field updated with the new variable.

Now, to make this work, you'll have to name your canvas as we have with our own wireframes. Be sure to keep the canvas names accurate while working to ensure your headers are always presentable and correctly identifiable. By having those descriptive canvas names, you also force yourself to consider the presentation more and keep your documents laid out well.

Ta-da!

And that's it! Coupled with shared layers, you can quickly and easily create a worry-free working template for all your wireframes. It'll save you time, keep you focused on the wireframing at hand, and does away with the worry of outdated document names.

Shared layers are orange.

As heavy users of OmniGraffle, the Mac-only wireframing and diagramming app, we spend enough time working on wireframes with multiple canvases for easy file management.

To keep our wireframin' awesomeness under control, and to be as efficient (or lazy) as possible, we use a feature called shared layers. Shared layers make wireframing faster, more efficient, and just plain easier.

What are Shared Layers?

Like normal layers in OmniGraffle, a shared layer sits in your Canvases panel and allows any objects to be placed on it. They are added just like regular layers (right click) and can be distinguished by their orange tint.

The key difference between normal and shared layers is that shared layers can be applied to multiple canvases via drag-and-drop, syncing the shared layer's contents across each canvas. Awesome, right?

How to Use Shared Layers

We love this feature so much we'd like to show you how to use it. Here's a quick guide to using shared layers in your OmniGraffle work.

1. Create Your Canvases

Get started by opening an existing OmniGraffle document with multiple canvases, or by creating a brand new document with a few canvases. Here's a look at what our Canvases panel looks like:

2. Right Click, Select "New Shared Layer"

Once you've got your canvases in order, right click on a canvas and select "New Shared Layer." You'll see a new orange layer appear in your Canvases panel. Give it a name and hit Enter.

Once you've got your shared layer made, add some objects to it; text, images, boxes—anything works. Remember, the point of a shared layer is to sync content across multiple canvases, so be practical about it. We like to use shared layers for header and footer information, stuff that we only need to update once in a document. (This helps us avoid updating a client's name in one canvas and missing it in another.)

3. Drag-and-Drop the Shared Layer to Other Canvases

Finally, when you're ready to apply your shared layer to a second canvas, just select the shared layer in the Canvases panel, then drag and drop it. As you drag and hover over the second canvas, you'll see it highlight (as seen below)—drop it when ready.

Left: Drag and hover over the second canvas.
Right: Drop the shared layer to apply it to the second canvas.

Super Awesome? Check.

And that's it! Three simple steps to creating super awesome wireframes using shared layers in OmniGraffle.

One layer to rule them all. Editing a shared layer syncs its contents across all instances. Edit one, update them all. Super. Awesome.

Shared layers in OmniGraffle are a great way to ensure those finer details aren't overlooked. It's easy to update something in one canvas and forget to do it in another. Shared layers solves that problem easily and intuitively. Just edit an instance of a shared layer and your changes will be applied to all other instances of it on any other canvases.

Have any questions or additional tips for us? Chime in below—we'd love to hear 'em!

We have an ongoing discussion here at ZURB: if you were going to be trapped on a desert island, what ten ingredients would you want to have? Put another way, what could you eat for the rest of your life? In an effort to be as minimal as possible I went with cows, wheat and raspberries: that covers milk, cheese, bread, steak and...well berries. Everything else would just be a bonus.

In that same vein: what if you could only have five tools to design with? If your entire design career from now forward could only include five tools, what would they be?

Paper

Of course. Paper is an incredibly versatile design tool. You can sketch on it to create fast, clear wireframes. You can prototype interactions with it, or show how to use a complex tool. Failing all of that, you can make awesome paper figures...you are stuck on a desert island, after all.

Sharpies

Sharpies and paper go together like...well, like Sharpies and paper. They're made for each other. At ZURB we love designing with a stack of ZURB sketch paper and a fistful of Sharpies. Sharpies let you get your thoughts down in quick, broad strokes that keep you from getting hung up on the details.

If I can cheat a little I'd bring sharpies as well as a sharpie pen, highlighter and letraset grey marker – my preferred set of sketching tools. If I can't cheat then standard Sharpies will do just fine.

Photoshop

Alright granted, the rest of these assume I have a computer but hey – ZURB post, ZURB rules. If it helps we can pretend we're stranded on a desert island with a computer built in.

Photoshop may be cliché but it's an incredibly powerful tool for designers. Here at ZURB we use it for our visual designs, both for our clients as well as our internal tools. We've used Photoshop to dress up printed reports we deliver (like site audits) as well as to create most of the individual graphical elements we use in implementation.

Coda

Coda is a great web design IDE by Panic. It has a polished (though not perfect) UI, supports site synchronization and SVN integration and is a pretty good text editor to boot. Coda stays open on my machine pretty much all day every day with a few different sites open. Don't give Dreamweaver the time of day if you can get your hands on Coda.

iTunes

Okay, maybe this isn't a design tool but at ZURB we need our music to keep going through the day. Jeremy had a post about this not long ago. Whether it's Mark cranking anything from Michael Jackson to Lonely Island or Ryan's bizarre electronica or my half-punk, half-german metal playlists we've got music playing just about every minute we're here. You won't catch me on a desert island designing without some tunes.

That's my list. You're heading off to a desert island – what tools are you gonna take?