Moving Towards a Diegetic Web Design

Towards a Diegetic Web Design

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.

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.

Towards A Diegetic Web Design

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.

Comments

  1. / Reply

    Thanks for the great article Steve. It caught my attention because I recently faced many of the same issues you explore. My diegetic design project is probably most similar to the Average Joe site you covered, but I wonder what you think about a couple key differences.

    We went with a topdown desktop view with a pad of graphpaper containing the content. As you mentioned, the act of scrolling can break the organic feel of something like a topdown desktop view, so we decided that the desktop surface would remain fixed and scrolling actually moved the pad of paper. In retrospect, this is fairly similar to how OS X Lion introduced “natural” scrolling where the content moves, not the scrollbars.

    A nice side effect of moving our pad of paper on top of a fixed desktop surface is that we can reveal bonus content that starts out hidden beneath our primary content. This element of discovery was something we were hoping to incorporate. So we can reveal carvings on the desk or photos or drawings that lead to other corners of the site. Not trying to link drop, but it might be more helpful to see what I mean: renewvation.com

    It is tricky to implement a whole site without losing the organic feel, especially if you have enough content to cover many traditional “pages”. But the advantages and hyper-advantages of a virtual interface versus physical reality often leads to an unavoidable hybrid, like augmented reality, where we have the better parts of each mashed together. I know you are focusing on creating sites with an organic design, but it’s such an interesting direction I can’t help but follow it a few steps further.

  2. / Reply

    Hey Jeremy, thanks for the feedback! I really like what you’ve done with renewvation. Having a fixed background with the simulated feel of the paper sliding upwards really maintains that sense of fixed-space that I think sets diegetic web design apart from others. (I especially like that you decided that it would scroll over the nav-menu–I often find it tempting to keep that fixed but it proves really disruptive to the visual immersion).

    I think my next experiment will involve something similar by incorporating the jQuery Parallax plugin (such as this: http://tympanus.net/Tutorials/ParallaxSlider/). I think it provides that fixed sense of space but with an added depth of field that would merge quite well with your fixed-background/scrolling foreground. Either way, excellent suggestion/addition to the diegetic toolbox!

  3. / Reply

    I must say thank you about your Honourable Mentions List

  4. / Reply

    Thank yoy very much!

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.

d
c