Design Focus

Friday Focus 07/08/11: This or That?

You might remember a feature on split designs over a year ago. The look is alive and kicking in 2011, and this week we’re taking another look. Happy Friday Focus!

Designs of the Week

Design 977 website

Design 977

This is actually a completely fluid site, and that’s one feature you can take advantage of when dividing your layout 50-50. Using a custom scrollbar is quite useful in this case as well although I wish it weren’t the only one that got such a treatment—the form elements could be tweaked a little bit more. The Facebook/Twitter/validator links are tucked away on the small arrow at the leftmost side of the site, which randomly turns into a plug icon.

Green Xtreme website

Green Xtreme

Bold look, big logo, but at the cost of what could have been a better experience. The split layout forces the products to be listed only on one half and after a screenful of scrolling because of the narrow space for the intro text. Not to mention, the photoshopping of the kid and puppy to the lower left isn’t so realistic.

riddle.pl website

Piotr Petrus

Who said split designs had to keep their division in one place? On this site, clicking on one of the portfolio images pushes and squeezes the other half of the layout to make way for a large tooltip description of the project, written in a playful tone. I also like the idea of putting keywords relevant to his work.

Adham Dannaway website

Adham Dannaway

Love both the artistic and comedic headshots. The color palette used in the painted side also echoes in the circular links found in the footer as well as the skills/tasks required in each item of his portfolio and the bar chart in the about page. Other than that, this is a very black and white design, and you could say the look is split in that regard as well.

Doodle Pad website

Doodle Pad

I like all the fun illustrations in this design, but the only thing that throws me off here is whitespace at the top right due to the tall logo; makes me with the menu were vertically aligned instead.

David Fooks website

David Fooks

Like the previous site, only the homepage is split in two, but the execution here is striking: elegant and fun (I could even say cute) at the same time. The fixed, icon-based top navigation is also a nice touch.

Nudge Design website

Nudge Design

Great retro look on the logo and the rest of the design. The best part has to be the negative space ampersand right in the middle!

ZonkOut website


I find it interesting that the bullet points and the left-hand text are right-aligned. Another thing I like is the use of red as accent on exactly three areas: the logo, the price, and the hands on the app. Not too sure about the reflections and shadows on the iPhone illustration though, is it standing up or lying down?

Quero Meu Cloud website

Quero Meu Cloud

This one looks less obvious but it still is a split design, with a third column halving the design. Almost predictably, there are animated clouds in the background.

Social Media Weekly

TypographyFree HTML / CSS for type & palette proposals

Mobile, iOSThe iOS Design Cheat Sheet

UsabilityTop 7 split testing blunders you must avoid

HTML5, AccessibilityHTML5 Accessibility Chops: form control labeling

CSSPseudo Spriting

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

    A really interesting show of split websites. Something that I didn’t really know was around and something I hadn’t even considered before but a really nice touch for when you need your site to appear as two different components. I particularly like Adham Dannaway’s website and think that it is a good way of showing off the two sides of him as both a creative and developer. Great post.

  2. TrackbackInternet Marketing Optimization From Split Testing, Page Optimization and Monitoring | Devlounge