Tag Archive for 'design'

Frank Chimero: Horizontalism and Readability

Illustrator/Designer Frank Chimero chal­lenges the “ver­ti­cal scroll”:

We take scrolling for granted today. It’s like run­ning water or Friends reruns: they’ve always been there and they always will be there. And we like them well enough. But, it is an inter­est­ing men­tal exer­cise to actu­ally con­sider scrolling as part of a con­tin­uum of solu­tions in solv­ing the same problem.

This dove­tails nicely with Rex’s think­ing in his Medi­aite design. But the real game changer is the arrival of the iPad. As we move away from the mouse pointer and scroll wheel, design­ers should revisit old assump­tions, and embrace the horizontal.

Life Below ‘The Fold’

Irish designer Paddy Don­nelly, in a nicely-designed arti­cle, attempts to sub­vert the accepted wis­dom of the page fold:

The fold is one of those guide­lines that has been thrown about so much that it’s now become a ‘rule’ of web design (or maybe more appro­pri­ately a ‘ball and chain’ of web design) with web design­ers blindly obey­ing with­out question…

If every­thing of excep­tional qual­ity is pushed upon the reader at the begin­ning, once they start explor­ing and the rest of the site isn’t of the same cal­i­bre, they’re going to be let down.

I agree—scroll below the fold on most large-scale web sites, and the qual­ity dimin­ishes as you move down the page. I don’t know if that’s because too much atten­tion is paid to ‘the fold’ myth, or because most web sites have a ver­ti­cal up-and-down ‘rail’ struc­ture… or, if we’re just bad designers.

Peo­ple scroll. Peo­ple read left-to-right. We should design for these rules.

Actual Objects

Actual Objects pro­vides ele­gant royalty-free (and rea­son­ably priced) design and illus­tra­tion assets by Matt Owens and the Ath­let­ics crew, here in Brooklyn.

Royalty-Free Illustration from actualobjects.com

Screen shot on Flickr

My tal­ented col­league Jason Bishop worked together with Matt on the eco­nomic bailout col­lec­tion, seen above, and two other sets. The two have pre­vi­ously col­lab­o­rated for some of the great info­graph­ics in GOOD Mag­a­zine.

New Capndesign.com

I love Matt Jacob’s just launched redesign. Bright and fresh, with cool jquery charts, archives that mashup pho­tos and posts, and some Type­kit.

New Capndesign.com

Screen shot

Con­grats, Matt! If only things didn’t look so stale around here.

The Bold Italic

Jason Kot­tke just linked to an inter­est­ing design tid­bit – the launch of a web mag­a­zine in San Fran­cisco called The Bold Italic. (No, not that bold italic…)

We’ve seen some small-scale exam­ples of art direc­tion on the web, but this seems to me to be some­thing in the ‘medium’-scale range – I really love this stuff, hope­fully they can keep it fresh.

Also, I can’t wait for the day when ad bud­gets and tools are at the point where design­ers can art direct on the article-level, as opposed to just design­ing tem­plates and frame­works. Maybe this gets us an inch closer to that goal.

Buttermilk’ Font, From Jessica Hische

‘Buttermilk’ Font, From Jessica Hische

‘But­ter­milk’, from Jes­sica Hische.

Illustrator/Designer Jes­sica His­che released her first type­face today, and it looks gor­geous. But­ter­milk is a “bold script that would be just per­fect for mag­a­zine head­lines, book title type, hol­i­day cards, ini­tial caps, you name it.”

The numer­als are espe­cially beau­ti­ful, and she promises a “huge array of lig­a­tures to help you set it beau­ti­fully and easily.”

I worked with Jes­sica last fall on a nice retro logo for the Pogue-o-matic. Be sure to check out Jessica’s work, (I’m par­tic­u­larly fond of her let­ter­press stuff.)

Ghost in the Machine: The Clash

Ghost in the Machine: The Clash

Lon­don Call­ing, cas­sette tape on can­vas, 2009 — By Erika Iris Simmons

Two things that I really love about this illus­tra­tion by Erika Iris Sim­mons:

  1. It’s the iconic image from the cover of The Clash’s mas­ter­piece Lon­don Call­ing.
  2. It’s ren­dered with casette tape!

View it at the largest size to see the detail.

