Walking the TightropeBalancing the art & science of UX design

Vidhi Maru / 01 Apr 2020

If you imagine UX as a two-tier cake, the scientific base is pure usability engineering and visual design is the artsy icing on the top.

Usability engineering focuses on minimizing users’ cognitive load whereas visual design deals with the aesthetics and the optimum arrangement of imagery, text, space, grouping elements and colours.

There was a time, when the UX field used to have separate roles for UX & visual design, wrongly assuming that the science and art aspects of UX are meant to be silos. Treating them like separate components used to often lead to the UX and visual design roles ending up at loggerheads with each other leading to many unpleasant debates and ultimately sub-par digital experiences.

Fortunately, the UX field has matured and UX professionals all over the world now realise that an exceptional experience can be created only when the science & art aspects of UX complement each other and are in perfect harmony. The top UX firms across the globe have converged the UX and visual designer roles into one generalist job description to enable UX design to be done in a more holistic way.

Using this holistic UX approach should lead to digital experiences that exhibit seven core principles of good design (CREWHUB). When done right, the first four principles (CREW) should lead to the last three (HUB).

Contrast

Contrast can do several things. It creates a focal point and visual balance or a spot to which your eye is naturally drawn. Generally, one element becomes more immediately visible than its contrasted opposite, giving it more visual weight and attraction to an eye. Contrast can also be used to produce a sense of balance and harmony, ensuring that items of various degrees of visual weight are distributed in a pleasing way across the page or screen. It can be created with color, size, shape & typography. It is exciting, dramatic and naturally aesthetically pleasing. It creates something we enjoy looking at, so contrast should be used frequently in design.

Repetition

The use of repetition is one of the key elements in enhancing and improving the experience for users. Whether be it in print campaigns or web design, the use of recognizable, repeating imagery or patterns allows users to identify their place within a wider structure. Like adopting design elements across the design including the repetition of visual elements, arranging important icons in similar places or repeating content can allow for more streamlined user experience. This approach allows to build design framework which further helps in clarity of information and structure. To put the users at ease designers should think of the repetition of visual elements and patterns they create throughout the project.

Emphasis

The emphasis gives dominance in a particular area or element of focus in a design. Without it design is nothing more than a presentation of a group of details with equal importance. When a design has no emphasis, nothing stands out. The effective use of this design principle calls attention to the important areas of the layout. No matter what element is chosen to emphasise it should never demand all the attention. It is important to note that emphasis is necessary, but a good composition is one in which all the elements work together for a unifying effect.

Whitespace

White space is the area between design elements. It is also the space within individual design elements, including the space between typography glyphs (readable characters).

Despite its name, white space does not need to be white. It can be any color, texture, pattern, or even a background image. White space can cause problems between designers and clients as clients consider whitespace as wasted space. They think it could be used to add more information or other visual elements. Design theory promotes the use of white space for elegance and ensuring a quality user experience. On the contrary, white space is a great tool to balance design elements and better organize content to improve the visual communication experience. White space is the real star of the show. People get frustrated when information bombards them. We’re humans, not machines. White space calms us, letting us “breathe”.

Hierarchy

The principle of hierarchy guides an eye on the page based on the importance of the elements. Hierarchy controls the delivery of the experience. If you have a hard time figuring out where to look on a page, it’s more than likely that the layout is missing a clear visual hierarchy. To create a clear visual hierarchy, use 2–3 typeface sizes to indicate to users what pieces of content are most important or at the highest level in the page or consider using bright colors for important items and muted colors for less important ones. Hierarchy is also incorporated with different design elements. A general rule of thumb is to include small, medium, and large components in the design.

Unity

Each of the design principles in this paper relate to “parts” of overall design. Unity refers to the sum of those parts. Unity is the end goal of UI design, but that doesn’t mean you should save it for the last thing to consider. To achieve a sense of unity with your design, you’ll need to plan and decide the overall message you want to communicate. It also gives elements the appearance of completeness that they belong together. When a composition has unity the design will be viewed as one piece, as a whole, and not as separate elements with the hanging elements. Using too many shapes and forms may cause a design to be unfocused, cluttered and confusing.

Balance

Balance is the distribution of the visual weight of objects, colors, texture, and space. These elements are used to make the design feel stable. When designing a layout, take a step and ask yourself if the overall composition feels balanced. If one element draws too much attention, you can experiment with size, color, contrast, or density to help redistribute the visual weight. There are four types of balance in design. Symmetrical, asymmetrical, and radial balance are more common in UI design. Each type of balance can be mixed and matched to make a design more dynamic and lively.

The secret to creating truly exceptional digital experiences is to aim for the perfect blend of science and art. It should be impossible to distinguish where the engineering ends and the ornamentation starts.

There is an art to science, and a science in art; the two are not enemies but different aspects of the whole – Isaac Asimov