March | 2012 | The Mythical User

Every designer has, at some point, had someone say “Hey, you know how you had it before? I liked that better. Can you change back?” We all have different workflows for managing this. Saving numbered versions of psds, having folders, keeping backup layer groups… we do it all. And it’s a pain in the butt.

Photoshop plays nicely with SVN, but you have to remember to check out and check in. No good there, we have enough to remember. So, when I saw Pixelapse pimped on one blog or another, I started drooling. I begged until they gave me a beta invitation, and I’ve now been using it for about a week.

Pixelapse login page

First off, their UI is very pretty. Clean, good use of white space, simple, and responsive. Signup is quick and it’s obvious how to download the app.

I was surprised to see that Pixelapse is a standalone app, rather than a Photoshop plugin. This was fine – but somehow I’d gotten a different expectation. Once installed, Pixelapse creates its own folder on your hard drive. Then, every time you save a change to any file that’s in that folder, it auto-uploads the change to your pixelapse account.

Here’s where I encountered my first issue – ideally I would have been able to point Pixelapse to my project folders, and have it track them from where they already live. I was initially anxious about the Pixelapse folder, because there’s no assurance in the interface that subfoldering is supported. So, I dragged one of my project folders in and was pleasantly surprised – I can nest folders as deep as I like in the Pixelapse folder and it’ll reflect that hierarchy on the website.

Folders are supported

So far, so good. One minor workflow change, no big deal. However, I quickly discovered a second issue: I only cared about versions of my psds and ai files, but Pixelapse industriously tracks every graphics file in the folders you give it. While this might be fantastic for some designers, it caused huge amounts of clutter for me. I would love it if, for future versions, Pixelapse would give me a setting and let me specify which file types to pay attention to.

…Because the clutter reveals what I feel is Pixelapse’s only real FLAW – I can’t tell what the organization scheme is for the files inside the folders. There are hundreds, and I can’t figure out if they’re sorted by date. They are certainly not sorted by name. I’d love to be able to sort them, so that I can swap between name and most recently modified.

I decided to partially mitigate this by keeping only psd files in the Pixelapse folder, and keeping all final artwork, comp exports and supporting documents in my old folder system, which now mirrors Pixelapse. Slightly inconvenient at first, but I was used to it after a day.

My last complaint: it’s not instantly obvious how I would pull down a certain revision. If I wanted to download version 1 of a psd, could I do it? I think so, and there’s a link in the upper right hand corner that looks like I could, but when I clicked the link I got an error page.

Bummer, but I didn’t feel like it was a huge deal. This is beta software, after all, and I’m certain they’ll work the kinks out.

However, that said, I will tell you that the Pixelapse team is ridiculously responsive. I have sent them two pieces of feedback, and they’ve been wonderful about responding within hours. They’re courteous and earnest, and they really seem devoted to making a great product.

The verdict: I hope I never have to live without Pixelapse again. I’ve already used it to roll back and show someone previous versions of a file. I envision it becoming a must-have piece in my design toolbox.

Today’s Interesting Link:
www.pixelapse.com of course. These guys deserve to be successful, because they found a problem I didn’t know I wanted solved.

Today’s Usability Quote:
“Innovation springs from constraints” – David Blakely, Director of Technology Strategy at IDEO

Today’s Music To Design To:
Because I’m listening to it at this very moment – Poe’s concept album, Haunted, is delicious. It’s old, but beautiful and poignant. You’ve got Poe’s haunting, sexy vocals interspersed with real recordings of her father, who is passed. It’s written as a companion to her brother’s book, House of Leaves. I haven’t read the book, but I’m told it’s excellent.

Nathan Curtis of Eightshapes has a great post over at UIE about How to Build a UX Design Library. I read it and enjoyed it, but couldn’t help but feel like it was way, WAY overcomplicated. If The UX Design Library process were a UI, people would be using words like “crowded” and “confusing” and “intense”. Because that’s what it is.

