7 Thoughts on Framing Web Content
blog90% of web design is about speaking to the unconscious: it connects to your values, your needs, your expectations – all of those things that make you who you are. The conscious mind — which makes up the other 10% — is mainly interested in satisfying its hunger for content that will educate or entertain. Only rarely will it engage directly with the presentation of that content.
There are numerous different methods that webdesigners can employ in order to speak to the unconscious – typography, colour, and layout – today, however, I want to talk about how you can frame your content.
1. Avoid distraction
The purpose of framing content is to focus the reader on the task at hand, quietly instructing the unconscious how much attention that should be paid to each part of the screen. Attention is a precious commodity, so it is important to reduce potential distraction in any interface. Focus on telling a compelling story, one that draws the eyes through the content.
2. Set the Mood
In the same way as eating at a restaurant is not just about the food, so interacting on the internet is not just about the content. We seek to identify with the places we find ourselves in. To avoid cognitive dissonance in your readers, set a mood that chimes with your reader’s expectations. Using ornate wallpaper, for instance, instantly adds a note of bourgeois charm that would look wholly inappropriate on an anarchist forum.
3. Double Frame
Of course, it could be argued that the browser window is already a frame and that to add another frame is to descend into a Magrittean world of frames within frames. Note that Google, Digg and Wikipedia all use fluid full-screen . . .
4. Readable Line Length
. . . which on Wikipedia often leads to very uncomfortable line-lengths for reading. Putting a bounding box around the content allows for greater readability.
5. Unify the page
Jon Hicks has recently taken to bounding his content by using a very faint yellowy border. The effect is one of harmony and unity. On Sarah Nixey site, I did the opposite and starkly differentiated the container div from the background for a very modern effect.
6. Breaking out
Crucially, framing allows you to break out of the frame. The easiest way to do this is with transparent pngs and negative margins. Often content is trapped within the box and you can give a sense of freedom by breaching the fourth wall. The Guardian consistently break the bounds on the bottom of their site in a most refreshing way.
7. Usability
Frames and boxes allow the eye to scan different content hierarchies quickly and easily. The current fashion is to take away the box and leave a grid. However, see for what I consider a particularly good example of clear readable blocks.