The 4 Pixel Rhythm – A simplified approach to designing everything

The 4 Pixel Rhythm - A simplified approach to designing everything

I was doing some client work last night which involved working with Facebook’s new Timeline design. I hadn’t really put a lot of thought into the pixel perfection of the design, but this project had me measuring. Come to find out that the big hero image at the top of the Timeline is 849px wide. Not 848, not 850, but 849px wide. In all honesty, there’s nothing wrong with this fact, but it does happen to go against the way I deign for the web, and this may be the fault of a developer, not of a designer. Though, if it isn’t designed to spec, then it’s the designers fault for not making the developer build it right.

Anyhow, since I started working at Disney nearly almost 10 months ago I’ve learned a whole lot of new tricks, though one in particular is something that I’ve begun to practice religiously. It’s called the 4 pixel rhythm, an idea created by Aen Tan which was meant as a solution to designing for iOS. You can read all about his idea in a post he wrote by clicking here. I was truly inspired by this article, and really started taking these ideas to heart.

At Disney we’re certainly trying to think tablet and mobile first, though you wouldn’t know it by looking at any of the current sites. Hold tight, we’ve got some amazing things coming. So the 4-pixel rhythm began as an experiment, to see if we did everything in multiples of 4 would the designs essentially make themselves? For the most part, the answer has been a resounding yes.

To start with, you have 3 main canvas widths when dealing with the web – 960 for desktop, 2048 for iPad, and 640 for iPhone. All are divisible by 4, so we’re on to something. Then you can begin breaking up your columns into 4 pixel widths, and you start seeing a pattern there as well. Once you begin to start putting in gutters and finessing spacing of objects, your choices become limited, which is what becomes interesting. You can make a space 8px or 12px or 16px or 20px or 24px… but your knows when something is too much or not enough, and by setting these limitations you begin to let the 4 pixel rhythm do the work for you.

Now when designing this way I tend not to worry about the height being in 4 pixel rhythms, as it can be difficult to judge the height of text or you end up having to use an oddly sized photo. That said, I’m sure it’s possible, and though I’m a fairly detail oriented (pixel nazi) designer, that’s just too much for me. I’d suggest trying it out and see if it works for you.

On a final note, the main content column here on The Fox Is Black is 576px, which just so happens to be divisible by 4. This also happens to be a complete and total accident. When I first designing the site 5 years ago I made it that width because it was 8 inches wide… yes, I was designing for web inches. Oh the things we learn…

March 22, 2012 / By

Curators, attribution, and the contemporary world of blogging

Curators, attribution, and the contemporary world of blogging

The last couple of weeks have been quite interesting in the world of blogging. It all started with Maria Popova’s release of the Curator’s Code, a set of guidelines and icons which allows bloggers to properly cite their sources. To say the creation of this idea was controversial would be an understatement. You had people chiming in from all different sects of the Internet, mostly being quiet critical of what Maria suggested. I thought the idea was really well thought out, though perhaps too complicated. The idea suggests that you add odd characters into your stories to suggest attribution or a hat tip was difficult, and enforcing that your audience understand what they mean, even more so. Even so, her heart was in the right place and I completely understand why she put the effort into the Curator’s Code.

What ended up being most interesting though was how my own mind was changed during the past two weeks. I bookmarked the posts of two bloggers that affected me most. The first was Marco Arment’s I’m not a “curator”, the second was Matt Langer’s Stop Calling it Curation. You should read both of their articles and then come back here.

So what I realized was a couple of things. When Maria created the Curator’s Code she did so for the creative side of blogging, not the tech side. As someone who tends to straddle the edge of both, I saw most of the criticism about the Curator’s Code coming from tech bloggers. The thing is, there isn’t a whole lot of undiscovered talent in the tech world, especially compared to the world of art, design, fashion, food, etc. There is an endless stream of new designers and illustrators out there just waiting for their work to be seen, and you tend to feel like an explorer when you find new talent. To be something special in a world of app makers and start-ups you probably have a high profile angel investor backing you who’s already talking you up to Tech Crunch. I think there’s a huge difference between the two fields, but that may be a post for another time.

The other thing I learned was that we’re not doing anything wrong. Since the start of this blog I’ve always tried to put an effort into sourcing where I found my posts. It’s a simple courtesy to the blogs I respect, and it takes me no time at all to do it. I don’t need a fancy symbol to do what I do.

