63 posts tagged design

2013

Things were getting dusty with a faint hint of adaptive grid moldiness around here, so I finally took the plunge and retooled the design with the goal of moving to a fluid-grid responsive design focused on readability and large photo display.

We’re still coming to you live from Tumblr’s AWS servers, with static files served from my own S3 bucket. I toyed with the idea of moving over to Wordpress, but the cost-benefit analysis doesn’t add up for me. I love not having to maintain a server running MySQL, and Tumblr seems to have hit their stride on the uptime issues which have all but disappeared in the last year. No, I don’t have a copy of my blog’s data in a structured format, but I am backing up content to Dropbox via IFTTT in case of catastrophic data loss. Creating a new Tumblr theme from scratch was cake with Dave Santos’ Tumblr Boilerplate to establish a solid baseline of all the various content types.

The old layout was built on top of Dave Gamache’s great Skeleton grid and typography package. The new design abandons Skeleton in favor of a frankenstein monster of Bootstrap’s typography and mixins package and Zurb Foundation’s fluid grid. Bootstrap’s grid is solid, but the Zurb tool is slightly more robust with discrete mobile grid assignments and push/pull offsets. I opted to use LESS for preprocessing, which means the Foundation grid is included as pure CSS instead of the SASS component from the Foundation package. The LESS files are authored in Sublime Text and compiled with the LESS-build package before being shipped off to S3.

Body copy is set in Freight Text Pro and most everything else is Freight Sans Pro. Fonts are served by Typekit.

Visually, this is the most minimal design I’ve ever deployed on the site. Type-driven and stripped-down may be the flavor of the month, but I feel strongly that it’s the right toolkit for the mix of content the site has historically seen. Here’s hoping an uncluttered palette will be the catalyst for more and better content on the blog going forward.

The New York Times has graciously provided us a great test case for the long-running discussion of vertical scrolling versus horizontal paging in digital reading experiences.

To my eyes there is no contest. The comfortable measure and web-native vertical scroll behavior of the web app is far superior to the app store multiple-column layout from an ease-of-reading perspective.

Which experience do you prefer?

The New York Times has graciously provided us a great test case for the long-running discussion of vertical scrolling versus horizontal paging in digital reading experiences. To my eyes there is no contest. The comfortable measure and web-native vertical scroll behavior of the web app is far superior to the app store multiple-column layout from an ease-of-reading perspective. Which experience do you prefer? The New York Times has graciously provided us a great test case for the long-running discussion of vertical scrolling versus horizontal paging in digital reading experiences. To my eyes there is no contest. The comfortable measure and web-native vertical scroll behavior of the web app is far superior to the app store multiple-column layout from an ease-of-reading perspective. Which experience do you prefer?

When Craigslist Blocks Innovations

Nick Bilton:

So why hasn’t anyone managed to unseat Craigslist, a site that has barely changed in close to two decades?

It has dug an effective moat by cultivating an exaggerated image of “doing good” that keeps its customers loyal, while behind the scenes, it bullies any rivals that come near and it stifles innovation.

This is a great read that touched on a lot of questions I’ve had about the legality of Padmapper’s relationship to Craigslist, and I’m glad to see somebody call a spade a spade with regard to Craigslist’s bullying tactics.

How long can Craigslist defend their incumbent position through legal threats while refusing to improve their UX?

New New Rdio

Below are the collected reactions of some of my favorite designers and developers to Rdio’s second web and desktop UI refresh in three months.

Read More

chartsnthings: Shan Carter (and an army of others) share some sketches from the NYT electoral map

Kevin Quealy :

…no one was really super thrilled with maps as the main conduit for the analysis. Instead, they decided on minimizing the geography and using “bins” for states. (Shan has sort of been obsessed with “bins” since 2008, when his dream of having states magically fall into buckets on election night ultimately didn’t pan out. I personally had to cheer him up after that and it was not pretty.)

Here is another great reminder for map-happy news nerds that sometimes the important patterns of a story are not really geographic in a way that is best conveyed through a choropleth or proportional symbol map. This graphic is brilliant and the process behind it is well worth your time.

(via drewvigal)

Paper has been hyped to me by multiple extremely smart, extremely talented folks at NPR, but I remained skeptical given my utter uselessness with at least three other drawing apps I’ve tried on iPad so far. I’ve come around after spending some time with it this afternoon. Paper removes the paralysis of choice Adobe Ideas gave me with infinite brush size and color combinations while retaining just enough stroke variations to effectively translate the travel of a Wacom Bamboo stylus into UI sketches that don’t make me feel like I am a total fraud. If you’ve been frustrated by the results other iPad drawing apps have yielded, I highly recommend you give tablet sketching another try with Paper.

