You’re reading Signal v. Noise, a publication about the web by Basecamp since 1999. Happy !

Signal v. Noise: Design

Our Most Recent Posts on Design

Request an Invite | Cloudpipes.png

Playful touch spotted on the Cloudpipes invite request page. They keep a list of companies they like and show a little thumbs-up whenever someone signs up from one of those domains!

Michael Berger on Jan 13 2015 1 comment

Why you should share your dirty work

Jonas Downey
Jonas Downey wrote this on 13 comments

When you look at most designers’ portfolios, you usually see beautiful, polished work — finished products with plenty of spit and shine.

Those examples are great for showing off your talents and the culmination of your hard work, but the final product is only a small percentage of your total effort. It just represents your last decisions that made the cut.

In reality, most projects are ugly and messy. There are piles of half-baked explorations and heated arguments left behind the scenes. That’s why the shipped version of a design can seem obvious in retrospect — you threw out all the confusing stuff along the way!

Most of this dirty work ends up in the trash or unseen, and that’s too bad. We should all show our dirty work more often, because it’s documentation of the real work. It explains your thought process and gives critical backstory to the final version. (By the way: having that backstory also makes it easier for employers to hire you. Sometimes it’s much more valuable than the end result.)

We’ve been doing this for years in our Design Decisions posts. In that spirit, here’s a bit of our recent Basecamp dirt. This is what it’s really like to make the doughnuts!

Example 1: Should we show a button or not?

Sometimes small things are unexpectedly controversial. When we worked on Archiving Discussions, we had a running debate about whether we should expose the [Archive] button on discussions all the time, or keep it hidden away in a “bulk archiving” mode.

Archiving is an occasional use feature, so we were concerned about making it too prominent. For a while, we even planned to hide the button behind a keyboard shortcut and make it a secret power user thing.

Finally, we all agreed that there was no harm in showing the button. It didn’t get in the way or make the Discussions page noisy — it made it useful.

Example 2: Writing a single link

There wasn’t much design work needed for multiple-file downloads, yet we fiddled with this link text profusely. We even changed it in production after we shipped the feature.

Example 3: Fixing an edge case

Working on a big product like Basecamp means there’s an edge case practically everywhere you look. When we added moving a single to-do, we had to accommodate what happens if there are no destinations to move to. Most people won’t ever encounter this state, but it has to exist for those who do.

Example 4: How should we show attachments?

One of the bigger challenges with attaching files to to-dos was deciding whether we should show each file’s thumbnail next to the to-do itself. To-dos already have a lot of UI chrome, so we wanted to tread lightly. We tried big thumbnails and tiny ones.

After several debates, we decided that big thumbnails were too intrusive, and small ones were too tiny to be useful. So we axed them and opted to show a paperclip icon instead.

Example 5: Basic grammar

There’s often a conflict between proper English and what wording can be programmed to fit a variety of conditions in software. This is why you see computers making silly mistakes like 1 to-dos added successfully. Carefully working around these situations is almost an art in itself. There’s always a push and pull between what you want to say, and what you can reasonably do without excessive conditional code.

During design for making templates from existing projects we included an option to remove to-do assignments in bulk. We had to try several times to find a version that was clear enough and didn’t violate basic English grammar in some way.

So there you have it — those are just a few of our recent examples! What stuff have you made recently that’s itching to see the light of day?

Google shows you a good time

Jason Fried
Jason Fried wrote this on 9 comments

I ordered something from overseas and checked the tracking number to see when I might receive the shipment. The results looked like this:

Since the page wasn’t in English, and Google knew I was an English speaker, Google offered to translate it for me:

So I did. Then it looked like this:

The special part… Check out the time column. They “translated” 24-hour time into 12-hour time. They knew I was in the US and that’s our preference for displaying time. So they didn’t only translate the words into English, they went the extra step and translated the time format to match expectations. They certainly didn’t have to do that, but I definitely noticed that they did.

Delightful attention to detail, and thorough definition of translation. Well done.

Writing-first Design

Jonas Downey
Jonas Downey wrote this on 10 comments