Al Shaw on Redesigning the Front Page of Talking Points Memo

On Redesign­ing the Front Page of Talk­ing Points Memo »
Al Shaw talks about some of the design con­sid­er­a­tions and tech­ni­cal wiz­ardry that went into the face lift of the Liberal-leaning pol­i­tics blog. Be sure to watch the video demo of the ajaxy front page CMS editor.

A New MoMA.org

Ned­ward is dig­ging into the new MoMA.org… so far, very intrigu­ing. Fixed nav bars are the new hottness.

I just sent the tweet above a few min­utes ago, but wanted to post some more con­text about it here. MoMA launched a revamped web site today, with a lot of hook-ins to social net­work­ing sites like Flickr, Twit­ter, YouTube, Face­book, etc. But, one of the more com­pelling changes is the addi­tion of a Facebook-style fixed nav bar, at the bottom:

new MoMA.org

The new MoMA.org, with its fixed nav­i­ga­tion bar.

Con­tinue read­ing ‘A New MoMA.org’

President Obama Unveils New Stimulus Logos

The stim­u­lus pack­age is now law, so there are going to be a lot of pub­lic works projects in need of a logo, right?

Yes­ter­day, the pres­i­dent unveiled 2 such logos – designed by Mode, Aaron Draplin and Chris Glass. The logos will be stamped on pub­lic works funded by the eco­nomic stim­u­lus pack­age, FDR style. Pres­i­dent Obama said that its intent was to remind Amer­i­cans that:

When you see them on projects that your tax dol­lars made pos­si­ble, let it be a reminder that our gov­ern­ment – your gov­ern­ment – is doing its part to put the econ­omy back on the road of recovery.

One won­ders if the Obama team is going to rebrand the entire Fed­eral gov­ern­ment, one agency at a time.

Michael Bierut on the Move from the “Drawing Board to the Desktop”

From Michael Bierut’s piece in the Times this week­end, Draw­ing Board to the Desk­top: A Designer’s Path:

All of us assumed that these machines [com­put­ers] were just fancy hybrids of type­writ­ers and cal­cu­la­tors. We did all the art­work with rub­ber cement, col­ored paper and paint. We had no idea, but we were look­ing at the begin­ning of the end, and the end came quickly.

Michael is a part­ner at Pen­ta­gram, and blogs reg­u­larly at Design Observer.

A New Whitehouse.gov, and New Typefaces

As of noon today, we have a new pres­i­dent, as well as a new WhiteHouse.gov. The much-admired, Gotham–based typo­graph­i­cal iden­tity is gone, but as Jason Santa Maria points out, the design­ers went instead with two other type­faces from the same foundry: Whit­ney and Hoe­fler Text.

Another major redesign this week also involved the use of Whit­ney: kottke.org – though you’ll need to have the font installed on your machine in order to see it.

Which begs the ques­tion, Is Whit­ney the new Gotham? (Seems like just yes­ter­day we were ask­ing, Is Gotham the New Inter­state?)

Hoefler+Frere-Jones is on a roll.

Obamicon.Me

Make your own Obam­i­con:

Your image in a style inspired by Shep­ard Fairey’s iconic poster. Regard­less of your can­di­date of choice in the 2008 elec­tion, here’s your chance to sound-off.

From the folks at Paste, via Sean.

Design Loves a Depression

Vermelha Chair

This past week­end, The New York Times Week in Review argues in a story head­lined Design Loves a Depres­sion that the recent eco­nomic slow­down will force design­ers to eschew nov­elty and the imprac­ti­cal, and focus more on the “intel­li­gent rework­ing of cur­rent conditions”:

Design tends to thrive in hard times. In the scarcity of the 1940s, Charles and Ray Eames pro­duced fur­ni­ture and other prod­ucts of endur­ing appeal from cheap mate­ri­als like plas­tic, resin and ply­wood, and Ital­ian design flow­ered in the after­math of World War II.

Will today’s design­ers rise to the occa­sion? “What design­ers do really well is work within con­straints, work with what they have,” said Paola Antonelli, senior cura­tor of archi­tec­ture and design at the Museum of Mod­ern Art. “This might be the time when design­ers can really do their job, and do it in a human­is­tic spirit.”

Related: Design­ing Through the Reces­sion, by designer Michael Bierut