Paper has been hyped to me by multiple extremely smart, extremely talented folks at NPR, but I remained skeptical given my utter uselessness with at least three other drawing apps I’ve tried on iPad so far.

I’ve come around after spending some time with it this afternoon. Paper removes the paralysis of choice Adobe Ideas gave me with infinite brush size and color combinations while retaining just enough stroke variations to effectively translate the travel of a Wacom Bamboo stylus into UI sketches that don’t make me feel like I am a total fraud.

If you’ve been frustrated by the results other iPad drawing apps have yielded, I highly recommend you give tablet sketching another try with Paper.

Nielsen is wrong on mobile

Josh Clark (emphasis mine):

Mobile isn’t just ‘mobile’. It’s also the couch, the kitchen, the three-hour layover, all places where we have time and attention to spare. 42 per cent of mobile users say they use it for entertainment when they’re bored. Those aren’t 10-second sessions. That means we shouldn’t design only for stunted sessions or limited use cases.

Say it over and over until you’ve exorcised the mental image of your user typing furiously on her iPhone as she frantically runs down a crowded sidewalk, looking for her next 10-second morsel of information. That user undoubtedly exists, but we have to stop assuming this is the only mobile use case.

Skeuomorphs? We don’t need no stinking skeuomorphs… Propellerhead’s deceptively simple new music creation app Figure takes a very different tack than Apple’s GarageBand in its approach to synth UI. While there is much to appreciate in GarageBand’s expansive capabilities, I have often felt that the team erred on the side of aesthetics at the expense of usability. The primary offender in this category is their implementation of physical knob skeuomorphs, which are a constant source of frustration for me. Figure, on the other hand, gives us subtle visual cues to the “knobs” controlling the rhythm of each piece of the drum machine without a dogmatic adherence to the physical behavior of a knob. The Figure knobs are delightfully simple to manipulate by dragging up and down, and the knob expands to make the rhythmic value visible while manipulating the control. This is beautiful work that I hope Apple’s designers will take note of.

Skeuomorphs? We don’t need no stinking skeuomorphs…

Propellerhead’s deceptively simple new music creation app Figure takes a very different tack than Apple’s GarageBand in its approach to synth UI. While there is much to appreciate in GarageBand’s expansive capabilities, I have often felt that the team erred on the side of aesthetics at the expense of usability. The primary offender in this category is their implementation of physical knob skeuomorphs, which are a constant source of frustration for me.

Figure, on the other hand, gives us subtle visual cues to the “knobs” controlling the rhythm of each piece of the drum machine without a dogmatic adherence to the physical behavior of a knob. The Figure knobs are delightfully simple to manipulate by dragging up and down, and the knob expands to make the rhythmic value visible while manipulating the control.

This is beautiful work that I hope Apple’s designers will take note of.

Great, Another Bootstrap Site

Paul Scrivens:

If you have done your time and learned design or coding, then frameworks offer you a great way to take some shortcuts, but only because you know how to tweak your way through them when things get rough. If you are using Bootstrap to quickly get a site out the door, I understand the importance of launching fast and early, but spend a couple of hours making sure your site doesn’t look like the thousand other Bootstrap sites out there.

Nailed it. Bootstrap is an incredible tool that is easily abused by those who see it as a theme. Don’t look at Bootstrap as a coat of paint to slap haphazardly onto your site. See it as a power sprayer that will let you blast through some of the solved problems of front-end code organization so you can focus on the details of the interface.

Fonts In Use: BostonGlobe.com

Stephen Coles:

Despite the emphasis on maintaining the newspaper’s identity, BostonGlobe.com is not merely a skeuomorphic replication of the printed paper. Font sizes, column widths, and navigation are informed by best practices in digital media, and specifically “responsive” design, resizing and repositioning text and images for optimal viewing at any window size. Not every window width results in a beautiful page, but overall it’s a much better and more consistent experience from the big screen to the iPhone than most digital newspapers today.

The calculus of brand consistency vs. page weight is critical in making decisions about typography on the web, particularly for a responsive site that will see significant mobile browser use.

This is as complex a case study as you’ll find on the subject, and the insight from Miranda Mulligan, Upstatement and Filament Group is invaluable.