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.
