Design Focus

Friday Focus 08/06/10: Sidebar Focus

Where sidebars are not an afterthought, and even steal the show. Happy Friday Focus!

Designs of the Week


Sometimes your product doesn’t have to be presented in a MacBook, Cinema Display, iPhone, or Safari screen. You can just nudge it to the side of your layout and it will still make quite the impact. The bright shades of blue also help, and bonus points if that’s actually a jab at that “41 shades of blue” incident at Google.

Wez Maynard

I like everything going on this page. I find it interesting that there are at least four different typefaces used in this design, but blends in nicely. Also check out how the contents of the sidebar change by page.

Læms e livet

I enjoy the generous serving of whitespace and the very subtle watermarks slash section dividers.

No More Dedicated

Great treatment on the video thumbnails and makes me wonder why not more people are doing it. Big chunky text, arrows, and buttons for a forceful first impression.


I love how simple this looks, something atypical of technology-focused sites. Brilliant icons, strong grid.

The Tweed Band

Pretty generic looking, but I like two things here: first, the actual use of tweed; second, the tooltip action on the photographic background.

dConstruct 2010

The photo wall is neat, and so is the folded motif sprinkled around the site. The green “sidebar” behaves like a deconstructed box—get it?

Wake Up Walk Out

Using cyan and magenta together is like asking for trouble, but I don’t mind it here. This site is trying to be as eyecatching as possible, and it’s using bold fonts, bold hues. I like that you can see swatches of the site’s color scheme spill over to the hand-drawn illustrations in each section.

Social Media Weekly

User ExperiencePagination, a thing of the past?

JavaScriptShowing Off bit.ly Clicks of Your Posts With jQuery

ProgrammingWill the Real Browser Stats Please Stand Up?

  1. By Victoria Blount posted on August 10, 2010 at 8:34 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I like the use of sidebars in the designs above, i never consciously use a side bar to distinguish the content on a site, but it works really well to define the news feed or other info.

  2. By Jarkko posted on August 11, 2010 at 10:54 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Pretty good and creative examples of sidebars there. It doesn’t have to be just a bar where you put your navigation or contact form or whatever.

    I love simplicity and strong illustrations, so Joyent is my favourite in that list. I’d like to see even more special examples though, where the ‘rules’ of the sidebar have been broken more bravely.

  3. Trackback