Layered elements and three-dimensional effects are the must-have technique in the 2D web space. Thanks to the fun techniques, and even better how-tos, introduced primarily by Material Design, layered elements are popping up in projects of all types.
What’s particularly nice is it gives a website a more realistic feel. The user can almost reach out and grab the elements on the screen. (And that’s a good thing!) The trick is that every layer should look real and light, and layers look natural.
Here are a couple of ways to start experimenting with layers in your design projects:
- “Lift” elements off the background with a simple shadow or animation. Olle does this with multiple elements on different planes, but they all pull together and look natural.
- Allow elements to intersect. Text can crossover into the space occupied by an image.
- Parallax scrolling features are an interesting way to create layered elements (a foreground moving over a background) without being too overwhelming.
- Use geometric shapes, animation and color variation to mimic depth in the design. Users should feel like they can almost fall into the visuals, such as the experience established by Delete Agency.
- Create layers by going outside of the canvas, with elements that go beyond the background or edge of the screen.
- Allow elements to rest on top of a textured background to create separation between the top layer (which users can imagine actually touching) and background layer.
[Source: Webdesignerdepot]
