Design Focus

Friday Focus 06/18/10: Layered Screens

Showing screenshots of websites on websites isn’t terribly exciting in theory, but let’s see how these designs dealt with it.

Designs of the Week

Paperfold Media

Amusing logo. I find it interesting that the designer went for an abstract rendering of a program window instead of the usual Safari. The body text in the inside pages could be bigger.


Love the addition of the foliage as well as the wooden textures, but repeating grass and soil in the lower part isn’t so seamless, so that needs work.


The corner ribbon (more like a cover) on the screen is a good idea, and so is the subtle ruler pattern in the background.

Lee Munroe

The screens need more distinction from one another, like shadows or thicker borders, but I like the difference in heights.

The Visual Click

Not sure if this is “cheating” because the screens are bunched up as one image and you can’t interact with them, but the rotated, peeking through effect looks great.

Q Hair and Beauty

Again on the “cheating”, the two polaroids in the background don’t change when you click on the arrows, but blurring it out of focus is another technique to consider.

Massive Blue

Bigger is definitely better when it comes to screenshots.


Aside from program windows, mobile devices such as the iPhone are popular containers too. I think the stripes and the bright green make for a perky look.

James Deer Design

Love the subtle watercolor texture on the edges of the page, as well as the hot pink combined with elegant typography.

Origen Creatives

As with the previous design, you can mix and match mobile devices with desktop browsers too.


Another interesting technique: opting not to include any real screenshots, just the hardware that will display them.

Primo Motif

Not sure if there’s any benefit to this type of layering as, again, there’s not enough distinction between the two especially since they look almost exactly the same. I think the smaller screenshot could have zoomed in on one area of the website.


This may look a little cheesy for some, but since the company built its brand on the word phantasmagoria, I’ll take it. Now the question is, are the sparkly stuff mixed into the screenshots a welcome decoration, or too much of a distraction? I think the ribbon balances it out.

Social Media Weekly

DesignThe Tangible Web: Thoughts on Designing Websites for Touchscreens
“Below, I’ve jotted down a few thoughts on design practices that we’ll likely be seeing a lot more of as site owners begin reorganizing and redesigning to welcome our touchy-feely visitors.”

CSSBe a CSS Team Player: CSS Best Practices for Team-Based Development
“How many times have you picked up a project that someone else started, only to discover that the creator’s original code is a mess? Or you work with several team members, each of whom has their own way writing code? Or you revisit a project you created years ago, and you don’t remember what you were thinking?”

Usability9 Usability And UX Pitfalls: Learn How To Avoid Them
“If we want to be ahead of the design curve: get more satisfied clients, and happier users, we need to make sure that both we and our clients understand what these points are, and how to solve them.”

  1. By Victoria Blount posted on June 18, 2010 at 9:03 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I think this style of layered screens is really effective to showcase websites and examples of website designs. The best from the list above have stacked and positioned the layered screens in a 3D format.

  2. By Jarkko Sibenberg posted on June 21, 2010 at 9:03 am
    Want an avatar? Get a gravatar! • You can link to this comment

    When it comes to website previews I like it when there is some well chosen cropped detail displayed instead of the whole front page shrunk into a small image. Some of the subtle details will just disappear in the shrinking. I understand it if the point is in the layout of the site though.

    I do like those mobile screen previews where the phone is displayed as well. It somehow makes the site look more desirable.

  3. By Shane posted on June 30, 2010 at 3:07 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Great post and source of inspiration, I think layered screens work really well when executed properly.

    Thanks for sharing.

  4. By shirelly posted on July 19, 2010 at 3:26 am
    Want an avatar? Get a gravatar! • You can link to this comment

    rally very beautiful,will be use it in my job!

  5. Trackback