Visual Design

Return to index

Visual design is perhaps the most immediately emotive ingredient to a user’s experience. Seeing is believing, and what our eyes see immediately tells us if we either like or dislike what they are receiving. It has a sway on the other 5 elements of the UX framework by being very tangible and creating an instant feeling in a person. As UX designers we need to be aware of the importance of visual design as a doorway to incorporate the other equally important facets in our work. Visual design, like it or not, is still king the first few seconds that a user interacts with a product or service.


Saul Bass, the legendary graphic designer and film maker, described design as ‘thinking made visual’. In many ways visual design should communicate the more complex considerations of a solution in an immediately accessible way.


Aesthetic usability

Think about a website you like and there are probably a good deal of visual design that helps you understand its content better, what it offers and how easy it is for you to use.

Aesthetic usability is a quality that arguably Apple have made very much part of their product offering. Consider their most successful devices (iMac, iPod, iPhone and iPad) and there is an immediate attraction in getting to know the product, even before you really know what it can do.

As there is an emotive connection (one of delight or intrigue) it affords the product a level of forgiveness within the user when the product or system fails.


We can also see this in many websites, the Whale fail of Twitter being a notable one. As the website about the image says:

"This image brings a human touch to a moment of frustration..."

An attractive design is initially perceived as being easier to use and tends to garner a loyalty and forgiveness in a user group that promotes positive relations between the product and the person.


An ingredient of aesthetic usability, particularly in web pages or screen based interfaces, alignment is a design principle that is often either overlooked or considered a standard aspect of good design. However it does warrant special consideration especially as its importance is the reason why the grid is such a defacto standard in page design, for both the offline and online worlds. As alignment is the norm, elements on a page that break out cause visual tension the exception creates a focus on an element on the page.


This is a good example of a site that uses a grid but, with the use of graphics and juxtaposition, breaks it with visual trickery.

Even using a small colour palette it effectively does its job of engaging the user and encouraging interaction. The visual design gives dynamism.

The content of the site is for the Digital Research Centre in Dublin but the site goes some way in getting you interested way before you start to read the content.


Despite many people being colour blind it still has a key role in giving meaning to elements on a screen or in the physical world. Colour, and importantly hue and saturation, have effects on the way interfaces are used and perceived by users. Contrast gives users a guide: the more saturated the hue of a colour, the higher the priority. Similar contrast types are seen as part of the same group or importance. The use of contrast is an ingredients of visual design that is not immediately the most noticeable but one of the most notable to attract attention and produce focus in a user.


The designers of Barack Obama’s website agonised for days over the correct shade of blue that would come to be synonymous with the campaign and eventually the Obama brand.

Throughout the site, the use of key colours, for calls to action, are used strategically to either prompt or persuade (the red here used sparingly) or to educate and inform (the muted blue grey in the right hand column).

The actual colour palette is limited and correct colour usage should always be used in this way. Too much colour variation produces visual noise and confusion.


The site mentioned above also exhibits consistency on a huge and intricate scale. The elements within the design are part of a larger code that communicates a meaning that is consistent across all touch-points. In this case the font was used throughout the campaign from signs to captions to all types of visual communication. It is a great way to maintain focus on the message and the sender. By maintaining the message throughout the physical world it is a subtle stamp of quality that underpins many good user experiences.

Golden ratio

To enhance the aesthetic quality of an object or interface design the golden ratio is a good principle to explore largely because of its prevalence in nature, art and architecture.


Areas where visual appeal have been long established and unquestioned can provide a good basis to explore in designs where other factors are not compromised. There is something simplistic, natural and appealing about design that exhibits the ratio of 0.618 within its form. It gives visual balance and makes the design inexplicably interesting.

Highlighting and Legibility

Typography, font size and style can guide a user when used well or lead to confusion when it isn’t used consistency. Presenting a message in a particular way can reinforce the impact of the message. Ensuring it is easy to read and uses the appropriate font size helps in getting the message across. In many cases the intelligent and artful use of typography does this job brilliantly as it implicitly considers legibility and accessible text as part of its remit. That is obviously when it's purpose is to convey a message and not make a statement.


You may not agree with this statement from the Information Architects but you cannot deny the power of typography to not only deliver the message with clarity but also with meaning.

These are just words but the strength of type, colour, style and size give the statement more depth and authority.

When a website or interface has legibility problems it is often instantly reviled. People deserve a basic level of accessibility and this area is one to pay attention to first when thinking about visual design for improved user experiences.


The strength of modular design is an ever-present in web pages and web applications. Smaller services or applications that form a larger, more complex system have really found their niche in the iPhone and contribute to the success of the product. Highly bespoke and tailored user experiences are achievable by offering the platform that can be adjusted to individual user needs.

Personalisation is achievable giving much more engaging experiences. The visual design should accommodate this need.

Occam's razor

This principle states that the unnecessary abundance of features decrease the effectiveness of the designed solution. The effects of this is easily seen in many mobile phones’ features. If two solutions are placed side by side, and both are equal in terms of what they can deliver but one is simple and the other is complex, then the design that exhibits simplicity wins because it is practical.


Before the iPhone came along, the Flip video camera was one of the best sellers on Amazon and part of its success was it's no frills point-and-shoot capability. All non-essential features have been removed and stripped down to the power button, record, play, delete, zoom, lens, microphone and speaker. The only other features are a 2 inch screen and USB arm.

It is an exercise in concentrating on the absolute necessity of the object to create a product that isrelevant to the user and suitable for their context of use. Screen interfaces need to reveal the interface in a manner that is contextually relevant to the user, intelligently giving the user what they need, when they need it. Tailor-made digital experienceswill define future UX work.

Proximity and Similarity

Parts of the Gestalt principles of perception - proximity is based on the premise that when elements are grouped or clustered together they are considered related to one another and those which are spaced apart are considered unrelated. When this is used well, it has the power to convey meaning in a way that is instant and may override other principles that are present on a page. For this reason the grouping of elements needs to be considered carefully and will often need to work alongside other principles. The Fritz Hansen website groups furniture by type and encourages an interaction with the elements.


This site also uses similarity - the visual look of objects resembling each other which produces a feeling of belonging to one another (even though the furniture has been designed by different designers). Strongest grouping effects are seen with elements that use similar colours and shapes. In this instance the same perspective and use of neutral colours give a feeling of cohesiveness.


Simon Page’s illustration captures the attractive qualities of symmetrical forms that are often seen in nature. Symmetrical elements arranged to make a pattern of reflection, transition or rotation is an instantly recognizable way to achieve a great aesthetic quality, and often beauty.

Simon Page is a visual designer who manages to have that innate ability to produce stunning visual designs. So much so, I wonder what his work would look like if he designed an interface for a client.


Would it be usable? Would it be organized correctly, or communicate in the user’s language? Would it give a great experience? I have a feeling that it would, because of his ability as a visual designer.

Visual design is so important because we are easily stimulated and manipulated by visual cues. An awareness of this important theme to an experience framework is essential and if we are calling ourselves UX designers we need to consider this as a core part of our toolbox.

The next section is about what many consider to be the core of UX, namely usability of interfaces and systems.