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

Writing-first Design

Jonas Downey
Jonas Downey wrote this on 2 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.

A Glimpse of Artificial Intelligence

Jamie
Jamie wrote this on 7 comments

At 8:15 AM I called Safelite Auto Glass for a quote to fix a chip in my car’s windshield. I wasn’t expecting to get the work done today, but the customer service rep gave me a great deal. We scheduled the appointment for 9:30 AM. Then he asked if he could send me an email confirmation.

Normally I don’t give out my email address because I don’t want to get on another mailing list. However, in my past experience there’s been miscommunication between the corporate call center and the place of service. In truth, the $50 Safelite quote was way below the $140 dealer quote I got the day before. An email confirmation of the quote would clear up any issues should they arise. So I obliged.

What I usually do next is put the appointment in my calendar. It’s a habit I tried very hard to make over the years. No matter how soon the appointment is put it in the calendar to remember to do it!

A funny thing happened when I opened my calendar. There was an event there that said Repair your WINDSHIELD already. It had the proper time and everything.



Took me a minute to realize what had happened. The email confirmation was sent to my personal email. I use Google’s Gmail.



Turns out Google made a calendar event based on the information in that email. I use Google Calendar too. Gmail + Calendar + Google stuff was able to parse the proper event name, the time, and the location.



Then at 8:50 AM, my phone buzzed. A notification told me to leave by 9:07 AM because there is heavy traffic on the way there. I even got driving directions. By the way, there’s always heavy traffic in Chicago.



By 10:30 AM I left the Safelite shop with a repaired windshield.

I felt like I had a personal assistant this morning. I had a glimpse of artificial intelligence, but not once did I feel like I was in a sci-fi movie.

The coolest thing about my “personal assistant” experience is that it didn’t require sci-fi technology. It was amazing for sure, but I didn’t call out to Siri or ask my non-existent robot butler. It all started with a simple low tech thing: email.

Art and Craft

Wailin Wong
Wailin Wong wrote this on Discuss

Priceless cultural artifacts and works of art belong in a museum, as Indiana Jones taught us. But if the museum doesn’t have the space for that painting or Cross of Coronado, these pieces go to companies like The Icon Group.

Photo by Michael Berger

Founded in 1980, The Icon Group is a specialized moving and storage business that performs the vital but unsung task of boxing up fine art objects and storing them safely. There’s an incredible amount of knowledge and skill that goes into handling an oddly shaped or fragile piece, and companies like The Icon Group only gain that practical expertise – and the trust of their clients – by doing it over and over for decades.

The Icon Group has handled everything from Picassos to the archives of children’s poet, author and illustrator Shel Silverstein. In fact, Silverstein’s papers, books, musical instrument collection and recordings (did you know he wrote “A Boy Named Sue,” made famous by Johnny Cash?) are stored at The Icon Group’s warehouse on Chicago’s west side.

Read more about The Icon Group at The Distance.

Monsters and Thieves

Nathan Kontny
Nathan Kontny wrote this on 10 comments

Good artists copy; great artists steal.
-Picasso

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.

The Distance: Fantasy Costumes

Wailin Wong
Wailin Wong wrote this on 2 comments

Walk into any Halloween pop-up store right now and you’re likely to find the same assortment of merchandise: Teenage Mutant Ninja Turtle costumes and “Frozen” princess dresses, plus old stand-bys like witch hats and vampire capes.

You’ll find those items at Fantasy Costumes in Chicago too, but the store has a singular, massive inventory that’s the result of being in business year-round for 45 years. To visit Fantasy Costumes is to browse a museum of pop culture phenomena where everything is for sale or rent—a Garth wig from Wayne’s World (excellent!), Andy Warhol glasses, a Hello Kitty mascot head. That kind of selection helps the store stay open year-round and competitive against the seasonal pop-ups. No tricks here, just a half-century of knowing how to help people have fun.

Photo by Michael Berger

Read more about Fantasy Costumes at The Distance. Happy Halloween!

Basecamp Meetup: October 2014

Basecamp
Basecamp wrote this on 6 comments

Twice a year everyone who works at Basecamp comes to our Chicago office for a week to work and catch up with each other. Last week was our Fall meetup.

