Tag Archive for 'design'

Frank Chimero: Horizontalism and Readability

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

We take scrolling for grant­ed 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­al­ly con­sid­er scrolling as part of a con­tin­u­um of solu­tions in solv­ing the same prob­lem.

This dove­tails nice­ly with Rex’s think­ing in his Medi­aite design. But the real game chang­er is the arrival of the iPad. As we move away from the mouse point­er and scroll wheel, design­ers should revis­it old assump­tions, and embrace the hor­i­zon­tal.

Life Below ‘The Fold’

Irish design­er Pad­dy Don­nel­ly, in a nice­ly-designed arti­cle, attempts to sub­vert the accept­ed 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­ate­ly a ‘ball and chain’ of web design) with web design­ers blind­ly obey­ing with­out ques­tion…

If every­thing of excep­tion­al qual­i­ty is pushed upon the read­er 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­i­ty dimin­ish­es 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 design­ers.

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

Actual Objects

Actu­al Objects pro­vides ele­gant roy­al­ty-free (and rea­son­ably priced) design and illus­tra­tion assets by Matt Owens and the Ath­let­ics crew, here in Brook­lyn.

Royalty-Free Illustration from actualobjects.com

Screen shot on Flickr

My tal­ent­ed col­league Jason Bish­op worked togeth­er with Matt on the eco­nom­ic bailout col­lec­tion, seen above, and two oth­er sets. The two have pre­vi­ous­ly col­lab­o­rat­ed 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­cis­co called The Bold Ital­ic. (No, not that bold ital­ic…)

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 real­ly love this stuff, hope­ful­ly 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 arti­cle-lev­el, as opposed to just design­ing tem­plates and frame­works. Maybe this gets us an inch clos­er to that goal.

Buttermilk’ Font, From Jessica Hische

‘Buttermilk’ Font, From Jessica Hische
Buttermilk’, from Jessica Hische.

Illustrator/Designer Jes­si­ca 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­cial­ly beau­ti­ful, and she promis­es a “huge array of lig­a­tures to help you set it beau­ti­ful­ly and eas­i­ly.”

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

Ghost in the Machine: The Clash

Ghost in the Machine: The Clash

London Calling, cassette tape on canvas, 2009 — By Erika Iris Simmons

Two things that I real­ly love about this illus­tra­tion by Eri­ka Iris Sim­mons:

  1. It’s the icon­ic image from the cov­er 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 Lib­er­al-lean­ing pol­i­tics blog. Be sure to watch the video demo of the ajaxy front page CMS edi­tor.

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 hot­tness.

I just sent the tweet above a few min­utes ago, but want­ed 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 Face­book-style fixed nav bar, at the bot­tom:

new MoMA.org

The new MoMA.org, with its fixed navigation bar.

Con­tin­ue 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 fund­ed by the eco­nom­ic stim­u­lus pack­age, FDR style. Pres­i­dent Oba­ma 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­o­my back on the road of recov­ery.

One won­ders if the Oba­ma team is going to rebrand the entire Fed­er­al 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 fan­cy 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 quick­ly.

Michael is a part­ner at Pen­ta­gram, and blogs reg­u­lar­ly at Design Observ­er.

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­ti­ty is gone, but as Jason San­ta Maria points out, the design­ers went instead with two oth­er type­faces from the same foundry: Whit­ney and Hoe­fler Text.

Anoth­er 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 icon­ic 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 sto­ry head­lined Design Loves a Depres­sion that the recent eco­nom­ic slow­down will force design­ers to eschew nov­el­ty and the imprac­ti­cal, and focus more on the “intel­li­gent rework­ing of cur­rent con­di­tions”:

Design tends to thrive in hard times. In the scarci­ty of the 1940s, Charles and Ray Eames pro­duced fur­ni­ture and oth­er 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 real­ly well is work with­in con­straints, work with what they have,” said Pao­la Antonel­li, senior cura­tor of archi­tec­ture and design at the Muse­um of Mod­ern Art. “This might be the time when design­ers can real­ly do their job, and do it in a human­is­tic spir­it.”

