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

Matt Linderman

About Matt Linderman

Now: The creator of Vooza, "the Spinal Tap of startups." Previously: Employee #1 at 37signals and co-author of the books Rework and Getting Real.

[Screens Around Town] Brightkite, Chicago2016, and NBA

Matt Linderman
Matt Linderman wrote this on 12 comments

Brightkite
Ryan Mendoza: “Came across this ‘we’ll let you know when it launches’ screen (at brightkite), which is a little bit out of the ordinary. It lets you get notified not only via email, but also via IM and SMS. Pretty neat, given that the product they’re promoting is about notifications.

brightkite

Chicago2016
Derek Vaz: “Chicago2016.org has a nice litte form treatment for entering your reason why you support the bid. As an IA I’m always trying to make forms smaller, simpler and warmer. This actually invites me to ‘speak my mind’ instead of just ‘enter text here’.”

voice your

NBA fonts
Jeremy Wallace: “One often doesn’t see fonts competing like this...I’m going to have to go with the Jazz based on readability.”

nba

NBA box score
Check out San Antonio veteran Robert Horry’s line from this NBA game (it’s since been modified).

robert horry

Got an interesting link, story, or screenshot for Signal vs. Noise? Contact svn [at] 37signals [dot] com.

Helpful distortion at NYC & London subway maps

Matt Linderman
Matt Linderman wrote this on 70 comments

Eddie Jabbour, graphic designer for Kick Design, is obsessed with replacing the confusing NYC subway map (below: originals on left and Kick maps on right — click for larger versions).

nyc subway map

nyc subway map

The logic behind the changes
“Can He Get There From Here?” profiles Jabbour’s quest. Here he explains the reasoning for his changes:

Mr. Jabbour pinned two maps to the wall, then pointed to the different renderings of the Atlantic Avenue terminal in Brooklyn, which he says is the most difficult station to represent because so many subway lines converge there. In Mr. Jabbour’s map, the subway lines run parallel to one another, making the map easier to read, if slightly inaccurate. Each line is marked with a circle bearing the route’s letter or number, instead of the oblong station markers used on the current map.

There are other differences. Unlike the official map, Mr. Jabbour’s map does not have a single line representing all the trains in a “cluster” route, like the 1, 2 and 3 trains in Manhattan. He used the same type font throughout, and words travel left to right, rather than diagonally, as on much of the official map. The lines bend only in 45- and 90-degree angles, to create a gridlike pattern.

In the eyes of Mr. Jabbour, the New York system is too complicated to layer on information like commuter rail and bus routes, as the current map does. He would like to see a map that is singularly devoted to the subway.

Distortion vs. accuracy
Jabbour’s map looks like a winner. (Thankfully, the navigation on it is a lot better than the messy Flash interface at Kick Design’s main site). He wisely recognizes that usability is more important than geographic accuracy here. Subway map readers want to know how to get from A to B a lot more than they want to know the exact curve of the tracks along the way. Sometimes truth is less important than knowledge.

It’s also interesting to see how he increases the number of lines on the map yet decreases the overall noise created. That change means riders can put their finger on a line and trace it all the way to their destination. That’s not always an easy task on the current map (multiple trains run along a single line until veering off).

Continued…

[Fireside Chat] Icon designers (Part 3 of 3)

Matt Linderman
Matt Linderman wrote this on 6 comments

[Fireside Chats are round table discussions conducted using Campfire.]

The Chatters
Dave Brasgalla (Icon Factory)
Brian Brasher (Firewheel Design)
Jon Hicks (Hicks Design)
Corey Marion (Icon Factory)
Michael Schmidt (Cuban Council)
Josh Williams (Firewheel Design)
(Moderated by Matt and Jason from 37signals)

Matt
Is the movement towards increasingly three-dimensional/photo-realistic iconography of any demonstrable benefit in terms of usability?
Matt
the rest of the question (from an SvN reader): "It appears to be largely motivated by marketing and branding/identity (which obviously has it’s own value). The constrains on Kare when she designed the original Mac icons forced her to abstract and simplify, much further than designers have to now. Was it this process that resulted in such effective icons?"
Dave
In theory, yes
Corey
This same question came up when OSX was released
Brian
Yes, the technological limitations placed on Kare are what caused her to tap into genius.
“The technological limitations placed on Kare are what caused her to tap into genius.”
Continued…

Hall and Strogatz on getting in sync

Matt Linderman
Matt Linderman wrote this on 11 comments

“The Dance of Life: The Other Dimension of Time” by Edward T. Hall studies “how people are tied together and yet isolated by hidden threads of rhythm and walls of time.” It contains this fascinating passage describing how humans sync up with each other:

Rhythm is basic to synchrony. This principle is illustrated by a film of children on a playground. Who would think that widely scattered groups of children in a school playground could be in sync. Yet this is precisely the case. One of my students selected as a project an exercise in what can be learned from film. Hiding in an abandoned automobile, which he used as a blind, he filmed children in an adjacent school yard during recess. As he viewed the film, his first impression was the obvious one: a film of children playing in different parts of the school playground. Then — watching the film several times at different speeds, he began to notice one very active little girl who seemed to stand out from the rest. She was all over the place. Concentrating on the girl, my student noticed that whenever she was near a cluster of children the members of that group were in sync not only with each other but with her. Many viewings later, he realized that this girl, with her skipping and dancing and twirling, was actually orchestrating movements of the entire playground! There was something about the pattern of movement which translated into a beat — like a silent movie of people dancing. Furthermore, the beat of this playground was familiar! There was a rhythm he had encountered before. He went to a friend who was a rock music aficionado, and the two of them began to search for the beat. It wasn’t long until the friend reached out to a nearby shelf, took down a cassette and slipped it into a tape deck. That was it! It took a while to synchronize the beginning of the film with the recording — a piece of contemporary rock music — but once started, the entire three and a half minutes of the film clip stayed in sync with the taped music! Not a beat or a frame of the film was out of sync!

...When he showed his film to our seminar, however, even though his explanation of what he had done was perfectly lucid, the members of the seminar had difficulty understanding what had actually happened. One school superintendent spoke of the children as “dancing to the music”; another wanted to know if the children were “humming the tune.” They were voicing the commonly held belief that music is something that is “made up” by a composer, who then passes on “his creation” to others, who, in turn, diffuse it to the larger society. The children were moving, but as with the symphony orchestra, some participants’ parts were at times silent. Eventually all participated and all stayed in sync, but the music was in them. They brought it with them to the playground as a part of shared culture. They had been doing that sort of thing all their lives, beginning with the time they synchronized their movements to their mother’s voice even before they were born.

Continued…

[Fireside Chat] Icon designers (Part 2 of 3)

Matt Linderman
Matt Linderman wrote this on 5 comments

[Fireside Chats are round table discussions conducted using Campfire.]

The Chatters
Dave Brasgalla (Icon Factory)
Brian Brasher (Firewheel Design)
Jon Hicks (Hicks Design)
Corey Marion (Icon Factory)
Michael Schmidt (Cuban Council)
Josh Williams (Firewheel Design)
(Moderated by Matt and Jason from 37signals)