But what if there was a better way? I think that there is. I think you can distill all of that down to the MVP (that’s Minimum Viable Product for those of you who don’t follow Lean Startup methodologies) and start getting benefit right away, with just a couple of hours’ time invested.

Keep in mind that I think from an Agile mindset. Get to tangible, touchable products as quickly as possible. So what’s the bare minimum you need to get there? You need a standard set of UI elements, in an easy to understand, access and implement structure.

Enter my MVP: A PSD UI Library.

No, stay with me here. If you don’t use photoshop for your designs, you can do the same with OmniGraffle or even Visio or heaven forbid, PowerPoint. You can make a library, and then you can drag and drop elements from it into all your new designs. There are even starters out there to help you on the way.

The best part of it is, you can get started by taking a psd you’ve already made – pick your most complicated one – and just rearranging or isolating layers. Boom – in 5 minutes you have the beginnings of a UX Design Library.

Then, when you have a couple of hours to spare, do this:

Structure Counts

You need to think of your UI elements in categories, like this:

Alignment
Typography
Containers
Backgrounds
Color Palette
Iconography
Messaging
Form Elements
Ad Units
Widgets

After you’ve done that, sit down and make a list of all the elements that fall into those categories. Some of them are self-explanatory, the rest are:

Alignment

You need to be using a grid and vertical rhythm. I don’t care if your code is using it yet or not. Your designs must. And then your code needs to as soon as possible. Really. For alignment, determine what grid you’re going to use – how many columns? How wide are the gutters? Make those columns as a photoshop layer. I recommend GuideGuide to get you there with a minimum of pain.

Determine your vertical rhythm. I like line height * 1.5, but this is a personal thing. Make lines that go across your design, spaced out by that many pixels vertically.

Save both of these in a group called Alignment.

Containers

These are borders, boxes, and areas. A container might have a visible border, or it might be totally clear. It might involve a layout of two things side by side. It might be a specific size, or stretch to fit all the available space.

Keep in mind that containers should be distinct from backgrounds. Why? Because you’ll want to mix and match backgrounds and containers.

Widgets

For the purposes of this structure, widgets are things that are kind of unique, and breaking them up into their elements (this container with that background and this typography and that iconography) doesn’t make sense. My pagination is a widget. My Member avatars are a widget. Your widgets will vary, and so will your mileage. This is the catch-all for unique elements.

Make it Happen

After you’ve done all of your UX architecture, here are the steps you’ll take.

Make a new file. Add the background for your site.
Add things like the site header, footer, and main content containers, if applicable.
Make your alignment group
Add all the other elements in groups. The groups make it very easy to find what you’re looking for when you want to use these elements.
Here’s a great starter if you don’t want to create custom form elements.
Distribute to anyone who makes comps. I keep mine on a wiki and update it every time we add a new interface element or I realize I forgot one.

And that’s it. It’ll not only speed up your design time, but it’ll get you started down the road to Neil Curtis’s complete UX Library.

Here’s my whole UI Library. Because I’m meta, it also completely conforms (layout, line height, structure, etc) to my living styleguide. It was the first piece of our UX Library, and it’s the piece that gets used the most often, and by the most people. Good luck to you, and let me know if you try this strategy, and how it works out!

Click to embiggen.

Today’s Interesting Link:

www.placekitten.com is the best way to bring a little joy into your day. You might notice that the ad placeholders in my UI Library are all cute and fluffy bits of adorable joy. That’s because placekitten.com exists.

Today’s Usability Quote:

“You cannot have innovation unless you are willing and able to move through the unknown and go from curiosity to wonder.” -Dawna Markova, author of The Open Mind

Today’s Music To Design To:

The Binary Universe by BT is fantastic for when you’re buckling down and needing to shut out the rest of the world while you work. You know, those days when you need to be inspired and feel the groove without being distracted. You can download this oldie but goodie from pretty much any digital music store.

Month: March 2012

Tool Review: Pixelapse

A Better Way to Build a UX Design Library

Sharing is fun.

Sharing is fun.