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

댓글을 달아 주세요

Decentralized Web Stardard in the future

Creativity | 2011. 5. 6. 23:49 | Posted by 스마트 안전보건

Imagine a web where our browsers connected directly to each other to do voice, video, media sharing and run applications, using P2P and real-time APIs, rather than going through centralized servers that controlled traffic and permissions. That's a potent idea and if implemented properly could future-proof a part of the web from authoritarian crack-downs, disruptions by disasters and more. It could also establish a permanent lawless zone of connected devices with no central place to stop anyone from doing anything in particular.

It just so happens that something like that may now be under development in the most official of venues. The World Wide Web Consortium (W3C) announced today the formation of a new Web Real-Time Communications Working Group to define client-side APIs to enable Real-Time Communications in Web browsers, without the need for server-side implementation. The Group is chaired by engineers from Google and Ericsson. It sounds like Opera Unite to me (see video below), but democratized across all browsers. It sounds like it could be a very big deal.


Here's how Opera described its Unite technology at launch two years ago. Opera is always several years ahead of its time.

This explains what decentralized web standard is.

Source: http://is.gd/TQhOGK

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

댓글을 달아 주세요

Overview of AR instruction site

Education | 2011. 4. 23. 22:46 | Posted by 스마트 안전보건

These are overviews of AR instruction site, my final project of instructional design class.

1. Concept map of the marketing problems in Busitco



2. Concept map of AR instruction siteLayout_of_AR_site.png

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

댓글을 달아 주세요

5 web applications to save time at work

Creativity | 2011. 4. 16. 01:16 | Posted by 스마트 안전보건

These five free online tools make your work at offices better, faster, and more efficient.

These are simple, clean, and built to knock out those cumbersome work tasks, no downloads required.

  1. Zamzar

    1. There are few things more frustrating than receiving an important file that you can’t open. Zamzar is an online tool that can convert a wide range of file formats. Simply upload the file, choose the output format, enter an email address, and you’ll get a new version in your inbox. 


      Converting text documents may not seem like an incalculable feat, but Zamzar can translate many audio and video formats as well. Handy!

  2. Ge.tt

    1. Email attachments can be cumbersome, especially with larger files. If you’re looking for a dead-simple way to share in the cloud (especially if you’re still lamenting the death of Drop.io), give Ge.tt a go.

      Two clicks will upload your images, docs, zip files, etc. and generate a tidy link that you can ping over to your coworkers.


      They can view certain files in their browser or download whatever they need from the package.

      Ge.tt storage is temporary (unless you create an account), so use it for quick transfers, not cloud archiving.

  3. Ninite

    1. Setting up a new PC is a surefire way to kill your day. Connecting the cables and transferring your data is only half the battle. Then you need to hunt down all the apps you use regularly.


      Ninite streamlines the process. Check off all the browsers, readers and media players you need on your new machine and download them all in one shot via an automated installer. Best of all, Ninite eliminates the extra “junk” (toolbars, add-ons) that sometimes come packaged with common applications.

  4. CopyPasteCharacter

    1. If you work on any legal, scientific, or multi-lingual documents throughout the day, you may have a need to add certain symbols to the text that are not immediately available on your keyboard.

      You could go into the special characters map in your word processor, or if you’re feeling particularly nerdy, memorize the Alt key codes that you need.


      But better yet, why not throw open a browser tab with CopyPasteCharacter.com and snag your symbols with one click? You can even copy the HTML values if you’re working in code.

  5. LucidChart

    1. Need a visual aide to get your point across? PowerPoint has its flaws, and Photoshop requires some requisite skills even if you’re just doing the basics.


      LucidChart, on the other hand, is a drag-and-drop way to create impressive flowcharts and diagrams right in your browser. Pop your shapes onto the graph, pull down some arrows, add descriptions, colors and titles, and you’ve got a professional diagram you’d be proud to show clients.

      A free LucidChart account allows two people to collaborate on a document, 25 MB of online storage, and a maximum of 60 objects per document. Inexpensive paid options offer more collaborative and storage features.

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

댓글을 달아 주세요

How to change a default web browser of iPhone

Creativity | 2011. 4. 12. 01:25 | Posted by 스마트 안전보건

