The emotion of space in web design

Space isn’t just a mathematical grid to be traversed and maneuvered. Different spatial perceptions create different emotional responses in individuals.

Participants in a study that was shown images of open space reacted with less negativity to uncomfortable social situations, while those shown images of tighter, closed space experienced a more visceral discomfort. Emotional films often end with open-space scenes, such as Matt Damon in Good Will Hunting cruising off into the distance, and an uncertain future, in his beaten-up ’71 Chevy Nova. This gives the story a continuous feeling, as though life goes on, more is yet to come, and the audience’s mind is quietly awash with notions of what that might be. But what does this mean for web designers? How can they implement spatial psychology into their creations?

Multi-dimensionality

This may come off as new-age drivel, but the word ‘emotion’ derives from ‘motion’ for a reason. We say we are ‘moved’ when we are deeply affected by something because the sensation is akin to being pushed or ushered into a new psychological state. So too when a film or piece of writing is dull and triggers little to no emotional response, we call it ‘flat’. The most rudimentary way a web designer can use space to generate emotion is multi-dimensionality.

Some of the crudest, most off-putting websites are wholly 2-dimensional, crowded with text or clashing images, like how you might expect an early-2000s geology travel blog to look. Modern designs do their best to subvert this jarring effect. Common problem designers run into is the clash of photos against a solid color background. Without efforts at blending, the photo can look like it was simply glued onto a blank piece of paper, one two-dimensional plane fixed onto another. Many designers use full-screen photos for greater immersion, vectorized (or green-screened) images that blend seamlessly into a background, or shadows to offset the sharp transition. In doing so, they create the impression of a room, an actual space that the webpage exists within. Consider these three websites, for example:

1. Karel de Stoute
2. Ten Two
3. Nordic House

The first, while certainly not an unattractive site, is nonetheless somewhat flat, due to the lack of dimensional blending. Had the photographer used a blank canvas as a backdrop, the web designer would have been able to incorporate the image into the background for a multi-dimensional effect. Now, you might say, being a restaurant website, the landing page need not be so visually engaging, as visitors are seeking practical information like menus and locations. A crass interruption, but the point is valid. For sites whose function is to provide tangible information to customers, intricate designs are not necessarily required.

Ten Two is 2-dimensional and done well. The fonts are clean, the copy sparse, and a simple MS paint-style illustration adds intrigue to the page. There is enough for the eye to feel engaged and encouraged to poke around and see what else is there.

Now, look at Nordic House’s brand design. You’ll have to scroll down a little — the soon-to-be website is laid out but not yet launched. Each image uses shading and lighting to create a 3D effect. There are no 2D superimpositions. The designer has ensured a real sense of space, as though each image or page occupied its own distinct room. Doing so does not distract from the communication of written content — the visual designs are unobtrusive, providing a cinematic backdrop for the brand’s aesthetic. Good design almost seems to move straddle marketing and the arts, as though the brand is not simply shouting at the consumer, cajoling them into purchases, but instead creating a visual branding scheme that speaks for itself. Quadrant2Design CEO Alan Jenkins writes, ‘The effect of great design in marketing is that the viewer wilfully engages with the brand. They feel that something of value has been created and will require no additional offer or promotion to persuade them to inspect the company’s visual branding.’

Shadows and shading

The most natural way to create a real sense of space in a webpage is through shadows. These are perhaps easier to achieve through dedicated photoshoots but can also be generated in graphic design software. They allow the viewer’s eye to track more freely across the page, as the objects on the screen seem to occupy real, continuous space. Unshaded, 2D objects seem like individual islands, each a separate entity unto itself, and do not provide such a smooth visual experience.

Textual accompaniment

Consider also the use of text as a means of accompanying the web design ‘rooms’ you create. Add a human dimension to your page by stating, in simple, plain terms, what your business is and how it works. For example, what materials you use for your products or information about the service you provide. It is generally best to be swift and informative, compiling the most user-engaging words that can be used to describe your business and delivering them to the consumer. In this vein, understatement trumps overstatement — It is far easier to undermine the branding impression than it is to enhance it when using line upon line of text.

Emotion plays a key role in consumer decisions. Consumers will choose primarily for practical reasons, but a brand that is also able to trigger an emotional response may have customers returning like bees to nectar. This is no easy feat. Ross Pike of web design agency Quadrant2Design comments, ‘The science of triggering emotions in consumers is limited. We know that certain colors evoke certain emotional responses, but why certain visual designs create such powerful reactions is difficult to ascertain.’ Space and dimensionality may be one way to enhance the appeal of your website, forging a relationship with consumers that extends beyond the pragmatic.

Theo Reilly wrote this guest post

Theo Reilly is an independent writer and multilingual translator whose goal is to counteract stale writing in business blogs. Theo has a particular interest in business and marketing-related matters surrounding the online world, web design, exhibitions and events.

Tagged as:
designer space webdesign webdesigner webdev webdeveloper webdevelopment website

Share on

email

Previous

trending_flat

Interview with Sara Jackson-Holman

Entertainment

Next

trending_flat

Loren Allred Releases Late Bloomer EP

Music News