Here’s what happened:

  • Shaun had a BBQ at his house for out-of town guests
  • We welcomed 3 new employees: Conor, Eileen, and Sylvia
  • Noah talked about customer demographics
  • We had a company dinner at Half Acre Brewery
  • JZ, Nick, and Zach talked about the Basecamp for iOS app
  • Mig recapped last summer’s internship program
  • James, Joan, Kristin, Natalie, and Sylvia shared customer feedback
  • The Distance team planned the future of the magazine
  • A few of us went to the David Bowie exhibit at the Museum of Contemporary Art
  • The ladies of Basecamp met for a night out
  • Jason and David celebrated the extraordinary efforts of Dan, Jim, and Nate
  • Javan and Sam presented some cool new stuff they’re working on
  • Jonas and Trevor shared some of their recent updates to Basecamp
  • Will set up a room for us to try Oculus Rift
  • Dan and Jamie presented what’s new in Android 5.0 Lollipop
  • We had a pizza party and played games
  • Noah demoed some new software to visualize data
  • Zach from Inventables showed off their new desktop CNC: Carvey
  • Some of us went to see a live taping of Wait Wait Don’t Tell Me

Because we’re spread out across states, countries, and time zones it’s nice to have the opportunity to get together in person every once in a while.

Basecampy?

Nate Otto
Nate Otto wrote this on 13 comments

If there was a buddy cop movie starring the Geico gecko and the Aflac duck, I’m pretty sure it would outperform “Edge of Tomorrow” at the box office.

We love our anthropomorphized branding mascots. Shortly after Basecamp hatched its own such character, I was watching a big event on TV, and it seemed as though every product in every commercial had sprouted arms and legs. I guess we are part of the zeitgeist.

While I would love to take credit for inventing our Basecamp creature because he came out of the tip of my Micron, the fact is Jason asked me to create it, and it’s pretty hard to go wrong by adding humanoid features to the Basecamp logo. The results are bound to be adorable. Shawnimals had made a similar character months before with the Happy Sherpa, and our design intern this summer, Julia, also made a nice version. That said, I’m proud of the character I helped create, and I’m glad to see it gain momentum. What started as an experiment seems to have taken hold.


At Basecamp, our marketing is more intuitive than contrived. We don’t have dedicated marketing or sales staff. We pay attention to data but it doesn’t own us (take that Noah). I think the philosophy has been that the best marketing is a superior product. Basecamp sells itself, but it doesn’t hurt to have something cool to print on T-shirts. That is where this mascot comes into play. Internally we have been calling it “Basecampy,” and I heard someone call it “Mr. Basecamp” the other day. Let it be known, however, that it is genderless. It reproduces through binary fission. A creation myth is in the works. Basecampy may stick as the name, but we are open for suggestions. Leave your thoughts in the comments.

Google made one of Android's jokes into something clever.

Jamie
Jamie wrote this on 2 comments

Face Unlock is one of those features that surprises you. “Wow, this is pretty cool.” But after the novelty wears off some things become apparent: it doesn’t work very well, it isn’t very secure (it can be fooled), and you look kinda silly trying to unlock your phone with your face.

A few weeks ago John Gruber tweeted:


It reminded me of how Google creates these sci-fi things but doesn’t implement them very well. Often times features like these get buried or forgotten (is Google Goggles a thing still?).
Yesterday I watched Dieter Bohn’s review of the upcoming Nexus 6 device. I listened to his rundown of the hardware, the screen, how huge the device is, and how the camera’s pretty good. But there was one sentence in the review that I found puzzling. He said it so quickly—almost as an aside—that you could easily miss it:
“It’s got a clever feature if you’re looking at the lockscreen you can unlock the thing.”
What was that? Is he talking about Face Unlock? Is it different in Android Lollipop (the newest/next version of Android)?
I have a Nexus 5 with the latest Developer Preview, so I looked for some clues for this feature that Dieter Bohn mentioned. Sure enough, there it was in the Security Settings: Trusted Face.


Alongside trusted Bluetooth devices, you can set your face to automatically unlock your phone.


OK, so how’s this different than the Face Unlock of old? Android Lollipop doesn’t make you choose to lock your phone by PIN, Password, or Face. The Trusted Face feature is a layer of convenience. You can still unlock your device using a PIN, Password, or Pattern. If the device scans your face, it’s unlocked.
You might be saying, “I don’t get it. It sounds the same.” Here’s the thing. Android Lollipop now shows your notifications on the lockscreen.


The key difference is: you’re looking at the lockscreen to scan your notifications now. It’s during this time that Android scans your face!
When the device sees your face, this is what the lock screen icon does:


Now your phone’s conveniently unlocked for you without you having to think about it.
This seems like such a minor thing, but it shows the care and attention Google has been paying to Android’s design recently. They took this technology (face recognition), and finally applied it in a useful way. It’s a subtle thing, but the difference between “staring at your phone to unlock it” and “reading a notification unlocks it” is a huge difference.