Moving Towards a Diegetic Web Design

by in Design on 1st Aug 2011 · Comments

In the world of cinema studies, diegesis refers to the internal consistency of the film. A diegetic film, for example, would introduce any music or titles through a logical on-screen source, such as a radio or newspaper. In contrast, a non-diegetic film would superimpose the soundtrack or titles over the footage.

Towards A Diegetic Web Design


The first example has an internal set of restrictions that constrain production while establishing a more natural or organic presentation. The second example offers more freedom but sacrifices internal consistency and intuitive structure. This article outlines the application of these diegetic principles to web design and then provides a collection of resources to make it happen.

Advantages of Diegetic Web Design

  • Intuitive interfaces
  • Logical workflows
  • Readily recognizable layouts
  • Visually-constrained design direction*

* The word constrain is usually associated with frustration and likely seems counter-intuitive to creative design but it can actually prove quite inspirational. If you limit yourself to real-world designs that have an internal-logic dictating their placement and behaviour then a number of complicated and often troublesome design decisions have already been set in place. And since such a design diegetically reflects a naturally-occurring interface visitors can quickly identify interactive elements and the flow of information.

Examples

Angus, Thongs, and Perfection Snogging
This site adopts a corkboard motif, visually integrating content based on the themes of photos, stickers, and buttons. Rather than incorporating a menu to control navigation (which would break the diegetic consistency), the designers swapped the standard cursor for a pen and set the page to pan based on the movement of the mouse. The main content is located at the center of the page, while secondary and tertiary content is placed on the periphery.

In this manner the initial premise of a real-world interface translates seamlessly into an organic and intuitive design that constrains content (drop-down menus, live content, and in-page scrollbars do not conform to the diegetic premise). However, the title of this article is towards diegetic design and so many of the sites featured here do not strictly conform to the rules. And so tooltips appear over images and a pop-up menu floats at the base of the screen, disrupting the immersion.

Angus, Thongs, and Perfection Snogging

Wall Swaps
Following up on the corkboard theme but without the Flash is Erskine Design’s Wall Swaps. Again, the visuals are largely constrained to those items that can be posted to a corkboard however Wall Swaps takes a few creative licenses, pinning minified t-shirts and hats alongside actual-sized stickers and photos. The site also mixes diegetic text (contained on scraps of paper, business cards, etc.) with superimposed captions.

What’s more, the immersion is thoroughly disrupted by the navigation-menu superimposed on the bottom of the page. However, Wall Swaps maintains its diegetic sense of space—icons correspond to physical locations on the board and the designers make excellent use of a jQuery auto-scrolling script discussed in the second half of this post.

Wall Swaps

Average Joe
Joe Grisham’s professional site for his photography career maintains a fairly consistent diegetic aesthetic. His name is represented by a sew-on patch, the content background is that of a pad of paper while a coffee stain adorns the white table in page background. And although the navigation is handled through a rather standard menu on a page-by-page basis, each section maintains the real-world design. Menu aside, no text is superimposed as cue cards, labels, photograph-templates handle the content while airline tickets, receipts, and even a claymation creature flesh out the natural design.

Your Average Joe

Viget Labs
Viget Labs adopts a horizontal-scroll approach with a wallpaper motif establishing the diegetic theme of items posted on a wall. However, they’ve dropped the scrollbar in favour of a scroll-to effect. Each item on the posted list is positioned off to the left, such that clicking on the link scrolls the same distance each time but reveals the respective content. This disrupts the immersion but avoids the long-scroll it would take to reach the final element on the list.

Viget Labs

Hasrimy.com
Hasrimy.com provides a top-down perspective, presenting content along the horizontal plane as though each section were taped to a tabletop. The end result is logical divisions between various sections as sheets of paper end and others begin. Small touches, like coffee stains and pieces of tape, create a very organic and familiar setting without sacrificing accessibility.

Honourable Mentions

Even More Diegetic

The above websites offer interesting aesthetics and intuitive navigation but for many designers the constraints may prove too restrictive. In fact, even those designers abandoned the diegetic design when it came to displaying certain pieces of content, utilizing tooltips, sliders, and other immersion-disrupting elements. However, such designs have overlooked a readily-available and diegetically consistent opportunity in portable digital devices.

It’s perfectly logical to see a cell phone or an iPod lying on a desk and it just so happens that their actual screen sizes are ideally suited for a navigation menu. If you’re in need of something more expansive eBook readers and tablets provide ample space for blog posts, video playback, and contact forms. You can even go so far as to create a custom interface for such devices, combining image sliders and unique menus that will immediately be familiar to even the most modest gadget user.