If you’d prefer to use a web browser other than Safari as the default on your iPhone, iPad, or iPod touch, you can do so with a simple utility called BrowserChanger. The tweak lets you set any of the alternate web browsers as the iOS default, allowing any link to launch directly in something like SkyFire rather than copying and pasting the URL manually.


Now before everyone gets too excited, notice that BrowserChanger requires a jailbreak to install. Jailbreaks are easy to perform and just as easy to undo, but it does add an additional layer of complexity for the average user.

BrowserChanger is a free download from Cydia, search for it in the ModMyi repository. You’ll find there are also options to apply the default browser change to Google Maps and YouTube.

Source: osxdaily.com

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

댓글을 달아 주세요

Firefox4 released

Creativity | 2011. 3. 27. 02:34 | Posted by 스마트 안전보건

Recently, Firefox4 has been released to the public on the web.


Firefox4 Download links





These are what has been improved with Firefox4.

Awesome Bar

Awesome Bar screenshot  Get to your favorite sites quickly – even if you don’t remember the URLs. Type your term into the location bar (aka the Awesome Bar) and the autocomplete function will include possible matches from your browsing history, bookmarked sites and open tabs.  The Awesome Bar learns as you use it—over time, it adapts to your preferences and offers better-fitting matches. We’ve tweaked it to give you greater control over the results (including privacy settings) and increased performance so you find what you need even faster.


Tabs on Top 

Tabs are above the Awesome Bar to make it easier to focus on the content of the sites you visit.


Firefox Button (Windows and Linux) 

All your menu items are now found in a single button for easy access.


Bookmark Button 

Manage your bookmarks in a single button. Find your favorite links without getting bogged down!


Simplified Reload/Stop Button 

Your Awesome Bar now features one easy button to stop loading pages or reload pages.


Home Button 

The Home button has been moved to the right side of the search-field.


App Tabs 

Take sites you always keep open—like Web mail—off your tab bar and give them a permanent home in your browser.



As you’re opening a new tab or typing in the Awesome Bar, Firefox will check to see if you already have that site open. If you do, you’ll be directed to the existing tab so you don’t open a duplicate.


Organize your Tabs with Panorama 

Too many tabs? Reclaim your browser from tab clutter! Panorama lets you drag and drop your tabs into manageable groups that you can organize, name and arrange in a fun and visual way. To get started with Panorama, simply select the Tab Groups icon when you customize your Navigation Toolbar or right click any tab to Move to Group.



Click to watch Firefox4 videos


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

댓글을 달아 주세요

Colorado Tour Information Site

Life & more | 2010. 12. 20. 00:29 | Posted by 스마트 안전보건

This site is about Colorado Tour Information.



Colorado Tourism Infomation
View more documents from KOSHA_iglassbox.

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

'Life & more' 카테고리의 다른 글

Best Christmas Decoration Houses  (1) 2010.12.21
4 practical way to celebrate Christmas  (0) 2010.12.20
Colorado Tour Information Site  (0) 2010.12.20
Traditions of Christmas gifts  (0) 2010.12.13
Loveland Ski Area in Colorado  (0) 2010.12.09
Waiting for Christmas  (0) 2010.12.09

댓글을 달아 주세요

E-learning 3.0

Education | 2010. 12. 8. 05:37 | Posted by 스마트 안전보건

This is an article from Steve Wheeler, who is an educational technology professor

at University of Plymouth in UK. It deals with E-learning 3.0 with 4 categories.

I especially like 3D visualization and interaction, in which Augmented Reality in

education belongs to. Just have a look and grab some ideas.

I'm excited by the future. It's something I have always looked forward to! But what will e-learning look like in a few years time? When Stephen Downes laid down his manifesto for e-Learning 2.0 in 2005, he tapped into the zeitgeist of emerging social technologies and theorised a number of possibilities. Four years on technology is moving ever more rapidly, and a reappraisal of learning within digital spaces is overdue.
In conversation earlier today on Twitter with Sue Waters and Darcy Moore, we discussed what learning would look like in a Web 3.0 world, and how it might differ from current learning. This led me to revisit some thinking I have been doing recently about what for the sake of convenience I will call 'e-Learning 3.0'. I will try to encapsulate some of these thoughts here, attempt some (hopefully not too dangerous) predictions, and hopefully promote some discussion. I believe that e-Learning 3.0 will have at least four key drivers:
  1. Distributed computing


  1. Extended smart mobile technology


  1. Collaborative intelligent filtering


  1. 3D visualisation and interaction
