Creating Depth in Web Design: 5 Design Tricks

Creating Depth in Web Design: 5 Design Tricks

Giving depth in design can give a website a unique feel, and a more memorable appeal. Depth can create a sense of realism, even if it’s presented in an abstract way. This added sense of realism can create a lot more interest in any design, whether it be a graphic design, logo, web design, or other. Creating depth on an otherwise flat page can also be a great way to add emphasis to particular elements, and to help create correct hierarchy in design. Flatter surfaces may get less attention, while those with depth will gain more attention.

Creating Depth in Web Design: 5 Design Tricks

In this post we’ll go over five design tricks and trends for creating depth in design, and some examples to go along with each. We’ll also cover the do’s and don’ts of using depth and 3D features in design, and cover when it can be appealing, or when it can be too much.

5 Design Tricks

Realistic Interfaces

While this look is all too common, it’s effective. The look of real, pressable buttons and elements create a sleek design that seems much easier to interact with. Gradients, shadows, and other overly-used elements don’t have to smother the page, but adding a few sleek effects to a button can really make it stand out. In the example below, we can see how this 3D button stands out against the link next to it, giving it a primary call to action.

Depth Button

Creating realistic interfaces however can take a turn for the worse. We’ve all seen designs that overly use gradients and drop shadows, and are anything but subtle. The key to creating successful interface elements with depth is to really imagine how they would look realistically – does that drop shadow look like it’s really floating off the button naturally (or other element of your choice), or does it just look like a drop shadow placed there without real reason? Don’t just make 3D interface elements, make realistic ones.

Realistic User Interfaces

The image above features an example from a great tutorial on creating depth in design like this: Crafting Subtle & Realistic User Interfaces. This tutorial specifically covers a lot of theory and best practices when creating individual 3D elements with this style, but there are plenty more step-by-step tutorials and examples around the web in full web design interface tutorials, button elements, and so on. Simply going through the motions for web element tutorials on a site like PSDTUTS is a great way to begin learning how to accurately and correctly create these elements with realistic depth.

Wrapping & Ribbons

Creating wrap around has been a very common design trends within the last year or two, and while it’s used very commonly, it’s also a nice technique that creates depth in design for a nice visual effect, and can also help bring attention easily to any areas that need it, like in our first example above.

Wrap Around

There are plenty of different looks for this, from a solid folded look above, to a more rounded and soft look. A great showcase of these elements can be found at WebDesignFan: Showcase of 3D Elements in Web Design.

These ribbons can often be used for headlines, blog dates, featured items, or just anything else that really needs to stand out, such as a call-to-action design element (Sign up, Contact, etc.). Just looking through the showcase mentioned above, or through others like it, can give you an idea of where they are commonly used, and some great places they belong. In other circumstances, some designers use wrap arounds to create depth and separation between full site elements.

Footer Wrap Around

For example (above), a footer may separate itself from the above sections on a page by acting as a complete wrap around itself, wrapping around a content layer. Above links to a tutorial that’s great for softer, or rounded, wrap around. Likewise, WebDesignTUTS has another great tutorial on the more common “folded” wrap around look: Create a 3D Ribbon Wrap-Around Effect (Plus a Free PSD!).

Perspective

Creating a unique perspective can also add depth, in a very visually appealing way. This method is not as subtle as many other design tricks that create depth, and is often meant to create the main interest in the design. A cool effect, and often times a sense of realism (even if in a cartoon-like way) can create a memorable experience for many visitors.

Meomi Perspective

The perspective design approach can come in many different forms, and there really isn’t a lot on exact, step-by-step how-to’s for designs like this. Rather, perspective designs are fairly unique from designer to designer, although the general idea is quite a trend.

The basic rules for creating perspective are much the same as you may have learned in an art class back in school – following consistent angles and horizontal alignment can make things look right, as well as the right proportions size-size and with any change in angles across a horizontal space. Take a look at some tutorials from an artistic standpoint: one-point perspective tutorials, multiple perspective tutorials.

Steven Perspective