Navigation

jQuery.ScrollTo
ScrollTo by Ariel Flesler – This robust jQuery plug-in provides intuitive auto-scrolling that can create the effect of directing the visitor’s gaze rather than emphasizing the fact that they’re on a webpage plunging deeper into an overflowed div. You can see it in action in the aforementioned Wall Swap.

ScrollTo

OSX Dock by Jarel Remick
By replicating the OSX dock Remick’s sleek menu offers visitors a familiar navigation experience with a surprising array of options and configurations. This menu is ideally suited for a tablet interface and is especially useful when dock icons are set to toggle content (via display: block and none).

Dock

iPod Drilldown Menu
If you’re looking for a smaller interface The Filament Group’s iPod menu is compact and yet familiar. It proves especially intuitive when combined with a music player mock up where the menu appears on screen. Pair this with the ScrollTo plug-in and you’ll have an intuitive and diegetic navigation in place.

iPod Menu

Moving Boxes Slider by Chris Coyier, Noah Hendrix, and Rob G
There are any number of jQuery-based content sliders out there but I’ve found Moving Boxes to be accessible and customizable.

Slider

TinyScrollbar by Maarten Baijs
Since you are creating a custom interface you may find that the standard browser scrollbar doesn't fit with your new UI. Baijs' TinyScrollbar allows you to re-skin overflowed elements using some pretty straightforward jQuery.

Tiny Scroller

jGrowl Notifications by Stan Lemon
You may also wish to provide additional content on screen that doesn’t necessarily require an entirely new screen. Enter jGrowl, a spiffy notification system that seamlessly integrates with a cell phone or tablet UI.

jGrowl

Visual Resources

iPhone 4G .PSD
iPhone 4

BlackBerry Bold .PSD
Blackberry Bold

iPad .PSD
iPad

PlayBook .PSD
Playbook

Packages

iPhone UI by Anton Shevchuk
As near complete an iPhone mock-up I’ve seen, Shevchuk’s iPhone UI boasts a wide array of useful and intuitive elements all packaged together. Attempting to implement the package on your own site may be met with a rather steep learning curve but the feature-set offered here is well worth the time spent learning the ins-and-outs of the package.

Bureau

A Diegetic Demo
I’ve combined many of the resources above into a site designed with these diegetic principles in mind. The site itself is an on-going project that utilizes a desk top as a visually constrained space. Content is added via a PlayBook and an iPhone. The PlayBook is a combination of Moving Boxes Slider, jGrowl, and the OSX Dock plugin - coming together to produce a custom interface for a fictitious police department.

The iPhone is a modified implementation of Anton Shevchuk’s iPhone UI. Ariel Flesler’s ScrollTo has been mapped to the left and right keys to facilitate moving between primary and secondary interfaces. I’ve also eliminated any tooltips that would appear outside of the ‘digital’ screens. Additional visual details were scaled to match the ‘actual size’ of the larger devices. And while the project is more proof-of-concept than a fully-fledge site, it does contain numerous design elements that uphold the theme of diegetic web design and may inspire more practical applications.

In Conclusion

Designing a website from an organic and diegetic perspective won’t meet the needs of all your projects. However, if you’re looking for positive creative constraints, building a site with these principles in mind will lead to a unique end-product. As the examples demonstrate, such sites tend to have readily-recognizable layouts with fairly intuitive navigation. They also arrange visually engaging material in a spatially-oriented manner, creating a familiar appearance that looks great without sacrificing functionality.

I’ve covered a few different diegetic themes in this post but as you can tell, most tend to be either tabletop or wallpaper-themed. Do any other settings lend themselves to diegetic web designs? Since diegetic doesn’t necessarily mean natural you need not limit design ideas to real-world settings either. Augmented reality, for instance, provides an at-hand metaphor for designing compelling pages that have an internal logic constraining design decisions.

From this perspective almost any interface that is bound by logical rules offers up a ready-made design. So, how about it? Are there any everyday objects that you intuitively know how to control? What do you use to organize your life offline and how could you enhance that experience through a website?

Steve Wilcox studies web design and digital narratives at the University of Waterloo. Working in the fledgling field of experimental media, he's actively involved in creating visually unique and functionally singular web projects that push the capabilities of browsers and challenge readers to reevaluate what a web page can be. Steve also blogs and tweets actively on social media and game design.