A quick way to measure a designer’s maturity is to watch what they do at the beginning of a project. Inexperienced designers are often smitten by the allure of new tools and quick results, so they’ll jump in to Photoshop or Sketch and start messing with layouts and style explorations. Seasoned designers know this can be distracting, so they might start by doing research or drawing in a paper sketchbook instead.

Sketching is great, but before I start sketching, I start writing. Writing first has lots of advantages, regardless of the project you’re working on. Here are a few examples.

Example 1: You’re making a simple website, and your client doesn’t have any copy yet.

Great! Here’s an opportunity to write it. Skip the lorem ipsum and start telling your client’s story. What’s special about this client? What problems are they trying to solve by having this website? How can you explain those ideas to people who visit the site? And why should the site’s visitors care?

Answering these questions requires you to gain understanding. You can’t write anything without knowing your subject. You’ll be forced to learn a lot about the client’s business, their history, and their audience. Having this information will clarify your vision for the overall project.

Example 2: You’re making a website, and the client gave you copy to start with.

Great! Don’t design anything yet. Put on your editor’s hat and think critically. Is the text arranged correctly? Does it have the right tone of voice? Is it too long or too short? Is it suitable for the web? Can you chop it up into separate pages and keep it coherent? What’s still missing?

Chances are, this handed-over writing might be lousy. Be honest and propose copy changes before you get much deeper into the design. Don’t be afraid to do a rewrite — treat writing as part of the design, not just an element on the page.

Example 3: You’re making an app or interface elements.

In that case, you’re likely designing affordances — communicating actions the user can take. These might take the form of explanatory copy, prompts, buttons, labels, error messages, etc.

Great! Hop into a text editor. Write out as many variations as you can. It’s easy to mock basic UI in text, like this:

Are you sure you want to delete that file?
[ Yes, I’m sure ] [ Never mind ]
Deleting this file will remove it permanently. Are you sure?
[ Yes, delete it ] [ No, cancel ]

And don’t be afraid to have a little fun with it:

That file will disappear completely and never be found. Carry on?
[ Indeed, ashes to ashes and so forth ] [ No, I can’t let go ]

Example 4: You’re making a graphics-heavy poster that has almost no writing at all.

Great! Write down what you think you’re trying to accomplish. Spend 5 or 10 minutes on it. The notes are entirely to help you clear your head and figure out what to do.

Putting writing first improves your chances of success in the final product. It’s good practice, and it makes the rest of your job easier.

Now, what does the overall creative process look like? I’ve found it works well like this:

  • Spend time writing until you’re happy with the first draft.
  • Sketch visual ideas on paper.
  • Open your software tool of choice and explore aesthetics: colors, type, imagery, and style.
  • Put it all together and try different layouts and arrangements.
  • Continue editing once you see everything in context.

Obviously that exact order is not always right for every project. There’s no right way to do things! But following this general process helps guarantee you’re putting horses before carts and staying on the right road.

Monsters and Thieves

Nathan Kontny
Nathan Kontny wrote this on 9 comments

Good artists copy; great artists steal.

A famous quote about creativity often attributed to Picasso. But what can we actually learn about creativity from studying thieves? And did Picasso even say it?

Happy Halloween! I haven’t cared for ages. But, now I have someone in my house like this. My 5 month old ladybug :)
I find myself at the nearest drugstore constantly buying diapers, and I can’t help notice the holiday on sale. Candy, makeup, masks. Especially the classic: Frankenstein.
Most of us don’t realize our use of Frankenstein’s name is wrong. Frankenstein was the name of the scientist, Victor Frankenstein. The monster didn’t have a name.
In the book, he’s called monster, creature, fiend, even devil. If anything, the monster’s name is Adam.

I am thy creature: I ought to be thy Adam, but I am rather the fallen angel, whom thou drivest from joy for no misdeed

-The “monster”

But the big thing most don’t realize is that the story of Frankenstein was written by François‐Félix Nogaret.
Wait that doesn’t sound right. Wasn’t Frankenstein written by Mary Shelley?
Julia V. Douthwaite, a professor at The University of Notre Dame, recently uncovered a story by French author François‐Félix Nogaret, written years before Mary Shelley was even born. The story is about an inventor named Frankenstein who creates an artificial man.
Mary Shelley stole the idea of Frankenstein.

