Design Focus

Friday Focus 06/24/11: Pixel Focus

This Friday Focus we’re putting a spotlight on designs that exaggerate pixel sizes for a mosaic, rugged look.

Designs of the Week


I like the dark on top, light at the bottom look. I also like how the pixel pattern looks random but when you look more closely it’s repeated 3-4 times already. Interesting thing about their portfolio slider is that it goes both sideways and vertically, but the visual cue for the latter appears only on hover. Another notable decision here is that the description of their services comes before the slideshow (which usually appears as the heading).

Opala Rosa Choque

Love the surreal, Escher-esque illustration at the top, its liquid smoothness contrasting with the rough pixeled edges elsewhere. I also like that when you click on a portfolio item, the display is prefaced by “proudly presents”. Only two concerns I noticed would be: that blasted Facebook like button; that close button doesn’t really look like an “x” icon (but it does look like a real life button).

Teo Skaffa

I think pixelated type everywhere eventually tires the eyes, and in this day and age, this Flash site could have very well been done in pure HTML/CSS/JS. The oversized cursors is amusing though.


Simple, colorful, and even has keyboard navigation!

Media Arc

Now this is a good example of using Flash to your advantage, although I’d wish the animations moved more slowly, or could be stopped.


Light, clean, and fresh-looking. I’m surprised the featured project section only contains one site, though—I would’ve added a link to the portfolio below the description.


I like the rainbow effect on the description text to echo the background. The search box just needed to be blended in better.


Love the hues and graphic work on the interface elements, which would be even better if they were in native CSS3 effects and custom fonts. Interesting choice to add the shopping cart status right next to the logo.

United Pixelworkers

Dare I say this site is pixel perfect? Everywhere I look, there are details I just fall in love with. Just an excellent model for a pleasant online shopping experience.

Social Media Weekly

DesignHow Much Design Is Too Much Design?
“…it does seem to me that, as much as we talk about the cruciality of design to the success of software that it’s also true that having too much design is often counter-productive.”

OptimizationBook of Speed
“The business, psychology and technology of high-performance web apps”

User Interface DesignAsciiflow
Draw tables in ASCII.

HTML5, JavaScriptLearning Canvas: Making a Snake Game
“In this tutorial I’m going to show you how to make a simple snake game using canvas. You know, like you used to get on your Nokia phone.”

CSSSprite Cow
“Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css.”

  1. By Alex Flueras posted on June 25, 2011 at 3:16 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Nice list. Here is another one that might qualify either: http://www.studioweber.com

  2. By Sara posted on June 28, 2011 at 10:58 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Great list of examples.

  3. By Deb posted on July 6, 2011 at 8:06 am
    Want an avatar? Get a gravatar! • You can link to this comment

    love it. thanks a bunch!

  4. By Stephanie posted on July 15, 2011 at 7:40 am
    Want an avatar? Get a gravatar! • You can link to this comment

    A post that I didn’t think I would like, pixelated images etc are things that I dread but when someone has made a conscious decision to incorporate them into their design like these examples then I think its really paid off. In particular I like Green tent and United Pixel Workers. A really nice use of this technique. I will need to find a way to incorporate this into one of my designs!

  5. Trackback