My green thumb is often challenged by the grocery store orchid. I never quite know how much water to give these things. So I was really happy to see this solution recently. The orchid comes with a cup! How much water? This much water. Nicely done.
At 37signals, our designers write code. Not just HTML and CSS — Ruby and JavaScript too. We can all get reasonably far implementing an idea before calling in a programmer for help.
I was lucky to get a crash course in Rails when production for the new Basecamp was kicking into high gear. But even after a year in the trenches, I wasn’t confident I was Doing It Right™. So last fall I took the Rails for Designers class at The Starter League. Obviously, the class helped me get better at programming. I wasn’t expecting it to transform my design process — yet that’s exactly what happened.
Before you can walk, you have to stand on your own feet.
An interface isn’t just a series of static screens pasted together. It’s a flow, with inputs and outputs. You can’t truly evaluate an interface until you can use it, and you can’t use it until you build it. Anything less than the real thing is a fuzzy approximation.
It’s fine to bring in a programmer when you’re confident that your idea is worth building, but what if you’re not so sure? Now you’ve used someone else’s time and mental energy to make something that might hit the dumpster. That stinks.
This hit home recently when we started working on a new app. Before, we’d make a static mockup or build a few working pieces and then call in a programmer assist. This time, we’ve been able to stay in the prototype phase much longer – almost 2 months – without having to use up a programmer’s time to test concepts and explore ideas. Basic programming knowledge lets us dance without a partner.
You don’t have to be a code master. I am most definitely not. If you can just make things functional, that’s enough to evaluate and a huge head start for a real programmer to make it great.
Are you a designer who learned to program? How did it change your process? Let’s hear it in the comments.
There are sites, books, feeds, magazines, and movies about “design.” Thousands of people call themselves “designers.”
But have you noticed … “design” never means the same thing?
When I click on some “design” link, I feel like I’m spinning a roulette wheel. Will it be about:
Grids and Helvetica?
Typography?
How to balance trade-offs?
Applying engineering capability to a non-engineering problem?
Designing the mobile version of an existing app is about so much more than screen size.
The fundamental concept of the new Basecamp is this: a project on a single page. Projects resemble a nicely organized paper document with wide margins, familiar proportions and plenty of white-space. In a glance you can see what’s happened in the project, what’s left to be done, and any relevant files. You can almost imagine peeling the sheet off the screen and handing it to a co-worker to get them up to speed. It’s an iconic design.
We knew that this design would be instrumental in making Basecamp for iPhonefeel like Basecamp so it’s no surprise that we attempted a very literal reproduction in an early version of the app.
It’s all here: the clean, white sheet topped with the project’s name followed by sections with snapshots of the latest Discussions, To-dos, Files, etc. A virtual clone in smaller package. We were pretty happy with this mini-me design for awhile, but the story doesn’t start here.
He also introduced the white dot inside each finger hole that later became a fixture of rotary phones. After the phone was redesigned at midcentury, with the letters and numbers moved outside the finger holes, users, to AT&T’s bewilderment, could no longer dial as quickly… With blank space at the center of the holes, Mr. Karlin found, callers no longer had a target at which to aim their fingers. The dot restored the speed.. (via df)
The Porsche 911 celebrates its 50th anniversary. What an incredible run. The 911 has always served as special inspiration to those who believe in long-term iteration. Excellence takes its time.
THAT’S THE THING ABOUT ALL OF THIS. IT’S ABOUT CHOICES. YOU CAN DO ANYTHING YOU WANT WITH A CAMERA, BUT WHEN HULK ASKS THAT ALL IMPORTANT QUESTION OF “WHY?” THERE BETTER BE A REASON FOR IT. AND WHEN YOU GET THAT ANSWER, IT BETTER SPEAK TO THE ACTUAL DESIGN OF WHAT PEOPLE ARE GOING TO FEEL FROM IT. OTHERWISE, YOU ARE NOT IN COMMAND OF YOUR MOVIE. YOU ARE NOT IN COMMAND OF YOUR CRAFT.
A few months ago I made a custom emoji for use in two of our products: Basecamp, the best project management app; and Campfire, IMHO the best real-time team chat.
Why Neckbeard? At first it was a joke—picking up on that Internet meme. But now he’s quickly become one of our most beloved emojis in Campfire. He’s also the unofficial mascot for our neckbeardiest co-worker’s pet projects. Neckbeard also made his way into GitHub and Turntable.fm (thanks guys—shout out to Emoji Cheat Sheet too).
I like Neckbeard so much, and I don’t want him to be limited. I want you and your friends to use Neckbeard in ways that we can’t. I want you to modify him and improve him as you see fit.
Here’s the downloadable vector illustration. The Creative Commons license is below. Thanks for downloading Neckbeard. I hope you have fun with him as much as we do!
License:Creative Commons Attribution 3.0 Unported. You are free to Share—to copy, distribute and transmit the work, to Remix—to adapt the work, and to make commercial use of the work. Please attribute this Neckbeard depiction to 37signals.
