Side Project Hacks: Design Inspirado
“You have to manufacture inspirado” — Tenacious D
When working on a side project, design and UX is important. Not just important from a product perspective, but it’s important for you.
Spend your nights and weekends working on something that looks like junk and feels clunky, and your inspiration will die a slow, painful death.
From the start, I wanted Octocall to look great, as well as feel smooth and painless throughout the user experience.
The Perpetual Amateur
My design skills are decent, and improving, but most things still feel much harder than I know they should be. This is because in design, I’m an amateur, an existence I happily left behind in software engineering years ago.
In my last post I talked about the importance of momentum and not drowning in the details. As primarily an engineer dipping my toe in the deep end of the proverbial design pool, designing a full application and user experience is daunting.
My expertise is in development, not design. Things that would be simple for an intermediate or pro designer take me forever to get to a point where I’m satisfied. This mode of endless tinkering and uncertainty kills momentum. Especially on a side project, it’s important to target your energy focusing on whatever it is you do best.
In building a software product, nearly every core user interface component requires some level of conscious thought and creativity. These solutions don’t come naturally or easily to an amateur.
Every single one of these solutions feels like a struggle, an argument with myself in which I’m not eager to engage.
Is this “the right” way to do it? Will the Design Gods spite me for this? It can’t really be this hard, can it? Why does that border look so out of place? Why does this still look so bad? Ugh. [opens new tab, navigates to Hacker News]
I’ve learned that when I have a UI problem to solve, 99% of the time someone’s already solved it. Better yet, they’ve splattered the hard-won fruits of their labors all across the great plains of the Internet!
The system is simple.
I simply pop open Photoshop (Skitch would work too), start taking screenshots of apps I use everyday — Gmail, Google, Twitter, Yelp, and of course, Dribbble. I save them in one big Photoshop file to Dropbox.
I only put one design concept into each file. These files serve as my reference guide for how to solve a given design problem.
This simple hack prevents me from having to think critically about these problems while still forming elegant solutions. I’ve saved so much energy and time using this technique, helping me to better maintain focus and momentum in my side work.
An Example: The Autocomplete UI
I recently built an autocomplete UI component for a new quick call feature in Octocall. Nearly every web-app I use makes use of an autocomplete widget, and they all work about the same. No reason for me to re-invent the wheel here!
Though I know fullly how an autocomplete widget works from a user perspective, and I know how to implement one from an engineering perspective. But from a design perspective, I knew it was going to be the tiny design details that would slow me down — the highlighted state of the current selection, the border color of each row, the drop shadow surrounding the list of results, and so on.
Here’s a sample of my inspirado board for autocomplete widgets:
These little research expeditions take no more than 10 minutes, and they’re so useful. I can quickly get a sense of what’s commonly supported in these features, something very difficult to visualize staring at a blank screen.
And it doesn’t feel like a yak-shave, because it’s not. It’s actionable research. And it takes virtually no time at all.
In your mind, you have this very productive rapid-feedback discussion with yourself:
Ok, I need to do autocomplete. How does Yelp do it? They pop open the result box after two keystrokes, not one. What about the currently selected item? They do a light blue highlight. What’s the hex-code on that? [Pop open Chrome dev-tools, record the hex-code.]
What about borders? No border, great, less work.
Per-keystroke highlighting seems hard, I’ll do that later.
Slight drop-shadow on the result box, that’s easy.
Basic keyboard navigation with the up/down keys. What about selection? Mouse only, or enter? Both.
Using this simple hack, I save so much energy I’d otherwise expend on frustration directed at my own amateurism. It helps keep me focused and on-task, so I can focus on what I do best.
If you’re tired of inefficient meetings that don’t start on time, consider signing up for Octocall, a new conference calling service for businesses.