Relat­ed: Design­ing Through the Reces­sion, by design­er Michael Bierut

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

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-spir­it­ed, and it demands a response.

…quite a pro­vok­ing dis­cus­sion.

Image courtesy of The Museum of Modern 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 recent­ly updat­ed their team iden­ti­ty 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­ma­ry road jer­seys.

Armin Vit most­ly 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­at­ed with it. None. No “Boston.” No “Red Sox.” If that’s the case, this is one of the best cas­es of visu­al iden­ti­ty and brand equi­ty becom­ing so strong the icon doesn’t need expla­na­tion. They are sox. They are red. They can not be any­thing oth­er than the Boston Red Sox.

Illustration courtesy of Boston.com

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

TIME Person of The Year 2008 Cover
Shepard Fairey’s cover for TIME.

Time.com has a nice video inter­view with Shep­ard Fairey, design­er of the HOPE and PROGRESS posters of Barack Oba­ma that were near­ly ubiq­ui­tous dur­ing the ’08 pres­i­den­tial cam­paign. Time Mag­a­zine named the Pres­i­dent-Elect Per­son of the Year 2008, so it seemed only nat­ur­al to hire Fairey to do the cov­er.

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

Via Sean

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

The Most­ly True Sto­ry of Hel­veti­ca and the New York City Sub­way:

There is a com­mon­ly held belief that Hel­veti­ca is the sig­nage type­face of the New York City sub­way sys­tem, a belief rein­forced by Hel­veti­ca, 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­veti­ca 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­tion­al when it cre­at­ed a new sig­nage sys­tem at the end of the 1960s.

r-train
R-train icon, set in Helvetica and Standard.

I noticed this dis­crep­an­cy ear­li­er 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­veti­ca “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 sig­nage.

Enter typog­ra­ph­er 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­veti­ca, with­out mod­i­fi­ca­tions? Ever curi­ous as to the process by which enam­el signs are made? Want to just look at pret­ty pic­tures of sub­way signs over the years?

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

This Election’s Poster Child

Design crit­ic Steven Heller looks at poster design this pres­i­den­tial elec­tion cycle, and the unprece­dent­ed out­pour­ing of sup­port for Sen­a­tor Barack Oba­ma:

So, do these posters have any impact on vot­ers? Not the spe­cif­ic images or mes­sages but cumu­la­tive­ly 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­son­al 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 Oba­ma.

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 com­ic… not just street art any more.

Mad Men, Mad Props

Mad Men is such an enjoy­able show – but, type­face design­er 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­to­ry of typog­ra­phy?

The Measure of a President

The Times has an inter­est­ing (if not com­plete­ly point­less) info­graph­ic on pres­i­den­tial height and weight, in recent his­to­ry. I like that the sil­hou­ettes are all most­ly rec­og­niz­able – Jim­my Carter’s smile, Har­ry Truman’s spec­ta­cles and William Howard Taft’s bel­ly… fun­ny.

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

Invitation design for our party, Thursday night.

I couldn’t resist – Lisa and I are host­ing a V.P. Debate par­ty 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­mal­ly large teeth.

The result is kind of awk­ward but fun. It looks like an elon­gat­ed John Ker­ry-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 Emi­ly point­ed out a rather obvi­ous spelling mis­take in the design above. Can you find it?

Subtraction 7.1 Beta

Khoi Vinh recent­ly 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 fold­ed-in with longer form entries, cre­at­ing a nice chrono­log­i­cal flow. Also, he cre­at­ed tem­plates for pho­to 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 some­thing.

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 oth­er 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 homepage of time.com, the website of Time Magazine.

Time Mag­a­zine start­ed rolling out a redesign of time.com yes­ter­day – it was designed by my friend and for­mer col­league Sean Vil­lafran­ca, who left our group at the Times ear­li­er 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 Ari­al 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 back­ground.)

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

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 oth­er 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­i­ty. 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­al­ly see­ing every­thing else (empha­sis added).

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