UPDATE: Mur­ray Moss takes the WIR to task in a piece today on Design Observer:

Design loves a depres­sion? I can assure you that design, along with paint­ing, sculp­ture, pho­tog­ra­phy, music, dance, fash­ion, the culi­nary arts, archi­tec­ture, and the­atre, loves a depres­sion no more than it loves a war, a flood, or a plague. Michael Cannell’s arti­cle is regres­sive and mean-spirited, and it demands a response.

…quite a pro­vok­ing discussion.

Image cour­tesy of The Museum of Mod­ern Art, New York.

A New Pair of Sox for the Red Sox

New Red Sox Identities

This design link is near and dear to my heart – The Boston Red Sox recently updated their team iden­tity and uni­forms. Over­all, I think it’s a pos­i­tive evo­lu­tion, though seems a bit nos­tol­gic. I love the gray pri­mary road jer­seys.

Armin Vit mostly likes what he sees:

Replac­ing the old seal as the team’s offi­cial logo is the lone pair of red, hang­ing sox. Unless I’m wrong, there is no typog­ra­phy asso­ci­ated with it. None. No “Boston.” No “Red Sox.” If that’s the case, this is one of the best cases of visual iden­tity and brand equity becom­ing so strong the icon doesn’t need expla­na­tion. They are sox. They are red. They can not be any­thing other than the Boston Red Sox.

Illus­tra­tion cour­tesy of Boston.com

Icon-maker Shepard Fairey — Person of the Year 2008 — TIME

TIME Person of The Year 2008 Cover

Shep­ard Fairey’s cover for TIME.

Time.com has a nice video inter­view with Shep­ard Fairey, designer of the HOPE and PROGRESS posters of Barack Obama that were nearly ubiq­ui­tous dur­ing the ’08 pres­i­den­tial cam­paign. Time Mag­a­zine named the President-Elect Per­son of the Year 2008, so it seemed only nat­ural to hire Fairey to do the cover.

In the video, he shows the process used to cre­ate the piece – tech­niques learned from his days as a screen printer.

Via Sean

The Mostly True Story of Helvetica and the New York City Subway

The Mostly True Story of Hel­vetica and the New York City Subway:

There is a com­monly held belief that Hel­vetica is the sig­nage type­face of the New York City sub­way sys­tem, a belief rein­forced by Hel­vetica, Gary Hustwit’s pop­u­lar 2007 doc­u­men­tary about the type­face. But it is not true—or rather, it is only some­what true. Hel­vetica is the offi­cial type­face of the MTA today, but it was not the type­face spec­i­fied by Uni­mark Inter­na­tional when it cre­ated a new sig­nage sys­tem at the end of the 1960s.

r-train

R-train icon, set in Hel­vetica and Standard.

I noticed this dis­crep­ancy ear­lier this year – I had to recre­ate some MTA sub­way icons for use on a project, and noticed that the R train map icon looked noth­ing like the Hel­vetica “R”. The MTA’s own web­site seems to be con­fused about the type used in the sys­tem icons, let alone its sta­tion signage.

Enter typog­ra­pher Paul Shaw, and his 10,000+ word piece on AIGA’s site. Did you now that Boston’s sub­way sig­nage sys­tem was the first to use Hel­vetica, with­out mod­i­fi­ca­tions? Ever curi­ous as to the process by which enamel signs are made? Want to just look at pretty pic­tures of sub­way signs over the years?

It’s a great his­tory, for fans of typog­ra­phy and the MTA.

This Election’s Poster Child

Design critic Steven Heller looks at poster design this pres­i­den­tial elec­tion cycle, and the unprece­dented out­pour­ing of sup­port for Sen­a­tor Barack Obama:

So, do these posters have any impact on vot­ers? Not the spe­cific images or mes­sages but cumu­la­tively they are a grass­roots effort that excite through the show of col­lec­tive sup­port. What’s more, posters often appeal to per­sonal needs and emo­tions, not all rouse in the same way for every­one. Hav­ing many options allows par­ti­sans to engage as they choose. This show of sup­port goes in the plus col­umn for Barack Obama.

Take a walk down Smith Street in Brook­lyn, and you’ll see Shep­ard Fairey’s poster in many shop win­dows – it’s almost comic… not just street art any more.

Mad Men, Mad Props

