Entries tagged “redesign.”

Lucky number fourteen

When I first learned to make websites, design didn’t even cross my mind. I made it up as I went along, writing HTML in a stream of consciousness. Like a kid playing with Legos, these seemingly limited building blocks let me rapidly express the impulses of my imagination.

Eventually, that playfulness is forced to contend with “real world” concerns. We become more sophisticated, involuntarily defining our trademark sensibilities based on whatever details we’re drawn to. We learn to appraise the success of our work in the hands of the user, our subjectivity waning as our experience deepens. We adopt creative processes so that we’ll be more reliable and prolific. If we’re smart, we change them often.

I had dinner the other night with Erik Jung, a designer I work with who I’ve known since college. We talked about all that’s changed in just a few short years, particularly how exhaustive our visual design process used to be. Every detail of every page would be rendered in Photoshop before a single line of HTML was written. The goal was always “pixel perfection.”

Perhaps arrogantly, and often in defiance of our aspirations, we treated our browsers like printed pages. We celebrated our progress as we widened our minimum design widths from 750 pixels to 960. Websites were often judged on their consistency browser-to-browser.

We were way off. The “purity” of our designs was a distraction. The web is most beautiful when it tolerates the diversity of its audience more than the whims of its creator.

This redesign is the first public iteration of my effort to embrace that fluidity. It was designed almost entirely in-browser. It uses CSS media queries to respond to different resolutions. Visual touches that rely on certain browser capabilities have not been suppressed for the sake of consistency. Internet Explorer 6 is no longer supported. Sections have been trimmed, consolidated and simplified, and font sizes have been boosted to promote readability.

I’m sure I’ve gotten some stuff wrong. Mobile First arrived in the mail a couple of weeks ago, and I very nearly halted progress to re-factor everything (again). Luckily, I was in the middle of Walter Isaacson’s Steve Jobs biography at the time, so the “real artists ship” mantra ended up winning out.

The truth is, it will never be perfect… the web moves too quickly for that. Our assumptions will always misfire. All we can do is observe, iterate and learn.

I think playfulness is making a comeback.

Firefox’s New Spin

Given how often I write about iconography here, I would be remiss if I didn’t mention the subtle Firefox icon redesign that’s been introduced in the recent 3.5 Release Candidate. The new icon comes courtesy of Anthony Piraino of the IconFactory and is based on the previous icon by John Hicks.

ffox_before-after

firefox-32I was initially a bit put off by the little bits of fur going around the globe, which to me unnecessarily break up the eye-pleasing circular shape. But then I saw the smaller variations (48 square pixels at right), and I’m really impressed with the way the newfound flecks of blue reinforce the sphere when the level of detail is reduced. I also enjoy the new sweeping strokes in the fur (reminiscent of Adam Betts’ variation) and the re-treated globe.

Overall, this is a solid icon progression that increases the dimensionality and contrast without sacrificing recognition and consistency. Thanks to WordPress contributor @Viper007Bond for pointing it out to me.