Layered Web Design (LWD) is an approach to building one-page static websites that look and behave more like web apps or native apps. Instead of creating one-page scrolling sites, LWD takes those sections and layers them like a stack of paper. The layers are then brought to the front through user interactions, such as swipes, taps, or clicks.

Many of the elements of traditional web/app design are present. However, it's the interactions which straddle traditional web design and current web app design. Using Javascript (JS) (or JS libraries, such as jQuery) LWD can visually show and hide content on demand, as opposed to showing everything on the page (as is done in a typical one-page site design).

The real beauty, though, is that this type of design satisfies both accessibility and aesthetic. Because the web site is a one page site, all of the HTML content is available to aid in accessibility. Nothing is being created and served through JS so if everything fails, then the page should still show and accessible browsers should have no trouble parsing and reading the HTML.

For those using common browsers, they will get a better visual and user experience because the content does not require the scrolling and disorientation of a typical one-page design. Scrolling is limited (or can be completely eliminated). Users can actually get the information they are looking for immediately withouth AJAX, multiple pages, or scrolling through information that is of no interest to them.

How does it help users?

  • Accessible
  • Limited or no scrolling
  • Easy-to-understand, app-like feel
  • Extremely mobile friendly
  • Faster page/section transitions
  • Saves data/downloading (important on mobile)
  • Gives users only what they want when they want it

How does it help developers?

  • Only one page as the code base
  • Requires only basic Javascript skills
  • Gives some importance back to CSS
  • Forces developers to consider the user at every turn
  • Smaller, leaner file structures
  • Decreases development time compared to a multipage web site
  • Satisfies accessibility requirements
  • Gets rid of unnecessarily complex Javascript frameworks (which are good for some clients but probably not most)
  • Easy to deploy
  • Web site can be used as both app and site, no need to create both
  • More awesome page and section transitions
  • Can choose to go all CSS or a mixture of CSS/JS
  • Easy for those coming behind you to edit code

LWD is still in the conceptual stage. Here are some early examples to get an idea of how this philosophy can be used to create a better, more delightful experience for users.

Small Business

SpartanNash

Restaurant

Portfolio

Initial Concept

tl;dr

If you're interested in learning more about the philosophy of LWD, check out this page, which explains how LWD can solve some current issues in web design/UX:

http://codepen.io/brianhaferkamp/pen/LbBxBX


1,616 0 29