Cars were supposed to be the solution to lost or stolen horses.

When I leave my machine at the door of a patient’s house I am sure to find it there on my return. Not always so with the horse: he may have skipped off as the result of a flying paper or the uncouth yell of a street gamin, and the expense of broken harness, wagon, and probably worse has to be met.

-An excited new automobile owner from 1901, found in the book Stealing Cars

Instead, cars have been the object of thieves attention since they were first invented. Motor vehicle theft, also more popularly known as grand theft auto (amongst police and video game playing teens), is an enormous problem and a multi-billion dollar industry for thieves.
By many counts, a car is stolen in the US every 30 seconds. Of those stolen, only about 12% are ever recovered. And the problem is all over the world. 1 in 6 cars on the road in the Czech Republic are stolen vehicles or contain stolen parts.
But today, with the advent of Vehicle Identification Numbers (VINs), a stolen car isn’t that valuable sold on its own. If you had a stolen car and changed its plates, its VIN is still etched or stamped onto 20 or more pieces of your car. The dashboard is the obvious place you see it. But it’s on the engine. The doors. Some cars even have the VIN etched onto all the windows.
And so, a stolen car is easy to identify. As a whole.
Professional car thieves know that as soon as you steal a car, your next immediate task is to get it to a chop shop. A chop shop is an illegally operating garage that specializes in taking a car and almost literally chopping it into pieces. In less than an hour, a stolen car is chopped. Seats, windshield, airbags – every individual item is removed. Things with VINs are dumped, destroyed, or melted down.
Now, thieves have extremely valuable parts on their hands. Wheels, entertainment systems, air bags – all can go for hundreds to thousands of dollars on their own. Even melted down. A catalytic converter contains platinum going for $1500 an ounce.
And in their sale, they can’t be traced back to the original owner or the crime.
Professional thieves have figured out that there isn’t much use to stealing and reselling an entire car. The value is in deconstructing the car, and utilizing the individual pieces.

Many people also don’t realize Mary Shelley’s Frankenstein is subtitled “The Modern Prometheus”, as the subtitle doesn’t appear on modern editions of the book.
Prometheus is a tale from Greek mythology, probably 3000 years old. Some versions of the myth have Prometheus as the architect of mankind, fashioned out of mud and fire. Shelley’s monster was created with flesh and lightning.
Shelley didn’t just steal from Nogaret. She stole pieces of work from a countless number of places. Like Greek mythology. Like Milton’s Paradise Lost, an alternative genesis story about Adam, God, and Satan.

Like Adam, I was created apparently united by no link to any other being in existence many times I considered Satan as the fitter emblem of my condition; for often, like him, when I viewed the bliss of my protectors, the bitter gall of envy rose within me.

-The “monster”

Like Coleridge’s The Rime of the Ancient Mariner. Mariner and Frankenstein both use a similar narrative technique of one character telling another character the story, and interrupting the narrative to make sure the reader is reminded of that fact.
She stole from Giovanni Aldini and Johann Konrad Dippel who were scientists in the late 1700s who were trying to sustain or create new life with electricity and chemicals.
Shelly even stole narrative and character ideas from her own mother’s novel, A Vindication of the Rights of Woman.
But you wouldn’t know these things unless you did a lot of research and could spot the elements. Nogaret and Shelley might have a main character with the same name creating an artificial man, but that’s largely where the similarities stop. The stories are completely different.
And that’s because Shelly did what these car thieves excel at: break things down, and find new value in the parts.

Amateurs tend to be poor at imitation. When they see an idea, they clone the whole thing and offer it as their own work. The pro knows to chop these things into pieces and find new uses for them.
One of my favorite books to recommend to developers who feel like they can’t design is Jarrod Drysdale’s Bootstrapping Design. He outlines a way novice web designers can do what Mary Shelley did:

  1. Find 3 sites that inspire you.
  2. Steal the layout from one, color scheme from another, and typography from the third.
  3. Combine those three, and you’ll realize you’ve created something original.

I’ve made something called Draft, software to help people write better. The homepage has served me well in getting traffic and getting people to sign up:

