I have been working using many of the elements provided by the Polymer team. I have seen documentation that shows using app-layout elements and others that show the same thing achieved using paper elements.
For example paper-drawer-panel is very similar to app-drawer. The paper element appears to have more configuration options and allows for multiple paper-drawer-panel elements embedded within each other as opposed to the less flexible app-drawer.
<paper-drawer-panel>
<div drawer> Drawer panel... </div>
<div main> Main panel... </div>
</paper-drawer-panel>
vs.
<main>Main panel....</main>
<app-drawer>Drawer panel... </app-drawer>
Is there a reason to prefer app-layout elements over the similar yet more flexible paper elements?
I think the <app-*> elements were developed later in response to requests for standard templates for apps. I suspect some of it is just name changing to make it easier to understand.
In particular I have been using
<app-header-layout>
<app-header
fixed
effects="waterfall">
<app-toolbar>
...
</app-toolbar>
</app-header>
... my main content
</app-header-layout>
with great effect. You can actually add several toolbars and some of the effects allow fading from one toolbar to the other as the headers scroll up (including a background image that fades away).
My <app-toolbar> contains all sorts of things including drop down menus.
I also found it easier like this to understand how to make lazy loading work. In fact my content only contains a "session manager" element and a "pages" element, the latter of which is only lazily loaded after the session manager has successfully validated a user (via cookie or login). That pages element has an embedded <iron-pages> and <app-location> and <app-route> to do all management of the application post login.