30 Awesome Web Designs That Create an Illusion of Depth

Creativity | 2011. 5. 13. 20:59 | Posted by 스마트 안전보건

30 Awesome Web Designs That Create an Illusion of Depth

Depth perception is our ability to see the world in three dimensions. It allows us to gauge the relative distances of objects we can see. In a plane/2D surface, depth can be simulated by the use of concepts related to depth of field, perspective, focal/vantage point, shading, lighting, and others.


Web design is traditionally a two-dimensional medium. However, experimenting with faux 3D effects can lead to interesting and memorable user experiences. In this showcase, I present to you web designs that successfully create an illusion of depth.

The Pixel

Perspective is a concept you can use for creating a sense of depth, as can be seen in The Pixel website.

Ecoda Zoo

In this web design, visitors are confronted with various interesting animation effects. By holding down the mouse button, users are able to navigate through the three-dimensional scene.

Frito Lay

Frito Lay’s website uses perspective to give the viewer the impression that they are in a three-dimensional environment. Colorful character animations and shading further reinforce the 3D theme of the site.

Cup Cup

In this website for a cupcake shop, depth is achieved through the use of an awning (among other things), making it appear as though you’re looking at a storefront displaying cupcakes. The cupcakes are placed in such a way as to give them the appearance of sitting on top of a shelf.


Through the use of perspective, depth is achieved on WebdesignBe.com. An almost photorealistic illustration of an octopus further exemplifies the three-dimensional characteristic being portrayed on the site.

Mike Drascola

The portfolio website of web designer Mike Drascola establishes an illusion of depth. A surreal quality characterizes the three-dimensional scene presented on the site.

Gardener & Marks

Gardener & Marks creates a photorealistic setting that seems to embody the company’s style. Depth is attained through various mechanisms, including the use of shadows on objects.

Dez Vila Aplina

Dez Vila Aplina uses perspective in their illustrated roadmap. Shadows are another technique used to portray depth in this design.

Versions App

Visual depth is achieved on this website through the use of a landscape, lighting, and shadows. The color palette also helps support a 3D look-and-feel.

The Dascola Barbers

The Dascala Barbers website pays homage to Ann Arbor, while focusing on the people that make the shop a success. A figure/ground perspective is achieved through the caricatures of the barbers.


On the Imaginamos site, depth is simulated in the illustrative header through the appropriate scaling of objects.


Through the use of a large scrolling rainbow that protrudes from the background, Skittles gives the viewer a glimpse into the company and its history. Viewers are engaged into a unique interactive experience when they visit the site.


This fun website features a rotatable, 3D planet underscored by well-placed shadows and layering to create the illusion of depth.

Adobe Creative Suite 3

A surreal 3D illustration gives the Adobe Creative Suite 3 website an otherworldly character.

Iceberg Quest

Great composition produces an interesting landscape that’s used as the background and a central design element on the Iceberg Quest website.

Wing Cheng

Wing Cheng is a designer whose portfolio site establishes an illusion of depth. By unfolding the pages, you get a real-life look into the work of the designer. Shadowing helps give the elements a 3D appearance.

The Villager Restaurant and Catering

This website features a wonderful illustrative header that simulates depth. Depth is used as a functional tool to create visual hierarchy by attempting to focus your attention on the navigation menu bar after you view the beautiful illustration of the restaurant’s exterior.

Planeje Sua Carreira

Site visitors are greeted by a faux 3D environment when they go to the Planeje Sua Carreira website.

Foundation Six Web Design Studio

The website designs by Foundation Six take center stage in this portfolio website. The illusion of depth is created by the use of shadows, layering, and object scaling.


The Inglorie website gives you a sense of depth through the use of perspective and shadowing. The 3D effect, coupled with animation and the use of distinction techniques, draws your attention to the objects at the center of the screen.


An aerial/bird’s-eye view of a house creates a sense of depth for the Aka-Acid site. Shading also adds to the illusion of depth.

Green Woods Country Club

By using a natural landscape and perspective, the Green Woods Country Club website creates an almost realistic scene.

Creative Switch

Creative Switch achieves depth through the use of scaling, which brings the mascot to the front as the city landscape fades into the background. Darker colors also help the background fade into the distance.


Depth is achieved by using perspective in the photograph that is a central design piece in this website.

UIS- Ultimate Interactive Studio

The Interactive Studio UIS website creates depth by layering and by using shadows.

Help Scout

The Help Scout website uses depth of field, as can be seen by the birds being blurred to create an illusion of distance.

Hippo App

By using colorful, bright illustrations and perspective techniques, the Hippo App website achieves a nice simulation of depth.

Dino Yul

This unique website by Dino Yul creates an illusion of depth in the layout’s central element, the image slideshow. Shadows and layering bring the image slideshow to a higher plane.


Through the use of shadows, depth is conveyed masterfully on Zennaware. Objects look like they’re resting on top of a table.

Creative Mints

Colorful and creative illustrations take center stage on the Creative Mints website. Once again, we can see how the use of shadows and proper scaling of objects can be used to establish a sense of depth.

Source: sixrevisions.com

댓글을 달아 주세요

The Website Creator for Mac 'Sandvox'

Creativity | 2011. 5. 11. 16:25 | Posted by 스마트 안전보건

What's New in Sandvox 2

Sandvox 2 has more than five dozen new features and major improvements. This represents a huge leap forward for anyone using a Mac to easily create powerful websites. All of the new features and improvements in Sandvox 2 are designed to give the modern website builder more flexibility than ever.


Under the hood, this new version introduces a completely new architecture and new editing engine, which allows you to mix and match “objects” on a web page in a much more naturally expressive and creative way. For example, photography and video can now both reside on the same page, along with text, custom HTML and whatever else you can dream up.

Sandvox 2 has also leapt into the realm of social media! Now with multiple points of Facebook and Twitter integration, you can keep visitors apprised of your status and drive more traffic to your website by making it easy for them to “tweet” about or “like” specific pages on your site.


Websites you build with Sandvox 2 are now more “modern” than ever before. Any page can pop up a photo gallery on a layer just above it to present a lightboxed slideshow. Hierarchical drop-down menus are automatically built by Sandvox 2 to help visitors navigate your site. Audio and video are playable in a way that’s accessible to just about every computer and browser out there — including iPad and iPhone.

And this is just for starters! New designs and design chooser, an all-new inspector, directly resizable images, drag-and-drop placement of objects on a page, and more!

And need we mention that this is on top of the amazing features that have been part of Sandvox all along: Live editing of your actual website, with no preview mode. Tons of designs to choose from. Everything you need to get your website built, no add-ons required. Easy blogging and podcasting. Build sites that are optimized for getting attention from search engines. And publish to just about any web host under the sun.

Click here to download

Features of Sandvox 2

Pick a look.Choose from our extensive gallery of designs. Or go with another designer’s creation. Change your mind, change your theme. Learn more.


Mix and Match.
It’s the rule for a better website. Mix it up with text, video, photos, blogs, 
forms, sitemaps, Facebook, Twitter, or just about any kind of web object. Learn more.


Customize. Expand.Use a chunk of HTML PHP, or JavaScript. Paste an embed link or other snippet. Just because you don't have to use HTML doesn't mean you can't. Learn more.


FTP, SFTP, MobileMe, WebDAV... the choice of how, where, and when to publish is yours. Built-in archiving plus automatic RSS features make sharing your blogs and podcasts a breeze.


Sandvox 77 ways and tips
View more documents from KOSHA_iglassbox

이 글은 스프링노트에서 작성되었습니다.

댓글을 달아 주세요