How to Balance Emotion and Structure in Web Design?

TMO Group TMO Group

Though visual web design is often seen as an aesthetic add-on, I assure you that there’s more to it than making it look good. Visual design is often a fine balance between design and interaction constraints. The hand-off between interaction designer and visual designer is an important part of the design process that places final design impact squarely with the visual designer. However, it’s the balance between making it look good while retaining the usability that makes a product successful. After all, aesthetics without function is just art.

So, how do you strike this balance between visual design and interaction? Often seen as a balance between structure and emotion, defining each element can help understand how they rely on each other:

1. Design Structure

Design structure helps make sure the user experience is not one of “frustration” and is best considered when looking at the entire system. Taking a step back can help you understand the project and interaction decisions. It also helps give perspective on a design and establish a grid or content structure. This way you can gauge if all the content is going to comfortably fit on each screen.

New constraints may emerge even if you started with the usual suspects e.g. chosen interaction device, lowest common resolution, and oldest common browser. For example, if a client decides one element needs to be prominent in every part of the design, it will take restructuring to support this change.

Design structure allows us to create templates. These templates will later come with a style guide and be applied to any independently developed projects that intend to be integrated seamlessly into the system.

2. Emotional Impact

Good visual design does more than avoid frustration it provides emotional impact. To do this, the Visual Designers have to continue to discover and define the project beyond the structure. This is where a concept or visual theme comes in.

A concept is a brand or experience narrative. For example, say you want to redesign a zoo website. Your main goal is to draw in visitors. So the website might tell a story and invite the visitors to jump into it. Concepts might include “a perfect date” or “a trip the kids will remember.” The use of personas is particularly helpful with concepts.

But sometimes a project doesn’t need a story, in which case we need a visual theme instead. This is true of highly utilitarian software, web portals, or online tools. The theme may be happy, sophisticated, friendly, or modern. A theme might also branch off of existing themes within the brand or company values, such as “reliable”.

People are highly emotional creatures. We often make initial decisions based on the superficial. If a product package looks cheap but has an expensive price tag, we do not think, “the price must be justified by qualities I don’t know about”. Instead, this provokes a simple feeling of distrust regardless of the phone’s innovative software. So the visuals should match the price tag attached to them.

Using both design structure and emotional impact, Visual Designers will create something functional and working within a system, while keeping the product beautiful and in brand. After all, aesthetics WITH function is the making of a great product.(From

TMO Group provide eCommerce solutions, we help to build your own eCommerce project. More details please leave a message at

Subscribe to our newsletter

News of the eCommerce world, best practices to use in your eCommerce platform, insights and analytics of Chinese and South East Asian eCommerce markets - all that and much more in our monthly newsletter.