Firstly, in a Web 3.0 world we will not only tap into the semantic web with all it promises, but e-Learning 3.0 will transgress the boundaries of traditional institutions, and there will be an increase in self-organised learning. Why? Because we will gain easier access to the tools and services that enable us to personalise our learning, and these will be aggregated more easily too. Additionally, with new cloud computing and increased reliability of data storage and retrieval, the mashup is a viable replacement for the portal which will lead to less reliance on centralised provision. This in turn may hasten the death of the ailing institutional VLE.

Secondly, many commentators such as
Derek Baird believe that Learning 3.0 is all about mobile technologies. Mobiles will play a big part in the story of e-Learning 3.0. There will need to be ubiquitous access to tools, services and learning resources, including people - peer learning group, subject specialists and expert support. With smart phone devices and better connectivity through constantly improving line-of-sight (satellite and wireless) networking services, there is little to stop learners everywhere from accessing what they need on the move, from virtually anywhere on the planet. Digital divides of the future will not focus on 'have and have not' socio-economic divides, but will more likely be 'will and will not' psychological divides, and 'can and cannot' skills divides.

Thirdly, truly collaborative learning will be possible in all contexts. Through predictive filtering and massively multi-user participative features, e-Learning 3.0 will make collaborating across distance much easier. With the best will in the world, very little collaborative learning occurs through the use of wikis and blogs, whilst social networks generally connect people but often superficially, and can also isolate. In a recent post entitled
Is Twitter the semantic web?, I speculated on Twitter's functionality and suggested that through its primitive filtering tools such as RT, DM, @ and #tagging, we are witnessing some of the early semantic features that enable users to work smarter and more collaboratively. Intelligent agents will take this a lot farther.

Finally, 3D visualisation will become more readily available. Quicker processing speeds and higher screen resolutions will provide opportunities for smoother avatar-driven 3D interaction. Multi-gesture devices which will operate in 3D space will also become more widely available, reminiscent of the opening scenes of the science fiction film Minority Report. Touch surface interfaces are already here (I have one on my laptop) and multi-touch versions too (my iPhone has one) which will ultimately signal the demise of the mouse and keyboard. See David Beers blog for more on these ideas. 3D multi-touch interfaces will make a whole range of tasks easier including file management, fine motor-skill interaction, exploration of virtual spaces and manipulation of virtual objects.

Read more at steve-wheeler.blogspot.com

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

'Education' 카테고리의 다른 글

UNC 'Bringing Education To Life'  (1) 2010.12.10
Google's E-Bookstore  (0) 2010.12.09
E-learning 3.0  (0) 2010.12.08
StudyBlue_Study Online  (0) 2010.11.30
Milliken Elementary Presentation  (0) 2010.11.20
UNC Online Education Website Open  (0) 2010.11.18

댓글을 달아 주세요

4 photo sharing alternatives

Creativity | 2010. 12. 1. 12:54 | Posted by 스마트 안전보건

More than 130 years after George Eastman invented roll film, still photography

remains one of the most expressive and enduring ways that individuals from

all over the world capture and share their experiences. That’s why it’s not really

a surprise that photo sharing sites were some of the first social sites to appear

on the Internet.


Today, the photo sharing category of sites and apps is largely dominated by the two big players, Facebook (Facebook) and Flickr (Flickr). Both services are a great way to share photographs and video with family members, friends, online acquaintances and even the random Internet visitor. However, the world of photo sharing sites and tools goes far beyond just these services.


1. SmugMug


What It Is: SmugMug is a site with a central focus on making it easy to showcase and organize your photographs — whether you want to sell them or not.

How It’s Different: SmugMug is really focused on making sure your photos are safe, secure and easy to access. There are no bandwidth caps and no limits on the number of photos you can host. You can choose to password-protect all or some of your photos or galleries, add custom watermarks and share photos on social networks like Twitter (Twitter), Facebook andTumblr (Tumblr).