The above is a great example of an abstract perspective in web design. Likewise, there are more realistic examples, as depth in any form creates more realism on a 2D space.

Realism Perspective

Marc’s Design offers realistic interfaces and depth using a few of the methods above, as well as perspective to bring focus to the main element: the computer interface featuring the portfolio pieces. Perspective, while primarily creating strong visual interest, can also be directed to points of interest on the page.

Breaking the Grid

Sometimes there can be none or very few design features that give an element depth, such as drop shadows, curves, and gradients. Depth can also be easily created by overlapping the grid, and placing some elements over or under others. With the design below, simply making the content area overlap the rest of the areas to seem bigger, makes it seem closer — giving the design depth, with merely flat elements. A slight drop shadow is used in this design for more emphasis, but there are also plenty of examples that create depth in a similar way, without this added design touch.

Breaking the Grid Church

In the design below, almost all the page elements are flat. However, by overlapping a few pieces, depth and order is created. This creates some interest in terms of design, and keeps the design from looking too flat or boring.

Pretty Production

Finally, we see a web design that uses primarily flat elements and sections, and has created depth within the imagery of the site. Overlapping objects create depth for the entire design, and the coffee mug acts as a part of this image, but then overlaps the header, creating more depth and interaction between the site sections.

Full Creative

Playing with Shadows

Creating depth with shadows is the final design trick we’ll discuss today. It’s a popular trend, and as one can see, it’s used in many of the design techniques featured above already. However, there are a lot more interesting things one can do with shadows, rather than just creating a subtle effect. Things such as floating elements, warped pages, and so on are all creative effects that can be made with a unique use of shadows.

Floating Shadows

A rounded shadow below an element on a page can make it appear as if it’s in 3D space, no matter if the floating element is a lifelike interface like above, or a flatter design feature.

Realistic Shadow

A more realistic approach can also be used, and quite easily. Simply using a photo or some element with a shadow included can help it stand out, if used from the right perspective like in the example above. Otherwise, for Photoshop-made elements, realistic shadows from another unique perspective can also be imitated digitally.

Standup Shadow

A shadow from a front light source can give the impression of an otherwise flat element apparently “standing up” or being propped up for display. Notice the subtle gradients to the lower left and right of the screenshot, as well as a small realistic shadow below the iPhone as well. This design affect also mimics a shadow that would be on a glossy surface. Assuming different textures the shadow lies on is another great way to get creative with shadow effects.

Shadow Warp

Finally, warped shadows are a more recent trend that can be used in a number of situations, and provide a sense of depth easily without sacrificing structure from a development standpoint much of the time. (See how the content area above is still square, and does not need to be bent itself – easy to code and easily expandable). A similar technique, page or corner curls, are also often times used to create points of interest.

Conclusion

Depth doesn’t always have to be used in design in order to create a great look, but it is a common trend that can still create great results. There are several techniques that work, as well as some things to avoid. Above we covered five of the most common trends for creating depth in web design, but of course, there are plenty more. If you know of any further examples, tutorials, or trends, feel free to link to them below!

Kayla Knight is a web designer and frontend web developer. She specializes in responsive web design, progressive web technologies, and also knows her way around most CMS's and PHP. You can find out more and check out her portfolio at kaylaknight.co.