Mad Men is such an enjoy­able show – but, type­face designer Mark Simon­son takes Mad Men’s prop mas­ters to task for their typog­ra­phy sins.

None of these mis­steps occurred to me when watch­ing, so maybe I need to brush up on my his­tory of typography?

The Measure of a President

The Times has an inter­est­ing (if not com­pletely point­less) info­graphic on pres­i­den­tial height and weight, in recent his­tory. I like that the sil­hou­ettes are all mostly rec­og­niz­able – Jimmy Carter’s smile, Harry Truman’s spec­ta­cles and William Howard Taft’s belly… funny.

It was done by Scott Stowell’s design stu­dio, Open N.Y., the peo­ple who design GOOD Mag­a­zine.

Beehive vs. Chompers: V.P. Debate Party

V.P. Debate Party

Invi­ta­tion design for our party, Thurs­day night.

I couldn’t resist – Lisa and I are host­ing a V.P. Debate party this Thurs­day night, so I whipped this invite up. The idea was to play up two of the more strik­ing ele­ments of the can­di­dates’ appear­ance: Sarah Palin’s bee­hive and eye­wear, and Joe Biden’s abnor­mally large teeth.

The result is kind of awk­ward but fun. It looks like an elon­gated John Kerry-sized head, but it’s not worth fuss­ing with the pro­por­tions at this point. Just go with it… I did.

UPDATE: The always charm­ing Emily pointed out a rather obvi­ous spelling mis­take in the design above. Can you find it?

Subtraction 7.1 Beta

Khoi Vinh recently realigned his blog, Subtraction.com, con­vert­ing the back-end from Mov­able Type to Expres­sion Engine. (Full dis­clo­sure: Khoi is my boss.)

There are a few new tweaks to the famil­iar design, the most notice­able being the link roll folded-in with longer form entries, cre­at­ing a nice chrono­log­i­cal flow. Also, he cre­ated tem­plates for photo posts.

No More Pink Grid Bars

Quick admin note: I removed the gridlayouts.com javascript from this site, so you should not see the pink bars appear­ing when you’re typ­ing a com­ment or search­ing for something.

The Javascript was only sup­posed to tog­gle the pink grid bars when the user hits ctrl+shift+G – but it must have inter­fered with some other ajaxy stuff, because it was tog­gling with only the G key. So, it’s been removed – and I added a screen­shot of what it looked like to my orig­i­nal post about the redesign.

That is all.

Time.com Redesign

New Time.com

New design for the home­page of time.com, the web­site of Time Magazine.

Time Mag­a­zine started rolling out a redesign of time.com yes­ter­day – it was designed by my friend and for­mer col­league Sean Vil­lafranca, who left our group at the Times ear­lier this year to become the Design Direc­tor for time.com.

It strikes me as a wel­come depar­ture from its pre­vi­ous CNN–esque iter­a­tion, and a lit­tle more faith­ful to the print design. I like the use of Arial Black, and the dar­ing use of the TIME word­mark on the white back­ground. (Dar­ing because it would’ve been far more pre­dictable to use the word­mark reversed on a red background.)

They seem to have only rolled-out the home page and the arti­cle pages at this point – sec­tion fronts still show the legacy design. But on the whole, it’s a very good improve­ment to a very good news resource – just in time for the gen­eral elec­tion season.

ALSO – A few birdies tell me to expect some major design changes to wsj.com today or tues­day, com­ing hot-off-the-heels of their mag­a­zine launch this month. Yes, we’ve heard this before, but there are some pre­view screen­shots out there. Stay Tuned!

The Fold”

Chris Fahey on “the fold”:

In fact, we should start think­ing of “the fold” as some­thing other than a hard line with an “above” and “below” por­tion, and we should stop think­ing of the ver­ti­cal posi­tion­ing on a page as equiv­a­lent to pri­or­ity. Scrolling up and down through a web page is a fun­da­men­tal aspect of the web user expe­ri­ence, and there is much more to it than sim­ply see­ing what’s on top and then grad­u­ally see­ing every­thing else (empha­sis added).

I have no doubt that this is increas­ingly true, but won­der why ads are con­sis­tently placed “above the fold”. Is this just a rem­nant of this older think­ing, or do they per­form sig­nif­i­cantly bet­ter there?