But it’s actually a combination of things I’ve stolen. The font I stole from Field Notes, these beautifuly designed notebooks from Aaron Draplin and Coudal Partners. They introduced me to Futura, and I fell in love.
The layout was stolen from Google. Simple, centered, almost nothing on the page, just click the button and get started.
There’s a little animation to the headline that drops in – stolen from DuckDuckGo’s previous design, a great search engine built by Gabriel Weinberg. Their logo had a similar animation when the page loaded.
Even the blue button came from some place I can’t remember now. But I was on a site, saw the blue they were using, and decided it would make a great link and button color.
On and on, I’ve deconstructed these other sites into pieces and mixed them together into something new. Something original.
Now, I’ve recently taken over as the CEO of Highrise, and as we look at things to improve and redesign, I see us doing the exact same thing.
I hired the very talented designer, Wren Lanier, and the first thing she asked me was: send me all the sites and designs that inspire you.
And as you’ll see, when we launch our new homepage soon, it will come off as original, because it is. But lots of elements on those pages are because Wren or I liked a button here, a color there, a font somewhere else.
Here’s an illustration that you might see soon on the new Highrise homepage, describing Highrise as a “Secret Weapon.”

A beautiful original “shaken” from a designer and artist I hired, Brad Colbow, but you can spot where inspiration came from.

That quote “Good artists copy; great artists steal,” is often attributed to Picasso. But that’s not what he actually said. According to The Quote Investigator, that’s Steve Jobs’ version as he was trying to quote Picasso.
Picasso has also been quoted as saying:
    Bad artists copy; great artists steal.
But a 1974 book, mentioned William Faulkner said:
    Immature artists copy, great artists steal.
But it was T.S. Elliot who in 1920 wrote:
    Immature poets imitate; mature poets steal.
And it was Alfred Tennyson in 1892 who wrote:
    That great poets imitate and improve, whereas small ones steal and spoil.

All these great artists, Jobs, Picasso, T.S. Elliot, stole parts, added their own, and inspired the next – just like professional car thieves, clever enough to deconstruct the originals, and use the pieces to create something much more valuable.

Extra Drawings

Nate Otto
Nate Otto wrote this on 6 comments

For the last ten months at Basecamp I have been the guy that draws stuff. After making occasional contributions at 37signals over the years, they tapped me to make hand drawn images for the Basecamp marketing site that first appeared in February. Since then my drawings have crept into the app itself, into email blasts, onto banners at Pitchfork, all up in The Distance, plastered on the walls of the office, and into several employee’s avatars. We came up with a creative contract that allows me time to work on my other career as an artist while still providing substantial input at Basecamp.


Faith in eventually

Jason Fried
Jason Fried wrote this on 20 comments

Making something new takes patience. But it also takes faith. Faith that everything will work out in the end.

During the development of most any product, there are always times when things aren’t quite right. Times when you feel like you may be going backwards a bit. Times where it’s almost there, but you can’t yet figure out why it isn’t. Times when you hate the thing today that you loved yesterday. Times when what you had in your head isn’t quite what you’re seeing in front of you. Yet. That’s when you need to have faith.

There are designs that are close, but not there yet. There are obvious conflicts that will need to be resolved. There are lingering things that confound you, confuse you, or upset you, but you know that eventually they’ll work themselves out. Eventually you’ll find the right way to do something you’ve been struggling with.

It’s hard to live with something that isn’t quite right yet – especially when it’s your job to get it right. It’s important to know when to say “it’s fine for now, but it won’t be fine for later.” Because moving forward is critical to getting somewhere. And, eventually, you’ll figure it all out. It’ll all work out in the end.

This is what I’ve always believed, and have always tried to practice. A dedicated faith in the eventual resolution of a problem, the eventual execution of a concept, and the eventual realization of the right design. Even when something’s poking out you don’t like, or something isn’t aligning quite right, or the words aren’t as elegant as you’d hoped, or something just isn’t easy enough yet, you need to have confidence it’ll all come together eventually.

Remember that what you’re making is in a perpetual state of almost right up until the end.

In the meantime, you just press on and keep making things, trying things, and getting closer and closer to the time when you can tie the loose ends into a perfect bow and present it to the world. What fun it is!