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.
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’.”
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 box score
Check out San Antonio veteran Robert Horry’s line from this NBA game (it’s since been modified).
Got an interesting link, story, or screenshot for Signal vs. Noise? Contact svn [at] 37signals [dot] com.
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).
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 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…
The Getting Real translation project is making progress. Recently completed: Japanese and Russian versions (Russian shown below). There are also complete (or nearly complete) translations in French, Italian, Portuguese, and Spanish. Other languages are in progress. If you’d like to help, get in touch. Thanks again to all our volunteer translators.
“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…
Cover art by Mingering Mike (book at Amazon), imaginary soul superstar from the ‘70s.
Continued…
[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 |
|
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…
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:
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.
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.
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.
pogoLibrary
pogoLibrary: “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]
Home Defibrillator
HeartStart 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…
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.
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.
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…