2. picplz


What It Is: Picplz is a photo sharing app that makes it easy to share your photos to Facebook and Twitter, while also checking in to Foursquare (Foursquare).

How It’s Different: While not purely a photo sharing app — you can browse, comment and upload photos using the website — mobile is the big focus with picplz. The app and the website also let you apply filters to your photos, stuff like toy camera, ’70s and cross-processed.


3. Instagram


What It Is: Instagram is an iPhone app that lets you take photos and share them with your friends on Twitter, Flickr, Facebook, Tumblr and Foursquare (foursquare). You can also apply various filters and transformations to your photos.

How It’s Different: Instagram (instagram) is most similar to picplz, but it has a hint ofHipstamatic in it as well. What sets it apart is its ease of sharing, browsing and commenting.


4. Path


What It Is: Path is a website and iPhone app that lets you share your photos with a select group of people.

How It’s Different: Path (Path) limits you to 50 network connections, based on a theory that states that humans can only sustain 150 social relationships. By limiting users to a smaller network, Path hopes that the sharing and capturing experience can be more personal and more special.

Read more at mashable.com


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

'Creativity' 카테고리의 다른 글

Parallels Desktop 6 Build 6.0.11990.621014  (0) 2010.12.04
Chronories 1.0.7_Mac OS X App  (0) 2010.12.04
4 photo sharing alternatives  (0) 2010.12.01
Social media and the workplace  (0) 2010.12.01
Best Camera Phones of 2010  (0) 2010.11.30
E-mail Commander 1.5.1 for Mac  (0) 2010.11.30

댓글을 달아 주세요

5 design trends in 2011

Creativity | 2010. 11. 23. 06:23 | Posted by 스마트 안전보건

This post originally appeared on the American Express OPEN Forum, where Mashable

regularly contributes articles about leveraging social media and technology in small business.













In the past 12 months, we’ve seen a lot of changes in the world of web design. Growing popularity in the mobile device space — including smartphones and tablets like the iPad — have refined the way many users access and interact with content.


Likewise, the formal adoption of web standards like HTML5, web fonts and CSS3 by browser makers means that more and more users are now able to take advantage of the latest and greatest features on the web.

1. Lose the Flash

Regardless of where you stand in the war over Flash, the fact remains that more and more sites and web developers are moving away from Flash-only solutions for video, animation and navigation.

Flash still excels when it comes to building fully interactive designs and Rich Interactive Applications (RIAs), but for small business owners who aren’t showcasing or providing that sort of experience, trading Flash for HTML5, JavaScript and CSS3 might just make more sense.

2. Web Fonts

Typography is an important — I would argue crucial — component of any web design. Historically, customizing the typography you use on a website has been a complicated and headache-inducing process. As a result, most designers were reduced to either using the small selection of web-safe fonts or using workarounds like text images or Flash as text replacements.

3. Mobile Compatible/Optimized Sites

More and more websites — big and small — are taking the time to make their sites small screen friendly. Having a mobile compatible or mobile optimized website means that not only will your site load faster over cellular data connections but that content will be better formatted for the screens of smaller devices, making it easier to access and understand.

4. Inspired By Tumblr

The popular microblogging platform Tumblr (Tumblr) is a great way to quickly and easily post updates, share content and garner direct visitor feedback. Tumblr has become a really popular platform and more and more small businesses are using it for their own company blogs or sites.

5. Touches of the Future: HTML5 and CSS3

As I stated in the introduction, it can be difficult for small businesses that aren’t in a design-related field to adopt many of the cutting-edge web design trends for fear of shutting out parts of their potential audience.

Read more at mashable.com

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

'Creativity' 카테고리의 다른 글

DVD ripping applications for Mac OS X  (0) 2010.11.28
iOS4.2 Released  (0) 2010.11.23
5 design trends in 2011  (0) 2010.11.23
4shared Desktop for Windows7, Mac, Linux  (0) 2010.11.23
Augmented World and Digital Games  (0) 2010.11.23
Augmented Reality vs. Diminished Reality  (0) 2010.11.23

댓글을 달아 주세요