Comments

  1. / Reply

    A really useful article, worth reading. Thank you Kayla for sharing your experience with us!

  2. / Reply

    Awesome post! Love the depth in web design, actually im working in some with shadows to create the depth effect http://bit.ly/j2kDSb :)

    • Bryan K.,
    • June 20, 2011
    / Reply

    I’m a big fan of ribbons.

    I’m not such a fan of warped shadows. To me the double warp shadow doesn’t make the content bend up, but rather it appears the background bends down. I suppose this matters more on screens with less pixel width. Either way, I don’t like this.

    Thanks for the round up.

  3. / Reply

    Thank you Kayla for this awesome article. This inspired me to new ideas, instead of continuing with my ‘just animated 3d’ layouts and graphics.
    best regards,
    juergen

  4. Thank you Kayla for sharing such a wonderful article. Every aspect mentioned is important and you have picked up great examples to illustrate the point. Two thumbs up for this awesome article!

    • Neha,
    • June 21, 2011
    / Reply

    Thanks for the CSS3 that it letting the designer to make the depth in website design without relying on the images and can use the coding n css to create it.

    Good post to learnt he Actual meaning of the DEPTH.

    Thanks,
    Neha

    • Ryan,
    • June 21, 2011
    / Reply

    Great information. Thanks for taking the time to put it all together for everyone. I think the one thing that many people leave out in their designs is the use of shadows. It is good to see that I am not the only one that thinks it can change the entire look and feel of a site.

  5. / Reply

    Great article, I always thought that small things are most important ones and not only in design. Very often a little accent can change everything.

  6. / Reply

    I think adding depth to a site is becoming more important just to get your site to stand out from others. I think shadows and gradients are the most used design feature to add depth to a site, which was slightly over used in Web 2.0 designs. Another design element which I see a lot of designers using on their sites is textures, this is a subtle way of adding depth to your site without distracting the user from the content. I agree with Neha, CSS3 allows designers to experiment more with their designs without having to think too much on how they will have to code it using multiple images and divs.

  7. / Reply

    You definitely took the time with this article. Great examples and images really bring it all to life. I wish more web designers would take your advice – there’s just too many drab sites out there!

  8. / Reply

    A really useful article, worth reading! Thank you so much!

  9. / Reply

    I used to make warp shadows in some of my latest layouts,and after reading this nice article I’m feeling quite inspired in using the 3d perspective technique in a more proficient way.

  10. Awesome Tricks – I Really Enjoyed Reading this – ” Hats Off “

  11. / Reply

    There are some great tips for everyone. Great article

    • marc,
    • June 23, 2011
    / Reply

    Hey Kayla – thanks very much for featuring my work in your article. It is always very flattering to be displayed with such a talented group of folks.

    • Rana mukherjee,
    • June 27, 2011
    / Reply

    Nice tricks

  12. / Reply

    Create depth in design is one more effort to turn de web interface a more pleasant experience, mainly currently when the internet is so used and important to business and social life. The link to tutorial on creating depth in design is great.

  13. / Reply

    Nice informative read, Thanks!

  14. / Reply

    Awesome Tricks!

    • Bill,
    • July 2, 2011
    / Reply

    What a nice article. I really enjoyed it and it made me revisit some of my thinking. Thanks!

  15. / Reply

    Great info about creating depth in web design. These tricks are quite helpful and will definitely help in using the 3d perspective technique more proficiently.

  16. / Reply

    Great post! Those are some impressive examples. Thanks for sharing this.

  17. / Reply

    Amazing post, love reading and looking at some awesome examples.
    We are have the problem at the moment with the attention to detail, but half the time you can’t see any difference in your website but once you put them all together it makes one hell of a difference!

    Really useful article thanks for sharing!

    :)

  18. / Reply

    Great post and great tips…Most of the time the little thing on a website makes all the difference

  19. / Reply

    Great article…gives me a new perspective on a lot of things. I am going to make a new site at the end of next week but before that i am collections as much information as i can.

    Thank you for sharing

  20. / Reply

    Your web design tips are just getting better and better. Thanks for the share they are indeed very useful. =)

  21. / Reply

    http://www.picblog4u.com

    Download high Quality desktop wallpapers for free. Your source for Latest Bollywood Wallpapers, Stunning Full HD Wallpapers, Sexy Wallpapers, amazing Nature wallpapers, beautiful 3D wallpapers, Indian wallpapers, and many many more.

  22. / Reply

    Depth in design is one thing that separates professional designers from beginners. It takes more than just the knowledge of Photoshop tools, but an artistic eye as well.

    We recently posted a tutorial on getting realistic looking depth using a shadows and other techniques

    • vladimir,
    • May 20, 2013
    / Reply

    I like the article its a shame the site isn’t mobile optimized, discredits the writer and website on being legitimate

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.