I also realized that I don’t care if people “steal” from us or not. There are blogs like and Booooooom that do a shitty job of saying where they found their posts, either not mentioned at all or their links are completely buried. Even if they did do a good job of sourcing their content, would it matter? Would it drive thousands of new people to my own site? Would my pageviews go up so much that I could have my own Scrooge McDuck-esque Money Bin to swim around in? Probably not. After 5 years of running this site I’m not even sure I’d want it. The success of TFIB has been a slow burn of people who come back to the site to read what we do, in our own way and our own voice.

In the grand scheme of things, after 5 years of blogging, I couldn’t be happier with where we’re at. My goal has always been to showcase the talents of creative people, and I can happily say that we’ve done a damn good job at it. And that’s what we’ll continue to do. We know we have a unique voice on the web, and we’re going to continue to use it in the only way we know how.

Honestly I can’t wait to share the redesigned site with you all. It’s going to be a lot different, but in ways that I think are much better. I’ll be sharing a lot more links throughout the day, but more as passing thoughts, with features scattered throughout and in-between. It’ll be different, but I think it’ll be for the better.

March 19, 2012 / By

Chinese Internet usage is staggering to think about

Chinese Internet usage is staggering to think about

I came across this rather simple infographic created by Jose Duarte this morning. Using only balloons, the infographic compares the Internet usage of the people of China to other entities, such as the entire EU, India and Mexico. This is actually last year’s list. This year, the figures have already gone up a considerable amount. In 2010 there were 422 million Internet users in China, but in 2011 that number jumped to 477 million.

55 million NEW users in one year. To give you some perspective, that’s the size of five Los Angeles’s. to give you even more perspective, the United States only has 312 million people. Pretty crazy to think about.

February 7, 2012 / By

Where’s The Pixel?

Where's The Pixel?

I came across this silly game called Where’s The Pixel? this morning after Pieter from Today and Tomorrow tweeted about it so I thought I’d share it. As the title suggests, you simply have to find the one black pixel on your screen. Sounds easy, but it’s actually harder than you’d think. I was playing it on my MacBook and lord knows how dusty the screen can get. I figure some of you can play this game against your co-workers to see who has the best visual prowess.

February 1, 2012 / By

Thoughts on the soon to be released Vimeo redesign

Thoughts on the upcoming Vimeo redesign

Click to enlarge

Thoughts on the upcoming Vimeo redesign

Click to enlarge

Last Thursday I was given access to the beta of Vimeo’s new redesign, a bold effort to to make the site feel very 2K12, rather than 2009. Here are some thoughts on the goods and the could-have-been-betters of the design.

– The UI is a ton cleaner, giving all the focus to the video. This is evident in a couple spots like the home page, which now gives you three different ways to view the site, the version above being my favorite. The large, bold preview images definitely take the focus.

– The top navigation now opens up to reveal a drawer full of options, which is a great way to showcase a ton of different places to go. It’s also nice that they spell out what each section will contain for people who are unfamiliar.

– The individual video pages have also been cleaned up immensely. All you really see is a giant video on your screen, the way it was meant to be.

– Text hierarchy has strongly enforced around the site, telling you exactly what you should be looking at, such as the titles of the videos which come in at a whopping 36 px font.

– The More Video tab at top is a nice touch, showing related content as well as videos you’ve recently views and other videos from the user who’s video page you’re on. Some people I showed said they wouldn’t have noticed it though, so perhaps it’s a bit too discrete?

– Glad they didn’t touch the video player, it’s perfect.

– They now give you a more clear option to switch between the Flash and HTML5 player. Unfortunately, the HTML5 player sucks and barely worked when I used it at home. That said, my developer friends at work said that HTML5 sucks at playing video, so this probably shouldn’t reflect on Vimeo.

– The sidebar feels a bit sloppy and slightly overwhelming. It’s definitely treated subordinately, which I’m sure is the point, but it ended up feeling a it neglected. Not sure if there’s a fix or if they should change anything, but it was something I’d noticed.

– The site is starting to feel more social, like you’d want to try and hunt down your friends and see what they’re doing. I didn’t get this vibe before and never bothered to look. The only users I followed were those making rad shit, using the site more like a bookmarking system.

