I see more and more wireframes looking like this :

layered ux

I need to explain an imbricated and layered structure to someone, so I want to use images like that.

Is there a tool that already does that, or do I still have to do it myself using Photoshop ?


I'm not aware of an app specific to this task but there are a number of Photoshop actions that may help achieve the look you're going for. This page has a couple that may suit: http://designbeep.com/2013/10/04/15-free-perspective-screen-mockups-showcase-app-design/

Actions with potential: Basic Mobile App Screen Mockup, Isometric Perspective MockUp, Screen Layers

And if these don't work you can always record your steps while adjusting your layers and perspective and use them again later for other tasks.


So far I haven't found any app doing this.

I have been using Photoshop to do it. With Photoshop CC 2014.2:

  • Create your image, one layer for each 3D layer you want.
  • If you want to edit each layer easily, you can create one file for each, and then import them in a "master" file using file > place linked.
  • For each layer, use 3D > new postcard from layer or 3D > new mesh from layer > postcard
  • You can then rotate, pan and move the layer to create the "layered" effect

Not the answer you're looking for? Browse other questions tagged or ask your own question.