Principles and elements of Visual Design that impact User Experience

Visual design is an effective strategy to prioritize the content layout on a page to guide the flow of the user's eyes through the right information and functionalities .

Aron Walter, in his book - 'Designing for Emotion', explains the hierarchy of user's needs to be pleasurable, usable, reliable and functional.

The aim of visual design which also aims at triggering a positive emotional response should henceforth fulfill these objectives.

The design should give a strong reason for the users to stop, spend time on it, and respond to the call to actions or complete a task by clicking on the links. Hence, it is important to consider:

• How much time do they have to visit a page and complete a task?
• How do their eyes move on the page?
• What makes them stop, stay, read, engage or leave?

Firstly, users have the shortest attention span when it comes to an app or a web page. Moreover, they are spoilt for choice. Users glance through the webpage randomly.

They look for - attractive and clickable images that guide them towards the things that they are looking for.

They stop to read texts -

• that convey the message briefly,
• are highlighted through color contrast and bigger font sizes, and
• are related to what they are looking for

The time to create that first impression and engage the users is as brief as 50 milliseconds. An effective visual design has to use the right visual cues to show the users what they want, trigger a gut reaction, and engage with them .

There are certain principles that guide visual design to achieve the above objectives. And also, there are some key elements of visual design that are used in different ways to create an impactful and engaging visual appeal for the users.

In this article, we will discuss the principles and elements of visual design in UX. How they help to enable great visual experience for users and trigger conversions.

The principles of visual design aims to put everything together to make the entire page cohesive and easy to use.

A web page has different components such as the header, brand logo, textual content, navigation menu, images, call-to-action buttons, and footer. All these different pieces come together to form the complete web page and also make it functional. And once that happens, unity is achieved .

The principles of unity apply to visual and conceptual design elements.

It entails getting all information and functionalities easily accessible to the users with minimal interaction . Related functionalities should be grouped together - such as - 'login and signup', 'add to cart, add to wishlist, save for later and buy now'.

Conceptual unity also ensures a spontaneous user flow and ensures that users get what they want quickly, without much hassle. And this can be achieved when the related content elements and functionalities of one page are combined and connected with the next step or the next piece of information in other pages within the website.

It is all about harmony and visual consistency. It is achieved when the colors and different graphic design pieces and styles follow the uniform visual theme . It is achieved through effective application of Gestalt grouping principles that are explained below.

Remember this activity we all have done as kids? That is how we learned to connect dots and take cues to form objects that we can relate to. The Gestalt principles work like that.

The literal meaning of the German word 'Gestalt' is 'unified whole'. The Gestalt principle is based on how the law of perception works for us. We always try to join bits and pieces to complete the picture as a unified whole .

People use the following ways to put together different related pieces to complete the whole picture:

• Group similar objects;
• Develop connections and patterns between two objects; and
• Try to simplify complex visual elements.

Visual design uses the following Gestalt grouping principles to make the page look well organized and avoid chaos -

• Proximity

  

  Elements that are close to each other appear to be interrelated.

  In Figure 1, the design elements are viewed as a single group of objects that appear to be interrelated.

  In Figure 2, we can see two groups of objects that are different from each other. We consider each group separate but the elements within each of them to be inter-connected.

  

  Credits: Decathlon Men's Sweatshirt

  In this example, the proximity of the image, price, label and star rating of each product indicate that they are interrelated.

  This is how the proximity principle of visual design works.

• Similarity

  Visual graphic design elements that look alike appear to be interconnected.

  

  Credits: Basecamp  and Basecamp - how it works

  In the above example, see how the font type, size and color of the title and that of the textual content are similar in both the webpages. Even the call to action link is in yellow in both the pages. The use of white, and the shades of beige clearly demarcate different areas. And this theme is similar in all the pages of the website.

  This is how the principle of similarity works in visual design. The sameness in theme indicates that all the pages of the website that serve different purposes for users are interrelated. It helps the users to become comfortable and develop trust .

  It is the sameness all throughout that helps the users to be comfortable and develop trust towards the product.

• Uniform Connectedness

  Elements that are put together over a common background or by using an outline around them appear to be related to the users.

  Uniform Connectedness can also be achieved through connected lines, arrows, bubbles or dots .

  

  Credit: Adidas Product

  In the above example, we can see a product view section of an eCommerce page. Mark the dots and A/V icon placed underneath the image. It indicates that we have to click on the arrow mark on the right or swipe the screen to view the products from different angles. All these visual elements are placed in the same area and connected through the dots.

• Good Continuation

  It is achieved when the design elements follow a particular alignment or sequence.

  

• Common fate

  When the visual elements are grouped to follow the same direction or motion . For example - the highway traffic or a marching band.

  

Visual hierarchy helps to sequence the components as per their importance and role in driving the desired response from the user .

Keeping in mind that all visual components can not be given equal importance all at the same time, a sequence has to be planned in the way you want the users to view the visual components.

What do you want your users to see first and how do you want them to go ahead from there? How do you want to drive them to the call-to-action button?