Matt
PROCESS: What is your basic method or workflow that you go through to come up with an icon? Tools, approach, etc.
Josh
Years ago, I did most of my icon work in Freehand, copying and pasting the final pieces into Photoshop. I moved to Illustrator about 3 years ago, and have never looked back. I still do some polish work in Photoshop occasionally, but it’s amazing what you can get done in Illustrator completely (secret: Pixel Preview Mode).
Corey
Brainstorm, sketch
Michael
We still do mostly pixel icons, so Photoshop is where it’s at for us – pixel by pixel
Jon
Sketches > Illustrator > Iconbuilder in Photoshop
Brian
All Illustrator. Often, but not always, after sketching.
Corey
yes, we were mostly a Freehand shop as well
Dave
More and more these days, I find myself drawing in a sketchbook.
“More and more these days, I find myself drawing in a sketchbook.”
Josh
I don’t do as much sketching as I used to. Sadly. Unfortunately, there are only so many ways to render "Email"
Brian
Email: a man with an E on his chest.
Brian
And I still use … drumroll … ResEdit!
Jason
ResEdit!!!!!!!!
Josh
Hooray for ResEdit!
Dave
Freehand was wonderful to draw in, but illustrator… not so much
Dave
and that’s been a block for me.
Corey
can’t beat quick pencil sketches to quicky extract ideas form the brain
Jon
I still love using Fireworks, as its pixel/vector tools are lovely
Jason
Reseditsplash
Josh
Jon: have you ever used Illustrator at all?
Jon
Oh yes
Jon
all the time now
Josh
I nearly got fired from my first job when I used ResEdit to change the Trash Can icon in OS 7.
Josh
I deleted a bunch of system resource stuff on accident.
Brian
I hacked a Mac so bad at my former place of employment it was gruesome.
Dave
Plus, I was working almost entirely in Photoshop the past few years
Jon
What do people use to create the final icon?
Dave
Photoshop and Illustrator
Dave
With all this resolution-independent business, it makes sense to hedge your bets.
Corey
Shameless Plug > IconBuilder
Jon
No shame, Iconbuilder is superb
Jon
Illustrator for everything these days
Michael
Can’t stand illustrator – feels extremely clunky. IconBuilder is terrific, though.
Josh
Since most of our work is for the web now, we export most of our artwork straight from Illustrator with Save For Web
Corey
Illustrator > Photoshop > Iconbuilder
Brian
Dave is correct, AI could benefit greatly from some of FreeHand’s drawing capability, but for creating pixel-precise icons AI is suh-weet.
Josh
Iconbuilder is awesome
Dave
My only problem is 5 years worth of Freehand vector files. :-(
Jon
I have an illustrator file set up to match the Iconbuilder expanded grid, thats how it all gets done
Jon
Scale, then tweak
Jon
usually, a LOT of tweaking
Corey
Pretty serious tweaking
Jon
then for 16px, redrawn
Corey
yep
Jon
I usually do 16px as pixel art almost
Dave
I will say this: I miss the old 32×32 pixel-click days.
Dave
.-D
Matt
Some nitty gritty questions: Do you work zoomed in or zoomed out? When scaling and making several versions of the same icon (64×64, 32×32, 16×16) do you scale down the original and then tweak or start mostly from scratch each time?
Brian
Zoomed in to work, view at 100% periodically (the virtual taking a step back from the canvas).
Josh
I just started using the Mac OS’s (10.4.8+) "zoom" feature a lot—it’s faster than using the Zoom tool in Illustrator at times.
Josh
You can set it up under Universal Access to zoom to say 3x with an easy keystroke
Matt
ah, interesting about the zoom feature
Jon
me too Josh
Jon
very useful
Jon
zoom, with smoothing turned off, of course!
Josh
Jon: of course
Corey
two windows in Illustrator or Photoshop
Corey
one at 100% one zoomed
Brian
I usually build every icon at every size. Resizing often makes a mess.
Dave
Keyline mode is often helpful
Brian
Dave’s using FH terms!
Dave
Heh. Recovering Freehander.
Corey
Ah, Freehand
Jon
Illustrator’s ‘Global Colours’ feature is a big help to me
Jon
then if I get the colours wrong, I can change the whole artwork easily
Josh
Tons of folks seem to think that just because we use vectors a lot that it’s all infinitely scalable. It’s not.
“Tons of folks seem to think that just because we use vectors a lot that it’s all infinitely scalable. It’s not.”
Continued…

Design Decisions: "Upload a new version of..." in Basecamp

Matt Linderman
Matt Linderman wrote this on 19 comments

We’re currently working on modernizing the Basecamp interface to bring it closer in line with Highrise. The new screenshots below represent some of the changes we’re making.

If you have a paid Basecamp account, you can upload multiple versions of the same file and keep them grouped together inside the “Files” tab. After a while, we began to feel the “upload a new version” screen wasn’t as clear as it could be though. Here’s what it looks like today:

old way

It was too easy to ignore the file name (“basecamp.mov” in this example). So we made the header clearer. We separated it with a light blue background, used red text to make the key part pop, and shortened the text from “Select a file to upload as a new version of basecamp.mov” to “Upload a new version of basecamp.mov.” The less reading required, the better.

better way

That’s better but the filename kind of blends into the tail of “new versiona..s.df….sa.mov.” Let’s separate them by making the “of” black.

best way

Now the words “new version” and the file name pop. This follows the principle of the smallest effective difference: Whenever you make a mark (label, line, etc.), make it as small as possible, but as small as possible to still be clear. Look for opportunities to maximize value with the smallest possible change.

[Designed] pogoLibrary, tea lights, Heely's, perpetual calendar, and home defibrillator

Matt Linderman
Matt Linderman wrote this on 26 comments

pogoLibrary
pogolibrarypogoLibrary: “Rather than lining your walls with books, the books are the wall. You can’t have too much book space. Period. Goes anywhere. And the five shelves hold all your reading material while touching the ceiling and floor on only four white rubber feet.”

Perpetual calendar
Perpetual calendar: “There are only 7 days a month can start on and only 4 different month lengths (28, 29, 30 and 31 days). So with only 14 double sided inserts all 28 variations are covered.” [via SM]

cal

Home Defibrillator
defribHeartStart Home Defibrillator Complete Kit: “The first over-the-counter home defibrillator guides with calm interactive voice instructions and determines the need for a shock, then advises it only if necessary; also coaches you through CPR.”

Continued…

Design/copy ups and downs at Virb

Matt Linderman
Matt Linderman wrote this on 31 comments

Neat feature at Virb.com: Click the lightbulb at a video screen and the “lights” go off. The screen fades to black and leaves just a trace of the text that was there before.

lights on

lights off

The signup page also has a cool UI feature: Click the whole bar to select a radio button and and the form underneath changes to match that item.

signup

signup

While there’s lots of nice design stuff going on at Virb, the copywriting leaves a bit to be desired. Specifically: Good luck trying to figure out what the site does if you’re a newbie.

Continued…