How UX design can enhance the brand voice?

Borrowed mainly from graphic design, the production rules of web interfaces start from the universal aesthetic principles. Found in other spheres of the artistic fields – such as in architecture, urban planning, industrial design, interior design, painting, illustration, photography, etc. – the premises that determine the success of a website that is easy to access and that produces a positive navigation experience starts from established notions found in the visual arts: composition, color, typography, contrast, spatiality, legibility, crossing the visual field.

Unsurprisingly, producing a visual hierarchy is one of the main methods used by designers to structure the content. Thus, a more logical structure based on the reading order and the grouping of information according to the relevance will have to the user is preferred. On that note one of the most common methods of ranking content is choosing and setting the appropriate font size and weight depending on the importance of the message. (for example the h1 element – “heading 1” – represents the largest size of headings in contrast to h6 – the smallest size generally used for image legend descriptions and other details).

In order to differentiate and attract the reader’s attention, the visual elements within an interface are implemented by resorting to color or surface contrasts. A concrete example is the use of different tones within the same color in the implementation of the different instances of actions (the buttons) or the grouping of navigational elements within a sidebar. The header bar used in some cases with a dark background – contrast with the generally light background of an interface. Thus, the user is guided by the contrast between dark-light or warm-cold to brilliantly access the motivating content. The consistent use of contrasts and the establishment of a primary color palette serve to enhance the user experience and represent the brand’s positive emotions.

Key Takeaway: After the creation of a mockup visual designers can test which are the areas of interest (represented by contrast) by applying a lens blur effect (with a minimum radius 35%) after applying the flatten image command to flatten the entire area;

The correct use of the white space rule (rule of clear space) can improve the visual appearance of an interface due to the possibility of easy identification of navigation elements or those that have the role of standing out – for example the traditional CTA (Call to Action) buttons – which prompts the user to perform important actions of the interface. In general, it is recommended to create a balance between the free space and the space intended for the actual content.

Famous references: we can find relevant examples by checking the use of white space within the Medium platform – one of the most popular blogging platforms or within the Quora web application or the free space within the main Google search page.

The visual consistency of an interface is defined by establishing a harmonious color palette and a coherent visual style produced by similarity – association and repetition of the common elements as well as their technical features. By properly grouping the elements related to functionality and those related to content we can obtain a compact and unified visual layout. Also, starting from obtaining a set, it is recommended to limit the use of fonts to between 2 and 3 families. As a result of this provision we can typographically alternate between a serif and a sans serif font to differentiate between headings and paragraphs.

Influenced by the traditional reading from top to bottom or from left to right, the visual reading of the screens starts from the anatomy of the eye and the limits that the visual sense assumes. Thus, according to the rules of visual perception, the organization and implementation of the content – in such a way that it can be received as natural as possible, easy to read and understand has the objective of increasing readability. According to the user most common behaviour and The Gutenberg Diagram, two models specific to web design were subsequently developed: the F model and the Z model. Following studies based on the way users visually scan interfaces, it was demonstrated that certain regions of the screen – such as the top-left part or right-bottom are suitable places for placing elements of visual interest of increased importance (examples placing logos in the top-left or CTA buttons in the bottom-right, the file/save command in most graphic processing interfaces).

Another fundamental principle in advertising production of web interfaces is accessibility. The positive user experience can be enhanced by efficient structuring and by making available the elements necessary for navigation as well as the simplest possible methods to achieve one’s goals. Thus, placing the menu in easily accessible areas of the screen favors successful navigation. Paradoxically, in the case of more complex interfaces, a common practice is to hide secondary actions in burger menus or dynamic sidebars. In order not to interrupt the user’s attention, we can divide forms into steps or the introduction of the product itself (walkthrough/onboarding access) if we are developing a more complex interface with which visitors must be familiar.

Becoming more and more popular with the development of mobile applications, interactive elements – or micro-interactions – have the role of providing feedback to the user when going through various sections of the interfaces.

Depending on the role of the interface, the content and the main message of the brand must be emphasized by using the same color palette or by constructing a unified visual experience. In many cases, a good structuring of the information from a textual and conceptual point of view, serves to easily convey the values ​​of the brand to the target audience.