Which element takes a center stage of your design? Is it an audio-visual or a very well-written hard-hitting headline followed by a call-to-action?

Why is it that the call to action buttons are always placed on the right side of the design?

It starts by identifying the elements that are most important and also the ones that are of least importance.

Visual hierarchy is achieved through the placement and treatment of the various graphic components to create the sequence of importance .

Credits: Amazon Echo Dot

For example, in a product overview page, there are various components such as - title, image of the product, product descriptions, cost of the product, discounts and offers, delivery or shipment related information and so on.

Keeping in mind that users can focus only on one element, you need to decide the sequence of the components on the page. For this particular example of product overview - it could be first - the title, second - image, third - the cost, fourth - discounts/ offers, fifth - delivery information, sixth - the product descriptions and so on.

Balance refers to distributing the different design elements according to their -

Balance in art/ design is a very deep subject in itself. There are different types of balance such as symmetric, asymmetric, off balance, radial, and mosaic balance. They are used to fulfill the objectives of visual design for a digital product.

Balance is created using the different visual elements such as color, contrast, position, texture etc. It is all about how different positive and negative design elements are arranged in a way that they complement each other in creating a cohesive picture as a whole .

Most web pages have content in black font color on a white background. This contrast helps us to read without straining our eyes.

Contrast refers to the principle of design that uses opposite elements and effects through color, shape, size and texture. It aims at segregating certain design elements from the rest. All call-to-action buttons are made to stand out by using contrasting colors.

The scale principle in visual design refers to using the size of different design elements in relation with others. Scale is used to emphasize a particular design element, create contrast and add drama to the visual communication by using surprisingly exorbitant size . It contributes in creating an effective visual hierarchy and achieving other visual design principles.

The two design principles mentioned above, i.e. contrast and scale might sound similar to the one we are discussing now. Dominance - as the word suggests indicates that visual design element that you want to bring into prominence . Using design elements such as size, color, contrast, texture, positioning and everything that increases the visual weight of that design element, creates a differentiator and brings all the focus to it.

Visual design brings together elements of graphic designs with UI and UX designs. It uses static images used in graphic design and clickable links to make them interactive and usable to complete tasks. Thus, visual design facilitates communication, interface, interaction and usability of a digital product to provide a good user experience.

Visual design of a digital product creates inter-relation between content, maintains consistency and sense of space between different graphic design elements, conveys brand message, and guides user's actions through an impressive presentation.

The key elements of visual graphic design help create static images and organize the layout of the page.

It is the first visual element that grabs the user's eye balls.

Every color has a distinct vibration that helps to connect and trigger emotional responses . The color for a brand logo or theme of an app/ website is picked accordingly.

In this regard, the principle of contrast plays a significant role while selecting colors for a website. The color picked for the font, buttons, illustrations, graphical representations and photographs should be in contrast to the background.

Proper selection of color can help achieve harmony and balance among different design elements, and maintains the hierarchy of information as it should be. Failing this would result in a cluttered look.

All other design elements draw the user's attention towards the textual content of the page. This is where the product directly communicates with the users . What color, font type and size is used, how the text is layout along with images, blurbs, call to action - play an important role in the visual design of a digital product.

It helps to create different static graphics in a web page . Lines are also used to highlight texts, create shapes, outline shapes, form patterns with shapes and add texture.

Lines are used to create icons. For example - home icon, search icon, bell icons for creating alerts and much more. It helps to make the design elements expressive and communicative.

Lines are joined to create different shapes. Shapes are joined together to form graphics and buttons.

Shapes are connected with lines or through a sequential pattern for example in flow charts, graphs, pie charts.

Shapes are used to highlight information such as blurbs, acts as a separator between two different content or graphic images, and brings attention to call to action links.

It describes how light and dark shades of the same color are used in contrast to define depth and dimension of a graphical figure . A two dimensional shape can be converted into three dimensional with the use of color contrast.

It is used to depict three dimensional visuals. This is where the visual graphics move up from line illustration and shapes. Using 3D technology, form introduces depth in them helping to define the front, top and side views of the graphic .

Forms are also used to create product mock ups to give the look and feel of a real product display on the webpage.

Also used to add dimension, depth and character to the visual graphics. Created by repeating a certain design pattern, lines, and color to accentuate the look and feel of the surface of a visual image . Mostly, designers use two types of texture - tactile that gives a feel of the texture and implied texture that only gives visual effect.

White space or negative space around the content and other design elements gives breather to the eyes and balances the overall design . Without space, all the design elements will look piled up together. It will affect the readability, navigation and the overall usability of the page .

In digital design, grids are used to divide the space with columns and rows. It helps to define the exact positioning of text and graphics in the header, subsections and the footer of the webpage.

So, that is how the different components of visual designs come together to optimize the user experience of a digital product.

All the above elements and principles of visual design ultimately aim at persuading the users to engage with the product by responding to a call to action. The need to be consistent, organized and clear in creating the visual hierarchy, can't be emphasized enough. But having said that, it is also important to test the impact of the visual elements to promote usability of the product. Because, if the visual design is able to make the user do something on the page - it is a major indicator of a good user experience.