Overall I’d say the redesign is a huge step forward, especially for it’s art and design-centric community. Looking forward to the Vimeo team to continue rolling out improvements like these, hopefully they don’t take another few years.

January 30, 2012 / By

Why hasn’t anyone created a better web-based email provider?

Creating a better email provider

For me personally, I use and love Gmail. The team behind the service has to be one of the best, hardest working teams in tech, as they’re constantly rolling out new changes and improvements, especially on the mobile front. The big problem is, they’re a part of Google. Lately Google has been getting pretty shady, like adding in Google+ results into search, and now their policies are being updated as of March 1, 2012, which means a few things. The good is that you’ll have a unified “profile” across all of their divisions. The bad being that they’re going to start using even more of the data we input to further sell more advertisements. Remember, Google is not here to help you, it’s here to make money. So why isn’t anyone taking this opportunity to make some money on their creepiness?

I’m the first to admit that I have no idea what it takes to create an online email provider. I’m sure you’d need all sorts of server clusters and cloud membranes and yadda yadda, but isn’t that stuff getting cheaper by the second? So imagine that we have the backend figured out, and it all works like magic. Couldn’t someone design a cleaner, more human version of Gmail that doesn’t use your information to sell ads? You’d probably have to pay for it, but don’t we all pay for things that make our lives easier? I pay for Rdio, I pay for Dropbox, I pay for my water and electricity. I don’t know about you, but I’d put email up there with all of those essential services.

As far as I can tell there are about 3 or 4 major web-based email providers, namely Gmail, Yahoo! Mail, Hotmail, etc. But where’s the cool, design driven alternative? Perhaps I’m being to flippant about this, and maybe it’s way too hard to actually do, but I feel like there’s a serious gap that could be filled by a strong team with a great product. As Google (and Facebook, can’t forget about them) start to creep their tentacles around our lives, shouldn’t we start building our own alternatives

January 26, 2012 / By

Jaaam (The Fresh Prince Remix) by Pogo

vivian banks does not look happy

This makes me so happy. The extremely talented and oft-featured Pogo has released a new remix using footage from The Fresh Prince of Bel-Air. Vivian, Carlton, Geoffrey, everyone is excised from the mansion, the early ’90s, the videotape, and moved into an updated digital melody. As the early ’90s would have it, the cast is wearing some of the only clothing that could compete with the song they now live in. But isn’t that part of Hilary’s charm?

I’m a bit skeptical of nostalgia when it seems inauthentic, but this is legit. Watching the Fresh Prince with my sisters after school is one of my favorite memories. We were on a first-name basis with the Banks and watching this again, I think we still are.

P.S. Did you know that Pogo came to the States and got arrested? He is banned from reentering the country for 10 years which is very sad for us. I would cite SOPA, but I’m a day late.

January 19, 2012 / By

The sleeker, simpler new Twitter

The sleeker, simpler new Twitter

Yesterday morning, Twitter unveiled a totally redesigned UI for the iPhone and Android which in turn unlocked a new UI for the web. I had no idea that Twitter was gearing up for any kind of redesign, so I was pretty excited to see what they had done. In my opinion, they’ve completely upped their design game.

The entire idea of Twitter has been simplified down to it’s essential pieces. You’re not presented with three main options: Home, Connect and Discover. The home is still where your feed of friends are, the Connect section shows your @ mentions as well as interactions, such as retweeting and favoriting of things you’ve tweeted. Clearly Discovery is a place to discover, and to my surprise the topics have been pretty much in line with things I’d enjoy, so good on Twitter.

Purely from a design point of view I love what they’ve done. They’ve taken out a lot of the heritage design elements and slimmed things down even more, which I didn’t realize was possible. The UI on the iPhone is stunning, I’d say nearly perfect. There are some new behaviors though, like flicking up on the Me tab to see your DM’s, which I found interesting. People don’t like change remember, so this will be hated at first. The web app itself is nice and about as minimal as it gets, just some modules on a background. I don’t use the web interface often, but I’ve been popping on there more since the redesign, and in turn neglecting Twitter for Mac.

There seems to be some differing opinions on the redesign so far. Dan Frommer seems to really like it, while John Gruber really isn’t a fan of it. It’s funny though, because John Gruber also really likes Tweetbot, which I thought was clunky and hated using after a week. Either way, I’m really enjoying the change and applaude Twitter for really going for it.


December 9, 2011 / By